/*  Calendar.css - the dashboard widget (Calendar2.ascx) and the full page (Calendar.aspx)
 *
 *  ONE FILE FOR BOTH, deliberately. The old widget carried its styling inside Default.aspx, so the
 *  only way to build a second calendar screen was to copy it. The date chip, the event row and the
 *  type badge are the same objects on both screens and are defined once here.
 *
 *  VARIABLES IT USES, all from the tenant's _Styles/<id>/Config.css, all with fallbacks so the
 *  file renders on a tenant that has not defined them:
 *
 *      --primary-dark-color        the date chip and the section headings
 *      --link-dark-color           links
 *      --background-active-color   the page ground
 *
 *  PHONE FIRST WHERE IT MATTERS. Two things break a calendar on a 390px screen and both are
 *  handled below rather than left to chance:
 *
 *      1. A seven-column month grid cannot hold text. Under 700px the grid keeps its shape but
 *         shows coloured dots instead of event names, and tapping a day lists that day underneath.
 *         That is the only layout that stays usable - a horizontally scrolling month grid is not.
 *      2. The filter bar wraps to as many rows as it needs and its controls are 44px tall, which
 *         is the smallest comfortable touch target.
 */


/*============================================================================
  Shared: the date chip and one event row
============================================================================*/

.cal-chip {
    flex: 0 0 auto;
    width: 64px;
    min-height: 62px;
    padding: 6px 2px;
    box-sizing: border-box;
    background: var(--primary-dark-color, #3c4679);
    color: white;
    text-align: center;
    font-family: Lato, sans-serif;
    line-height: 1.05;
}

    .cal-chip .cal-chip-month {
        display: block;
        font-size: 13px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .cal-chip .cal-chip-day {
        display: block;
        font-size: 24px;
        font-weight: 700;
        margin-top: 2px;
    }

        /*  "5-10" has to fit the same chip a "5" does. */
        .cal-chip .cal-chip-day.cal-chip-range {
            font-size: 17px;
            margin-top: 5px;
        }

.cal-event {
    display: flex;
    align-items: stretch;
    background: #f8f8f8;
    margin: 0 0 8px 0;
}

.cal-event-body {
    flex: 1 1 auto;
    min-width: 0;                 /* lets long names wrap instead of stretching the row */
    padding: 7px 10px 8px 12px;
}

.cal-event-name {
    display: block;
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.35;
    word-wrap: break-word;
}

    .cal-event-name a {
        color: var(--link-dark-color, #24569C);
        text-decoration: none;
    }

        .cal-event-name a:hover,
        .cal-event-name a:focus {
            text-decoration: underline;
        }

.cal-event-meta {
    display: block;
    font-size: 12px;
    color: #555;
    line-height: 1.5;
    margin-top: 2px;
}

.cal-event-tags {
    margin-top: 4px;
    line-height: 1.9;
}

/*  Type, sport and calendar badges. The colour comes from the row's own ColorHex so two calendars
 *  are told apart without a legend. */
.cal-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 1px 7px;
    margin-right: 5px;
    border-radius: 9px;
    background: #e3e3e3;
    color: #333;
    white-space: nowrap;
}

    .cal-badge.cal-badge-color {
        color: white;
    }

.cal-badge-plain {
    display: inline-block;
    font-size: 11px;
    color: #666;
    margin-right: 8px;
    white-space: nowrap;
}


/*============================================================================
  The dashboard widget
============================================================================*/

.cal2 {
    font-family: Avalon, sans-serif;
    color: black;
}

    .cal2 h2 {
        margin: 0;
    }

/*  clear:both is load-bearing on all three of these, and not a precaution.
 *
 *  Tenant.css floats h2 left at width:100%, and this list sets overflow-y, which makes it a block
 *  formatting context. A BFC is placed BESIDE a float rather than flowing under it, so without the
 *  clear the list computes to 0px wide and the panel renders as 400px of blank white - measured,
 *  not guessed. .callist on the full page carries the same rule for the same reason. */
.cal2-list {
    clear: both;
    list-style: none;
    margin: 0;
    padding: 8px 0 0 0;
    max-height: 400px;
    overflow-y: auto;
    background: white;
}

    .cal2-list li {
        display: block;
        margin: 0;
    }

.cal2-empty {
    clear: both;
    padding: 18px 12px;
    color: #666;
    font-size: 13px;
    background: white;
}

.cal2-more {
    clear: both;
    display: block;
    padding: 9px 4px 2px 4px;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    background: white;
}

    .cal2-more a {
        color: var(--link-dark-color, #24569C);
        text-decoration: none;
    }

        .cal2-more a:hover,
        .cal2-more a:focus {
            text-decoration: underline;
        }


/*============================================================================
  The full page
============================================================================*/

.calpage {
    font-family: Avalon, sans-serif;
    color: black;
}

    .calpage h1 {
        margin: 0 0 4px 0;
    }

.calpage-sub {
    color: #555;
    font-size: 13px;
    margin: 0 0 14px 0;
}

/*  --- toolbar: view switch and search --- */

.calbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px 0;
    /*  clear:both is load-bearing. Tenant.css floats .TenantContent h2 left at width:100%, and a
     *  flex container placed after it lays out BESIDE the float and collapses to zero width. */
    clear: both;
}

.calviews {
    display: inline-flex;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    overflow: hidden;
}

    .calviews button {
        appearance: none;
        border: 0;
        background: white;
        color: #333;
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        padding: 0 16px;
        height: 40px;
        cursor: pointer;
    }

        .calviews button + button {
            border-left: 1px solid #c8c8c8;
        }

        .calviews button[aria-pressed="true"] {
            background: var(--primary-dark-color, #3c4679);
            color: white;
        }

.calsearch {
    flex: 1 1 220px;
    min-width: 160px;
    position: relative;
}

    .calsearch input {
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        padding: 0 32px 0 11px;
        font: inherit;
        font-size: 14px;
        border: 1px solid #c8c8c8;
        border-radius: 4px;
        background: white;
        color: black;
    }

.calsearch-clear {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 34px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #888;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/*  --- filters --- */

.calfilters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0 0 6px 0;
    clear: both;
}

.calfilter {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-width: 140px;
}

    .calfilter label {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: #666;
        margin-bottom: 2px;
    }

    .calfilter select {
        height: 40px;
        font: inherit;
        font-size: 14px;
        padding: 0 8px;
        border: 1px solid #c8c8c8;
        border-radius: 4px;
        background: white;
        color: black;
    }

.calcount {
    font-size: 12px;
    color: #666;
    margin: 6px 0 12px 0;
    clear: both;
}

    .calcount button {
        appearance: none;
        border: 0;
        background: none;
        color: var(--link-dark-color, #24569C);
        font: inherit;
        font-size: 12px;
        text-decoration: underline;
        cursor: pointer;
        padding: 0 0 0 6px;
    }

/*  --- list view --- */

.callist {
    clear: both;
}

.callist-month {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--primary-dark-color, #3c4679);
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 4px;
    margin: 18px 0 9px 0;
}

    .callist-month:first-child {
        margin-top: 4px;
    }

.calempty {
    padding: 30px 14px;
    text-align: center;
    color: #666;
    font-size: 14px;
    background: #f8f8f8;
}

/*  --- month-grid view --- */

.calgrid-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 0 8px 0;
    clear: both;
}

    .calgrid-nav button {
        appearance: none;
        height: 40px;
        min-width: 44px;
        padding: 0 14px;
        border: 1px solid #c8c8c8;
        border-radius: 4px;
        background: white;
        color: #333;
        font: inherit;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
    }

        .calgrid-nav button:disabled {
            opacity: .4;
            cursor: default;
        }

.calgrid-title {
    flex: 1 1 auto;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-dark-color, #3c4679);
}

.calgrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #ddd;
    border: 1px solid #ddd;
    clear: both;
}

.calgrid-dow {
    background: #f0f0f0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #555;
    padding: 5px 0;
}

.calgrid-cell {
    background: white;
    min-height: 92px;
    padding: 3px 4px 5px 4px;
    font-size: 11px;
    overflow: hidden;
}

    .calgrid-cell.calgrid-out {
        background: #fafafa;
        color: #bbb;
    }

    .calgrid-cell.calgrid-today .calgrid-num {
        background: var(--primary-dark-color, #3c4679);
        color: white;
        border-radius: 50%;
    }

.calgrid-num {
    display: inline-block;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
}

.calgrid-ev {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    appearance: none;
    border: 0;
    border-left: 3px solid #999;
    background: #f2f2f2;
    color: #222;
    font: inherit;
    font-size: 10.5px;
    line-height: 1.25;
    padding: 2px 3px;
    margin-top: 2px;
    cursor: pointer;
    /*  Two lines, then clipped - a five-class tournament name is long and must not blow the row
     *  height out. The full name is in the tooltip and in the day panel below. */
    max-height: 26px;
    overflow: hidden;
}

.calgrid-dots {
    display: none;
    margin-top: 3px;
    line-height: 1;
}

    .calgrid-dots i {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin: 0 1px 2px 0;
        background: #999;
    }

/*  The panel that opens under the grid when a day is tapped. */
.calday {
    margin: 12px 0 0 0;
    border: 1px solid #ddd;
    background: white;
    padding: 10px 12px 4px 12px;
}

    .calday[hidden] {
        display: none;
    }

.calday-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

    .calday-head h3 {
        margin: 0;
        font-size: 14px;
        color: var(--primary-dark-color, #3c4679);
    }

    .calday-head button {
        appearance: none;
        border: 0;
        background: none;
        color: #777;
        font-size: 20px;
        line-height: 1;
        width: 34px;
        height: 34px;
        cursor: pointer;
    }


/*============================================================================
  Phone
============================================================================*/

@media (max-width: 700px) {

    .cal-chip {
        width: 54px;
        min-height: 56px;
    }

        .cal-chip .cal-chip-month {
            font-size: 11.5px;
        }

        .cal-chip .cal-chip-day {
            font-size: 21px;
        }

            .cal-chip .cal-chip-day.cal-chip-range {
                font-size: 14px;
            }

    .cal-event-body {
        padding: 6px 8px 7px 10px;
    }

    .calfilter {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }

    .calsearch {
        flex: 1 1 100%;
    }

    .calviews {
        flex: 1 1 100%;
    }

        .calviews button {
            flex: 1 1 50%;
        }

    /*  The month grid keeps its shape but drops to dots. Event names cannot be read at 50px wide,
     *  and a horizontally scrolling month is worse than no month. Tapping a day opens .calday. */
    .calgrid-cell {
        min-height: 46px;
        padding: 2px;
    }

    .calgrid-ev {
        display: none;
    }

    .calgrid-dots {
        display: block;
    }

    .calgrid-num {
        font-size: 11px;
        min-width: 18px;
        height: 18px;
        line-height: 18px;
    }

    .calgrid-dow {
        font-size: 9.5px;
    }
}