/* =========================================================================
   Crowder College Master Calendar — brand theme
   Palette (Brand Guidelines, rev. 01.2020):
     Royal Blue  #1955a6   Navy  #001f4e   Gray  #5d677e
   Typography: Lato (primary brand font)
   ========================================================================= */

:root {
    --cc-royal: #1955a6;
    --cc-royal-dark: #12447f;
    --cc-royal-light: #e9f0fa;
    --cc-navy: #001f4e;
    /* Fixed brand navy for gradients/solid brand surfaces. Unlike --cc-navy (which becomes a light
       heading ink in dark mode) this always stays dark so branded bars keep their look. */
    --cc-navy-deep: #001f4e;
    --cc-navy-800: #0a2a5c;
    --cc-gray: #5d677e;
    --cc-gray-200: #eef1f6;
    --cc-surface: #ffffff;
    --cc-page: #f4f6fa;
    --cc-border: #e2e6ee;
    --cc-ink: #1e2536;
    /* Square corners throughout: the calendar is embedded in www.crowder.edu, which has none.
       Circles (spinners, dots, swatches, switch knobs) are set literally and stay round. */
    --cc-radius: 0;
    --cc-radius-sm: 0;
    --cc-shadow-sm: 0 1px 2px rgba(0, 31, 78, .06), 0 2px 8px rgba(0, 31, 78, .05);
    --cc-shadow: 0 6px 24px rgba(0, 31, 78, .10);

    /* Squares off every Bootstrap component and rounded utility in one place. */
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-2xl: 0;
    --bs-border-radius-pill: 0;

    /* Map Bootstrap primary onto the brand royal blue. */
    --bs-primary: #1955a6;
    --bs-primary-rgb: 25, 85, 166;
    --bs-link-color: #1955a6;
    --bs-link-hover-color: #12447f;
    --bs-body-color: #1e2536;
    --bs-body-font-family: 'Lato', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}

html {
    min-height: 100%;
}

/* Sticky footer: the page body grows to fill the viewport so the footer is never
   overlapped by tall content (the calendar in particular) on narrow screens. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* On phones 100vh is the viewport with the browser's URL bar retracted, so while the bar is
       showing it is taller than the visible area and pushes the footer below the fold. dvh tracks
       the bar and matches the window.innerHeight the calendar sizes itself against. */
    min-height: 100dvh;
    background-color: var(--cc-page);
    color: var(--cc-ink);
    font-family: 'Lato', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.cc-main-wrap {
    flex: 1 0 auto;
}

/* No site header to sit under, so the content would otherwise start flush against the top of the
   iframe. Match the wrapper's horizontal gutter. */
.cc-embed .cc-main-wrap {
    padding-top: .75rem;
}

/* An embed is sized by the host's iframe, so the page must fit it exactly: the calendar scrolls
   inside its own shell and the frame itself never gets a scrollbar. */
.cc-embed {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.cc-embed .cc-main-wrap {
    flex: 1 1 auto;
    min-height: 0;
}

.cc-embed-footer {
    flex: 0 0 auto;
    padding: .6rem .75rem 1rem;
    border-top: 1px solid var(--cc-border);
    font-size: .85rem;
    color: var(--cc-gray);
    text-align: center;
}

.cc-embed-footer a {
    font-weight: 700;
    color: var(--cc-royal);
}

/* ---------- Typography ------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 800;
    color: var(--cc-navy);
    letter-spacing: -.01em;
}

.cc-page-title {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--cc-navy);
    margin: 0;
}

.cc-eyebrow {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 800;
    font-size: .72rem;
    color: var(--cc-royal);
}

.text-brand { color: var(--cc-royal) !important; }
.text-navy { color: var(--cc-navy) !important; }
.bg-brand { background-color: var(--cc-royal) !important; }
.bg-navy { background-color: var(--cc-navy-deep) !important; }

a {
    color: var(--cc-royal);
    text-decoration: none;
}

a:hover { color: var(--cc-royal-dark); }

/* ---------- Navbar ----------------------------------------------------- */

.cc-navbar {
    background: linear-gradient(100deg, var(--cc-navy-deep) 0%, var(--cc-royal) 100%);
    box-shadow: 0 2px 14px rgba(0, 31, 78, .18);
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.cc-navbar .navbar-brand {
    color: #fff;
    font-weight: 900;
    letter-spacing: .01em;
    line-height: 1.05;
}

.cc-navbar .navbar-brand small {
    display: block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.cc-navbar .nav-link {
    color: rgba(255, 255, 255, .85) !important;
    font-weight: 700;
    border-radius: var(--cc-radius-sm);
    padding: .4rem .85rem !important;
    transition: background-color .15s ease, color .15s ease;
}

.cc-navbar .nav-link:hover,
.cc-navbar .nav-link:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, .12);
}

.cc-navbar .nav-link.active {
    color: #fff !important;
    background-color: rgba(255, 255, 255, .18);
}

.cc-navbar .navbar-text,
.cc-navbar .nav-item .nav-link.cc-user {
    color: rgba(255, 255, 255, .82) !important;
    font-weight: 600;
}

.cc-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, .35);
}

.cc-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.cc-navbar .nav-link i,
.cc-nav-btn i {
    width: 1.15rem;
    text-align: center;
    flex: none;
}

.cc-navbar .nav-link,
.cc-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.cc-nav-tools-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cc-navbar .cc-nav-btn {
    border-color: transparent;
}

.cc-navbar .cc-nav-btn:hover,
.cc-navbar .cc-nav-btn:focus,
.cc-navbar .cc-nav-btn.show {
    border-color: transparent;
    background-color: rgba(255, 255, 255, .14);
    color: #fff;
}

/* Wide: a single row — page links on the left, account tools pushed to the right. */
@media (min-width: 768px) {
    .cc-nav-inner {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        gap: .75rem;
        min-width: 0;
    }

    .cc-nav-tools {
        margin-left: auto;
    }

    .cc-nav-btn-label {
        display: none;
    }

    .cc-navbar .cc-user .text-truncate {
        max-width: 14rem;
    }
}

/* Narrow: everything lives in the one header menu, grouped under headings so the
   panel reads as a list of sections rather than a pile of controls. */
@media (max-width: 767.98px) {
    .cc-nav-menu {
        margin-top: .6rem;
        border-top: 1px solid rgba(255, 255, 255, .18);
    }

    /* Open menu = full-screen overlay. A panel floating over a visible calendar reads as
       something you can scroll past; covering the page makes the toggle the only way out. */
    body.cc-nav-open {
        overflow: hidden;
    }

    body.cc-nav-open .cc-navbar {
        position: fixed;
        inset: 0;
        z-index: 1045;
        margin-bottom: 0 !important;
        overflow-y: auto;
        align-items: flex-start;
        align-content: flex-start;
    }

    body.cc-nav-open .cc-navbar > .container-fluid {
        align-items: flex-start;
        align-content: flex-start;
        min-height: 100%;
    }

    body.cc-nav-open .cc-nav-menu {
        padding-bottom: 1.5rem;
    }

    .cc-nav-inner {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-top: .35rem;
    }

    .cc-nav-group {
        padding: .35rem 0;
    }

    .cc-nav-group + .cc-nav-group {
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .cc-nav-label {
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .55);
        padding: .35rem .75rem .3rem;
    }

    .cc-navbar .nav-link {
        gap: .65rem;
        padding: .6rem .75rem !important;
        border-radius: var(--cc-radius-sm);
    }

    .cc-navbar .cc-user {
        font-weight: 700;
        min-width: 0;
    }

    .cc-navbar .cc-user .text-truncate {
        max-width: 100%;
    }

    .cc-nav-tools-row {
        flex-direction: column;
        align-items: stretch;
        gap: .3rem;
    }

    .cc-nav-tools-row .btn {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        border-radius: var(--cc-radius-sm);
        padding: .55rem .75rem;
        font-size: .95rem;
    }

    .cc-nav-btn.dropdown-toggle::after {
        margin-left: auto;
    }

    .cc-nav-tools-row .dropdown,
    .cc-nav-tools-row .dropdown-menu {
        width: 100%;
    }

    /* Relocated page actions: retone them for the dark header instead of the page background. */
    .cc-nav-page-actions {
        display: flex;
        flex-direction: column;
        gap: .3rem;
    }

    .cc-nav-page-actions .btn {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        border-radius: var(--cc-radius-sm);
        padding: .55rem .75rem;
        font-size: .95rem;
    }

    /* Counters that float off a button's corner on the page read better inline in a menu row. */
    .cc-nav-page-actions .btn .badge.position-absolute {
        position: static !important;
        transform: none !important;
        margin-left: auto;
    }

    .cc-navbar .cc-nav-page-actions .btn-outline-secondary,
    .cc-navbar .cc-nav-page-actions .btn-outline-primary {
        background-color: transparent;
        border-color: rgba(255, 255, 255, .35);
        color: #fff;
    }

    .cc-navbar .cc-nav-page-actions .btn-outline-secondary:hover,
    .cc-navbar .cc-nav-page-actions .btn-outline-primary:hover,
    .cc-navbar .cc-nav-page-actions .btn-outline-secondary:focus,
    .cc-navbar .cc-nav-page-actions .btn-outline-primary:focus {
        background-color: rgba(255, 255, 255, .14);
        border-color: rgba(255, 255, 255, .55);
        color: #fff;
    }

    .cc-navbar .cc-nav-page-actions .btn-primary,
    .cc-navbar .cc-nav-page-actions .btn-primary:hover,
    .cc-navbar .cc-nav-page-actions .btn-primary:focus {
        background-color: #fff;
        border-color: #fff;
        color: var(--cc-navy-deep);
    }
}

/* Bootstrap hard-codes these two radii, so the variables above cannot reach them.
   Checkboxes square off with everything else; the switch keeps its track shape. */
.form-check-input[type="checkbox"] { border-radius: 0; }
.form-switch .form-check-input { border-radius: 2em; }

/* ---------- Buttons ---------------------------------------------------- */

.btn {
    font-weight: 700;
    border-radius: 0;
    padding: .5rem 1.15rem;
    letter-spacing: .01em;
    transition: all .15s ease;
}

.btn-lg { padding: .7rem 1.6rem; }
.btn-sm { padding: .35rem .85rem; }

.btn-primary,
.btn-success {
    background-color: var(--cc-royal);
    border-color: var(--cc-royal);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    background-color: var(--cc-royal-dark);
    border-color: var(--cc-royal-dark);
    color: #fff;
    box-shadow: 0 4px 14px rgba(25, 85, 166, .30);
}

.btn-outline-primary,
.btn-outline-success {
    color: var(--cc-royal);
    border-color: var(--cc-royal);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-success:hover {
    background-color: var(--cc-royal);
    border-color: var(--cc-royal);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--cc-gray);
    border-color: #c7cdda;
}

.btn-outline-secondary:hover {
    background-color: var(--cc-gray);
    border-color: var(--cc-gray);
    color: #fff;
}

.btn-danger {
    background-color: #c62839;
    border-color: #c62839;
}

.btn-danger:hover {
    background-color: #a71f2e;
    border-color: #a71f2e;
}

.btn-outline-danger {
    color: #c62839;
    border-color: #c62839;
}

.btn-outline-danger:hover {
    background-color: #c62839;
    border-color: #c62839;
    color: #fff;
}

.btn-check:checked + .btn-outline-success,
.btn-check:checked + .btn-outline-primary {
    background-color: var(--cc-royal);
    border-color: var(--cc-royal);
    color: #fff;
}

/* ---------- Cards / surfaces ------------------------------------------ */

.card {
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow-sm);
}

.card-body { padding: 1.35rem; }

.cc-surface {
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow-sm);
}

.cc-panel-accent {
    border-top: 4px solid var(--cc-royal);
}

.box-shadow { box-shadow: var(--cc-shadow-sm); }

/* ---------- Forms ------------------------------------------------------ */

.form-label {
    font-weight: 700;
    color: var(--cc-navy);
    margin-bottom: .3rem;
}

.form-control,
.form-select {
    border-radius: var(--cc-radius-sm);
    border-color: #cdd4e0;
    padding: .5rem .75rem;
    color: var(--cc-ink);
}

/* Reserve room for the chevron so long option text doesn't run under it. */
.form-select {
    padding-right: 2.25rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cc-royal);
    box-shadow: 0 0 0 .2rem rgba(25, 85, 166, .18);
}

.form-check-input:checked {
    background-color: var(--cc-royal);
    border-color: var(--cc-royal);
}

.form-check-input:focus {
    border-color: var(--cc-royal);
    box-shadow: 0 0 0 .2rem rgba(25, 85, 166, .18);
}

.form-text { color: var(--cc-gray); }

.input-group-text {
    border-radius: var(--cc-radius-sm);
    background-color: var(--cc-gray-200);
    border-color: #cdd4e0;
    color: var(--cc-gray);
    font-weight: 600;
}

/* ---------- Event submission form ------------------------------------- */

/* Friendly, empowering intro banner at the top of the public submission form. */
.cc-submit-intro {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    background: var(--cc-royal-light);
    border: 1px solid #cfe0f5;
    border-radius: var(--cc-radius-sm);
}

.cc-submit-intro-icon {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--cc-royal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.cc-submit-intro .fw-semibold { color: var(--cc-navy); }

/* Group the form into clear, scannable sections with a light divider between them. */
.cc-form-section {
    padding-top: 1.35rem;
    margin-top: 1.35rem;
    border-top: 1px solid var(--cc-border);
}

.cc-form-section:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.cc-form-section-title {
    display: flex;
    align-items: center;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--cc-royal);
    margin-bottom: .9rem;
}

.cc-form-section-title .bi { color: var(--cc-royal); }

.cc-approval-badge {
    background: linear-gradient(135deg, var(--cc-navy-deep), var(--cc-royal));
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 0;
    padding: .22rem .55rem;
    box-shadow: 0 1px 3px rgba(25, 85, 166, .35);
    white-space: nowrap;
    cursor: help;
}

.cc-approval-badge:focus { outline: 2px solid rgba(25, 85, 166, .45); outline-offset: 1px; }

/* ---------- Unified category list (filter + Outlook sync) --------------- */
.cc-cat-list {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

/* Column labels so it's obvious at a glance what the two controls do. */
.cc-cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 0 .6rem .4rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid rgba(0, 31, 78, .1);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--cc-gray, #5d677e);
}

.cc-cat-head-show, .cc-cat-head-sync { display: inline-flex; align-items: center; gap: .35rem; }
.cc-cat-head-show i { color: var(--cc-royal); }
.cc-cat-head-sync { display: none; }
.cc-outlook-on .cc-cat-head-sync { display: inline-flex; }

/* An icon named mid-sentence in help text: Bootstrap Icons render at their own em size and with no
   side bearing, so pull them down to the running text size and add the space a word would have. */
.cc-inline-icon {
    font-size: .9em;
    line-height: 1;
    vertical-align: -.05em;
    margin-inline: .1em;
}

.cc-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .6rem;
    border-radius: 0;
    transition: background-color .12s ease;
}

.cc-cat-row:hover { background: var(--cc-royal-light); }
.cc-cat-sub { margin-left: 1.4rem; }

/* "My Outlook Calendar" sits at the bottom of the filter list out of A–Z order; a thin,
   straight, centered line (shorter than the card) separates it from Room Reservation above. */
.cc-cat-row-outlook {
    position: relative;
    margin-top: .55rem;
}

.cc-cat-row-outlook::before {
    content: "";
    position: absolute;
    top: -.28rem;
    left: 15%;
    right: 15%;
    height: 1px;
    background: var(--cc-border);
}

.cc-cat-main {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
    font-weight: 500;
    color: var(--cc-navy);
}

.cc-cat-main .form-check-input { margin: 0; flex: 0 0 auto; width: 1.15em; height: 1.15em; cursor: pointer; }
.cc-cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Per-row Outlook sync controls only appear once the user has turned sync on; the follow bell rides
   in the same pill and stays visible either way, so the pill drops its tint until sync is on. */
.cc-cat-sync {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    padding: .15rem .45rem;
    border-radius: 0;
    background: transparent;
}
.cc-outlook-on .cc-cat-sync { background: var(--cc-royal-light); }
.cc-cat-sync-outlook { display: none; align-items: center; gap: .35rem; }
.cc-outlook-on .cc-cat-sync-outlook { display: inline-flex; }
.cc-cat-sync-icon { display: block; font-size: .85rem; line-height: 1; }
/* Bootstrap's switch reserves label room and nudges the input down; the pill has neither a label nor
   room to spare, so strip that away and let the flex row center everything on one baseline. */
.cc-cat-sync .form-check.form-switch { display: flex; align-items: center; padding: 0; margin: 0; min-height: 0; }
.cc-cat-sync .form-switch .form-check-input { float: none; margin: 0; width: 2em; height: 1em; }
.cc-cat-sync .btn { display: inline-flex; align-items: center; line-height: 1; }
.cc-cat-sync-na { display: none; }
.cc-outlook-on .cc-cat-sync-na { display: inline-flex; background: transparent; }
.cc-cat-sync-na-text { font-size: .72rem; color: var(--cc-gray, #5d677e); white-space: nowrap; }

/* "Email me when this changes" bell, on category rows, sport rows and event cards. */
.cc-follow-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cc-gray, #5d677e);
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.cc-follow-btn:hover { background: var(--cc-royal-light); color: var(--cc-royal, #1955a6); }
.cc-follow-btn:disabled { opacity: .5; cursor: default; }
.cc-follow-btn.is-following { color: var(--cc-royal, #1955a6); background: var(--cc-royal-light); }
/* "All sports" when only some sports are followed: the outline bell picks up the followed colour and
   gets a dot, so it reads as neither off nor fully on. */
.cc-follow-btn.is-partial {
    position: relative;
    color: var(--cc-royal, #1955a6);
    background: var(--cc-royal-light);
}
.cc-follow-btn.is-partial::after {
    content: "";
    position: absolute;
    right: .18rem;
    bottom: .18rem;
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 .1rem var(--cc-surface, #fff);
}

/* Outlook appearance modal: field grid + color swatches. */
.cc-oa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cc-oa-field .form-label { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; color: var(--cc-navy, #001f4e); }
.cc-oa-swatches { display: flex; flex-wrap: wrap; gap: .35rem; }
.cc-oa-swatch {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
    padding: 0;
    cursor: pointer;
    transition: transform .1s ease, box-shadow .1s ease;
}
.cc-oa-swatch:hover { transform: scale(1.12); }
.cc-oa-swatch.is-selected { box-shadow: 0 0 0 2px var(--cc-royal, #1955a6); transform: scale(1.12); }
.cc-oa-swatch-static { display: inline-block; width: 1.1rem; height: 1.1rem; cursor: default; }
@media (max-width: 575.98px) { .cc-oa-grid { grid-template-columns: 1fr; } }

/* Athletics dropdown: sport show/hide + home/away, with per-sport Outlook sync inside. */
.cc-ath-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    border: 1px solid var(--cc-royal, #1955a6);
    background: var(--cc-surface);
    color: var(--cc-royal, #1955a6);
    border-radius: 0;
    padding: .12rem .55rem;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.cc-ath-toggle:hover { background: var(--cc-royal-light); }
.cc-ath-toggle.is-open { background: var(--cc-royal, #1955a6); color: #fff; }
.cc-ath-toggle.is-filtered { border-color: var(--cc-royal, #1955a6); box-shadow: 0 0 0 2px var(--cc-royal-light); }
.cc-ath-caret { font-size: .7rem; transition: transform .15s ease; }
.cc-ath-toggle.is-open .cc-ath-caret { transform: rotate(180deg); }

.cc-ath-panel {
    margin: .1rem .2rem .4rem 1.7rem;
    padding: .6rem .7rem;
    border: 1px solid var(--cc-border, #e2e6ef);
    border-radius: 0;
    background: #fbfcfe;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.cc-ath-panel[hidden] { display: none; }
.cc-ath-block { display: flex; flex-direction: column; gap: .4rem; }
.cc-ath-block-head { display: flex; align-items: center; justify-content: space-between; }
.cc-ath-block-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cc-gray, #5d677e);
}

/* Segmented All / Home / Away control. */
.cc-ath-seg {
    display: inline-flex;
    align-self: flex-start;
    border: 1px solid var(--cc-border, #e2e6ef);
    border-radius: 0;
    background: var(--cc-surface);
    padding: .12rem;
    gap: .1rem;
}
.cc-ath-seg-btn {
    border: 0;
    background: transparent;
    color: var(--cc-navy, #001f4e);
    border-radius: 0;
    padding: .2rem .7rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 1.3;
    transition: background-color .12s ease, color .12s ease;
}
.cc-ath-seg-btn:hover { background: var(--cc-royal-light); }
.cc-ath-seg-btn.is-active { background: var(--cc-royal, #1955a6); color: #fff; }

.cc-ath-sport-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    max-height: 15rem;
    overflow-y: auto;
}
.cc-ath-sport-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 .4rem;
    padding: .2rem .3rem;
    border-radius: 0;
}
/* The sync/follow controls are ~11rem wide, so once a sport's scope picker appears they can no
   longer share a line with the name in a narrow panel. Let them wrap, but keep them left-aligned
   and indented under the sport name so the pair still reads as one sport; the rows themselves are
   spaced further apart than the two lines within a row. */
.cc-ath-sport-row > .cc-cat-sync { margin-left: 1.6rem; }
.cc-ath-sport-row:hover { background: var(--cc-royal-light); }
.cc-ath-sport-row-all {
    border-bottom: 1px solid var(--cc-border);
    margin-bottom: .15rem;
    padding-bottom: .3rem;
}
/* Per-sport "which games to sync" picker, shown only once that sport's Outlook switch is on. */
.cc-ath-scope {
    width: auto;
    padding: .05rem 1.4rem .05rem .4rem;
    font-size: .72rem;
    line-height: 1.3;
    background-position: right .3rem center;
    background-size: 12px 9px;
    border-color: var(--cc-border, #e2e6ef);
    color: var(--cc-navy, #001f4e);
}
.cc-ath-scope[hidden] { display: none; }
/* "All sports" master switch when only some sports are on: a calm muted-blue mid-state with a
   centered knob, instead of Bootstrap's harsh full-on blue + dark knob. */
#athSyncAllSports:indeterminate {
    background-color: #9bb7de;
    border-color: #9bb7de;
    background-position: center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.cc-ath-sport-main {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    flex: 1 1 7rem;
    min-width: 7rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--cc-navy, #001f4e);
}
.cc-ath-sport-main .form-check-input { margin: 0; flex: 0 0 auto; width: 1.1em; height: 1.1em; cursor: pointer; }
.cc-ath-sport-name { min-width: 0; overflow-wrap: anywhere; }

/* "My Outlook Calendar" row: a lock hint shows until sync is turned on. */
.cc-outlook-lock { color: var(--cc-gray, #5d677e); cursor: help; flex: 0 0 auto; }
.cc-outlook-on .cc-outlook-lock { display: none; }
#filterOutlook:disabled { opacity: .5; }

/* ---------- Outlook sync prompt banner --------------------------------- */
.cc-outlook-banner {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.1rem 1.3rem;
    border-radius: 0;
    background: linear-gradient(120deg, var(--cc-navy-deep) 0%, var(--cc-royal) 100%);
    color: #fff;
    box-shadow: 0 .6rem 1.4rem rgba(0, 31, 78, .25);
}

.cc-outlook-banner-icon {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: rgba(255, 255, 255, .18);
    border-radius: 0;
}

.cc-outlook-banner-body { flex: 1 1 auto; min-width: 0; }
.cc-outlook-banner-title { font-weight: 800; font-size: 1.1rem; margin-bottom: .15rem; }
.cc-outlook-banner-text { font-size: .92rem; opacity: .95; }

.cc-outlook-banner-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: stretch;
}

.cc-outlook-banner-yes {
    background: var(--cc-surface);
    color: var(--cc-royal);
    font-weight: 700;
    border: 0;
    white-space: nowrap;
}

.cc-outlook-banner-yes:hover { background: #eef4ff; color: var(--cc-royal-dark); }

.cc-outlook-banner-no {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
    white-space: nowrap;
}

.cc-outlook-banner-no:hover { background: rgba(255, 255, 255, .28); color: #fff; }

/* Deliberately not a filled or full-width button: it sits at the bottom of the modal, where a
   solid bar reads as "apply and close" rather than "run a sync now". */
.cc-outlook-tools {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.cc-outlook-tool {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--cc-gray-200);
    border: 1px dashed rgba(15, 108, 189, .45);
    color: var(--cc-royal);
    font-weight: 600;
    border-radius: 0;
    padding: .25rem .75rem;
}

.cc-outlook-tool:hover,
.cc-outlook-tool:focus-visible {
    background: var(--cc-royal-light);
    border-style: solid;
    color: var(--cc-royal-dark);
}

@media (max-width: 575.98px) {
    .cc-outlook-banner { flex-direction: column; text-align: center; gap: .8rem; }
    .cc-outlook-banner-actions { flex-direction: row; width: 100%; }
    .cc-outlook-banner-actions .btn { flex: 1 1 0; }
    .cc-cat-sub { margin-left: .8rem; }
}

/* ---------- Guided location filter (Site -> Building -> Room) ----------- */
.cc-loc-steps { display: flex; flex-direction: column; gap: .6rem; }

.cc-loc-step {
    background: var(--cc-surface);
    border: 1px solid rgba(0, 31, 78, .12);
    border-radius: 0;
    padding: .55rem .65rem .65rem;
    transition: opacity .12s ease, border-color .12s ease;
}

.cc-loc-step-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .4rem;
    font-weight: 700;
    color: var(--cc-navy);
}

.cc-loc-step-head > .bi { color: var(--cc-royal); }

.cc-loc-step-num {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cc-royal);
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
}

.cc-loc-step-label { flex: 1 1 auto; }

.cc-loc-count {
    flex: 0 0 auto;
    font-size: .68rem;
    font-weight: 700;
    color: var(--cc-royal);
    background: var(--cc-royal-light);
    border-radius: 0;
    padding: .1rem .5rem;
}

.cc-loc-checklist {
    max-height: 11rem;
    overflow-y: auto;
    border: 1px solid rgba(0, 31, 78, .15);
    border-radius: 0;
    background: var(--cc-surface);
    padding: .2rem;
}

.cc-loc-opt {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    padding: .4rem .55rem;
    border-radius: 0;
    cursor: pointer;
    color: var(--cc-navy);
}

.cc-loc-opt:hover { background: var(--cc-royal-light); }
.cc-loc-opt input { flex: 0 0 auto; width: 1.15em; height: 1.15em; margin: 0; cursor: pointer; }
.cc-loc-opt span { overflow: hidden; text-overflow: ellipsis; }
.cc-loc-opt:has(input:checked) { background: var(--cc-royal-light); font-weight: 600; }

.cc-loc-optgroup {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--cc-gray, #5d677e);
    padding: .5rem .55rem .2rem;
}

.cc-loc-hint { font-size: .76rem; color: var(--cc-gray, #5d677e); margin-top: .35rem; display: flex; align-items: center; }
.cc-loc-hint-locked { display: none; }

/* A step is "locked" until its parent has a selection. */
.cc-loc-locked { opacity: .6; }
.cc-loc-locked .cc-loc-checklist { pointer-events: none; }
.cc-loc-locked .cc-loc-step-num { background: var(--cc-gray, #5d677e); }
.cc-loc-locked .cc-loc-step-head > .bi { color: var(--cc-gray, #5d677e); }
.cc-loc-locked .cc-loc-hint:not(.cc-loc-hint-locked) { display: none; }
.cc-loc-locked .cc-loc-hint-locked { display: flex; }

.cc-display-field { margin-bottom: 1rem; }
.cc-field-label { font-weight: 600; color: var(--cc-navy); margin-bottom: .25rem; display: block; }

@media (max-width: 991.98px) {
    .cc-loc-opt { padding: .55rem; }
    .cc-loc-checklist { max-height: 13rem; }
}




/* Custom category dropdown (native <select> is hidden but still holds the value). */
.cc-catpicker { position: relative; }
.cc-catpicker-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.cc-catpicker-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.cc-catpicker-toggle .cc-catpicker-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

.cc-catpicker-menu {
    display: none;
    position: absolute;
    z-index: 1080;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    background: var(--cc-surface);
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 0;
    box-shadow: 0 .5rem 1.25rem rgba(0, 31, 78, .18);
    padding: .3rem;
}

.cc-catpicker-menu.show { display: block; }

.cc-catpicker-item {
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: 0;
    border-radius: 0;
    padding: .5rem .6rem;
    text-align: left;
    color: var(--cc-navy);
    cursor: pointer;
}

.cc-catpicker-item .cc-catpicker-label { flex: 1 1 auto; }
.cc-catpicker-item:hover,
.cc-catpicker-item:focus { background: var(--cc-royal-light); outline: none; }
.cc-catpicker-item.active { background: var(--cc-royal-light); font-weight: 600; }

/* ---------- Toolbar / page header ------------------------------------- */

.cc-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

/* On small screens the actions move into the header menu, leaving only the visually-hidden
   heading behind — don't reserve vertical space for an empty toolbar. */
.cc-toolbar:not(:has(> :not(.visually-hidden):not(.d-none))) {
    margin-bottom: 0;
}

/* Embed mode has no blue site header, so the page repeats its brand lockup: same wording,
   weight and stacking as `.cc-navbar .navbar-brand`, recolored for a light background. */
.cc-embed-brand {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: .01em;
    line-height: 1.05;
    color: var(--cc-navy);
}

.cc-embed-brand small {
    display: block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cc-royal);
}

/* Toolbar actions collapse into a hamburger menu as the viewport (or embedding iframe)
   narrows, mirroring the mobile navbar. */
.cc-toolbar-actions-wrap {
    position: relative;
    margin-left: auto;
}

.cc-toolbar-toggle {
    display: none;
}

/* The icon states swap on Bootstrap's own aria-expanded, so nothing has to script it. */
.cc-toolbar-toggle .cc-toolbar-toggle-close,
.cc-toolbar-toggle[aria-expanded="true"] .cc-toolbar-toggle-open {
    display: none;
}

.cc-toolbar-toggle[aria-expanded="true"] .cc-toolbar-toggle-close {
    display: inline-block;
}

.cc-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: flex-end;
}

/* Wide: always show the actions inline; hide the hamburger (override Bootstrap's collapse hiding). */
@media (min-width: 992px) {
    .cc-toolbar-actions.collapse:not(.show),
    .cc-toolbar-actions {
        display: flex !important;
    }

    .cc-toolbar-toggle {
        display: none !important;
    }
}

/* Narrow: reveal the hamburger; Bootstrap's collapse shows/hides the actions, which we render
   as a dropdown panel. */
@media (max-width: 991.98px) {
    .cc-toolbar-toggle {
        display: inline-flex;
    }

    .cc-toolbar-actions {
        position: absolute;
        top: calc(100% + .4rem);
        right: 0;
        z-index: 1040;
        flex-direction: column;
        align-items: stretch;
        min-width: 13rem;
        max-width: min(88vw, 20rem);
        background: var(--cc-surface);
        border: 1px solid var(--cc-border);
        border-radius: 0;
        padding: .5rem;
        box-shadow: 0 .6rem 1.4rem rgba(0, 31, 78, .18);
    }

    .cc-toolbar-actions .btn {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: none;
        justify-content: flex-start;
        text-align: left;
    }
}

/* Semester view: the term picker and its options ride next to the toolbar title. */
.cc-academic-controls {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.cc-academic-controls .form-check {
    white-space: nowrap;
}

.cc-academic-controls .form-select {
    width: auto;
    min-width: 11rem;
}

.cc-academic-term-label {
    margin-bottom: 0;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--cc-gray, #5d677e);
}

/* Fetching a new range/view: dim the grid and show a wait cursor so a slow feed reads as busy
   rather than broken. */
.cc-calendar-loading .fc-view-harness {
    opacity: .45;
    transition: opacity .12s linear;
    pointer-events: none;
}

.cc-calendar-loading {
    cursor: progress;
}

/* List and Semester views instead swap their rows for a spinner: a half-faded list of the previous
   range's events reads as real data and is easy to misread while the new range loads. cc-data-stale
   covers the gap after a view switch, where the incoming view is briefly rendered against the
   outgoing view's data and would otherwise claim the semester has no events. */
.cc-calendar-loading.cc-list-view .fc-view-harness,
.cc-data-stale.cc-list-view .fc-view-harness {
    opacity: 1;
    position: relative;
    min-height: 8rem;
}

.cc-calendar-loading.cc-list-view .fc-view-harness > *,
.cc-data-stale.cc-list-view .fc-view-harness > * {
    visibility: hidden;
}

.cc-calendar-loading.cc-list-view .fc-view-harness::after,
.cc-data-stale.cc-list-view .fc-view-harness::after {
    content: "";
    position: absolute;
    top: 3rem;
    left: 50%;
    width: 2.25rem;
    height: 2.25rem;
    margin-left: -1.125rem;
    border: .2rem solid var(--cc-border);
    border-top-color: var(--cc-navy);
    border-radius: 50%;
    animation: cc-spin .7s linear infinite;
}

@keyframes cc-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cc-calendar-loading.cc-list-view .fc-view-harness::after,
    .cc-data-stale.cc-list-view .fc-view-harness::after {
        animation-duration: 2.4s;
    }
}

/* Stands in for the empty-list message while a fetch is outstanding. */
.cc-inline-spinner {
    display: inline-block;
    width: 2.25rem;
    height: 2.25rem;
    border: .2rem solid var(--cc-border);
    border-top-color: var(--cc-navy);
    border-radius: 50%;
    animation: cc-spin .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .cc-inline-spinner { animation-duration: 2.4s; }
}

/* A feed that failed hands FullCalendar an empty set, so without this the list would claim the
   range has no events. */
.cc-feed-error:not(.cc-calendar-loading):not(.cc-data-stale).cc-list-view .fc-view-harness {
    position: relative;
    min-height: 8rem;
}

.cc-feed-error:not(.cc-calendar-loading):not(.cc-data-stale).cc-list-view .fc-view-harness > * {
    visibility: hidden;
}

.cc-feed-error:not(.cc-calendar-loading):not(.cc-data-stale).cc-list-view .fc-view-harness::after {
    content: "Could not load events. Check your connection and try again.";
    position: absolute;
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: 22rem;
    text-align: center;
    color: var(--bs-danger, #b02a37);
}

/* Semester view: the picker names the range, so FullCalendar's title would only repeat it. */
.cc-academic-view .fc-toolbar-title {
    display: none;
}

/* The semester picker steps the range, so prev/next/today have nothing to act on here. */
.cc-academic-view .fc-header-toolbar .fc-toolbar-chunk:first-child {
    display: none;
}

/* Academic-only embed: the semester picker, print button and appearance picker are the whole
   interface. Everything else in the toolbar is either a way out of this view or a filter that
   would break the lock. */
.cc-academic-embed .cc-toolbar-toggle,
.cc-academic-embed .cc-toolbar-actions > *:not(.cc-academic-controls):not(.cc-embed-theme) {
    display: none !important;
}

.cc-academic-embed .cc-toolbar-actions {
    display: flex !important;
    position: static;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
}

/* The controls are moved out of the toolbar and beside the title, so this is keyed off the
   calendar rather than the (now distant) embed wrapper. */
.cc-academic-locked .cc-academic-controls .form-check {
    display: none;
}

@media (max-width: 991.98px) {
    .cc-academic-controls {
        width: 100%;
        flex-wrap: nowrap;
        gap: .4rem;
    }

    /* Too little room for it here; the picker's own options say what it is. */
    .cc-academic-term-label {
        display: none;
    }

    .cc-academic-controls .form-select {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        font-size: .82rem;
        padding: .25rem 1.75rem .25rem .5rem;
    }

    .cc-academic-controls .form-check,
    .cc-academic-controls .btn {
        flex: 0 0 auto;
    }

    .cc-academic-controls .form-check-label {
        font-size: .78rem;
    }

    .cc-academic-controls .btn {
        padding: .25rem .5rem;
        font-size: .82rem;
    }

    /* List and Semester rows: shorter times, a narrow time column and tighter type, so a row is
       one or two lines instead of wrapping into a block. */
    .fc .fc-list-day-cushion {
        padding: .25rem .5rem;
        gap: .4rem;
    }

    .fc .fc-list-day-text,
    .fc .fc-list-day-side-text {
        font-size: .78rem;
    }

    .fc .fc-list-event-time {
        width: 4.6rem;
        padding: .3rem .35rem;
        font-size: .72rem;
        white-space: normal;
        vertical-align: top;
    }

    .fc .fc-list-event-graphic {
        padding: .35rem .2rem .35rem .4rem;
        vertical-align: top;
    }

    .fc .fc-list-event-title {
        padding: .3rem .45rem .3rem .2rem;
        font-size: .82rem;
        line-height: 1.25;
        /* Long unbroken names (course codes, opponent names) otherwise set the table's minimum
           width and push the list into a horizontal scroll. */
        overflow-wrap: anywhere;
    }

    .cc-list-day-showall {
        font-size: .72rem;
    }
}

/* Wide/narrow variants of a control's own wording (semester controls, list actions). */
.cc-label-narrow {
    display: none;
}

@media (max-width: 991.98px) {
    .cc-label-wide {
        display: none;
    }

    .cc-label-narrow {
        display: inline;
    }
}

/* Academic Calendar view: the semester picker rides next to the toolbar title. */
.fc-toolbar-chunk-academic {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    min-width: 0;
}

/* Printing is aimed at the academic calendar: keep the dates, drop the chrome. */
.cc-print-title {
    display: none;
}

@media print {
    .cc-print-title {
        display: block;
        font-size: 1.4rem;
        margin: 0 0 .75rem;
    }

    /* On screen the calendar is a fixed-height box with its own scroller; on paper it has to
       become ordinary flowing content or only the first screenful is printed. */
    .cc-calendar-shell,
    .cc-calendar-shell .fc-view-harness,
    .cc-calendar-shell .fc-view,
    .cc-calendar-shell .fc-scroller,
    .cc-calendar-shell .fc-scroller-harness,
    .cc-calendar-shell .fc-list {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .cc-calendar-shell {
        border: 0 !important;
        box-shadow: none !important;
    }

    /* List day headers repeat as the semester spans pages. */
    .cc-calendar-shell .fc-list-table thead {
        display: table-header-group;
    }

    .cc-toolbar-actions-wrap,
    .cc-toolbar-toggle,
    .fc-header-toolbar,
    .navbar,
    footer,
    .modal,
    .modal-backdrop,
    .cc-week-nav {
        display: none !important;
    }

    .fc-list-event,
    .fc-list-day {
        break-inside: avoid;
    }

    a[href]::after {
        content: none !important;
    }
}

/* The semester print is a generated document, not the page: it replaces everything on paper. */
.cc-print-sheet {
    display: none;
}

@media print {
    body.cc-printing-academic .cc-print-sheet {
        display: block;
        color: #111;
        font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.cc-printing-academic .cc-calendar-shell,
    body.cc-printing-academic .cc-print-title,
    body.cc-printing-academic .cc-toolbar,
    body.cc-printing-academic #ccAcademicUnavailable,
    body.cc-printing-academic #sessionExpiredBanner,
    body.cc-printing-academic #outlookSyncingIndicator {
        display: none !important;
    }

    .cc-print-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1rem;
        padding-bottom: .35rem;
        border-bottom: 3px solid #001f4e;
    }

    /* The official calendar prints as a navy masthead; a filtered view stays plainly unofficial. */
    .cc-print-official .cc-print-head {
        align-items: center;
        padding: .6rem .8rem;
        background: #001f4e;
        border-bottom: 4px solid #1955a6;
    }

    .cc-print-official .cc-print-brand,
    .cc-print-official .cc-print-term {
        color: #fff;
    }

    .cc-print-official .cc-print-kicker {
        color: #b9c6dd;
    }

    .cc-print-filtered .cc-print-head {
        border-bottom: 2px dashed #5d677e;
    }

    .cc-print-filtered .cc-print-kicker {
        color: #8a4b00;
    }

    .cc-print-brand {
        font-size: 1.5rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .01em;
        line-height: 1.1;
        color: #001f4e;
    }

    .cc-print-kicker {
        display: block;
        font-size: .62rem;
        font-weight: 700;
        letter-spacing: .18em;
        color: #5d677e;
    }

    .cc-print-term {
        font-size: 1.05rem;
        font-weight: 700;
        color: #1955a6;
    }

    .cc-print-table {
        width: 100%;
        border-collapse: collapse;
        font-size: .82rem;
        margin-top: .6rem;
    }

    .cc-print-month th {
        padding: .7rem .5rem .2rem;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: #fff;
        background: #1955a6;
    }

    .cc-print-row td {
        padding: .28rem .5rem;
        border-bottom: 1px solid #d8dee8;
        vertical-align: top;
    }

    .cc-print-when {
        width: 9.5rem;
        white-space: nowrap;
        font-weight: 700;
        color: #001f4e;
    }

    .cc-print-time {
        display: block;
        font-size: .72rem;
        color: #5d677e;
    }

    .cc-print-empty {
        margin-top: 1.5rem;
        font-style: italic;
        color: #5d677e;
    }

    .cc-print-foot {
        display: flex;
        justify-content: space-between;
        margin-top: .9rem;
        padding-top: .35rem;
        border-top: 1px solid #d8dee8;
        font-size: .68rem;
        color: #5d677e;
    }

    .cc-print-month,
    .cc-print-row {
        break-inside: avoid;
    }

    /* A month heading must not be the last thing on a page. */
    .cc-print-month {
        break-after: avoid;
    }
}

/* ---------- Hero (sign-in / landing) ---------------------------------- */

.cc-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(115deg, var(--cc-navy-deep) 0%, var(--cc-royal) 100%);
    color: #fff;
    border-radius: 0;
    padding: 4rem 2rem;
    text-align: center;
    box-shadow: var(--cc-shadow);
}

.cc-hero::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -140px;
    width: 340px;
    height: 340px;
    background: rgba(255, 255, 255, .06);
    border-radius: 50%;
}

.cc-hero h1 {
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .01em;
}

.cc-hero .lead { color: rgba(255, 255, 255, .85); }

.cc-hero .btn-primary {
    background-color: #fff;
    border-color: #fff;
    color: var(--cc-navy-deep);
}

.cc-hero .btn-primary:hover {
    background-color: var(--cc-royal-light);
    border-color: var(--cc-royal-light);
    color: var(--cc-navy-deep);
}

/* ---------- Modal ------------------------------------------------------ */

.modal-content {
    border: none;
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(100deg, var(--cc-navy-deep), var(--cc-royal));
    color: #fff;
    border-bottom: none;
}

.modal-header .modal-title { color: #fff; }
.modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* Nested modals: Bootstrap reuses one z-index for every modal, so a modal opened from another
   one is raised explicitly (with its backdrop) instead of rendering behind. */
.modal.cc-modal-stacked {
    z-index: 1075;
}

.modal-backdrop.cc-modal-backdrop-stacked {
    z-index: 1070;
}

/* ---------- Footer ----------------------------------------------------- */

.footer {
    flex-shrink: 0;
    width: 100%;
    margin-top: 1rem;
    background-color: var(--cc-navy-deep);
    color: rgba(255, 255, 255, .8);
    padding: .55rem 0;
    font-size: .8rem;
}

.footer a { color: #fff; }

.cc-footer-motto {
    font-style: italic;
    font-size: .78rem;
    color: rgba(255, 255, 255, .7);
}

@media (max-width: 767.98px) {
    .footer .container-fluid {
        justify-content: center;
        text-align: center;
    }
}

/* =========================================================================
   FullCalendar theming
   ========================================================================= */

#calendar {
    max-width: 1280px;
    margin: 0 auto;
}

/* The header toolbar is prev/next/today + title + four view buttons. In a narrow embed that can
   exceed the available width, so let the chunks wrap onto a second row instead of overflowing. */
.fc .fc-toolbar.fc-header-toolbar {
    flex-wrap: wrap;
    row-gap: .4rem;
}

/* Anchors the month view's week-stepper buttons in a gutter beside the grid. */
.cc-calendar-wrap {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding-inline: 2rem;
}

.cc-week-nav {
    position: absolute;
    right: .25rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    z-index: 3;
}

.cc-week-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    font-size: .8rem;
    line-height: 1;
    color: var(--cc-royal);
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 0;
    box-shadow: var(--cc-shadow-sm);
    transition: background-color .15s ease, color .15s ease;
}

.cc-week-nav-btn:hover:not(:disabled) {
    color: #fff;
    background: var(--cc-royal);
    border-color: var(--cc-royal);
}

.cc-week-nav-btn:disabled {
    opacity: .35;
    cursor: default;
}

.cc-calendar-shell {
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow-sm);
    padding: 1.25rem;
}

/* Small, unobtrusive indicator shown while the Outlook overlay loads in the background. */
.cc-outlook-syncing {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .8rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--cc-royal-dark, #12417f);
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 0;
    box-shadow: var(--cc-shadow-sm);
}

.cc-outlook-syncing .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: .16em;
    color: var(--cc-royal, #1955a6);
}

.fc {
    --fc-border-color: var(--cc-border);
    --fc-today-bg-color: rgba(25, 85, 166, .07);
    --fc-page-bg-color: var(--cc-surface);
    --fc-neutral-bg-color: var(--cc-gray-200);
    --fc-list-event-hover-bg-color: var(--cc-royal-light);
}

.fc .fc-toolbar-title {
    font-size: 1.4rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--cc-navy);
}

.fc .fc-button-primary {
    background-color: var(--cc-royal);
    border-color: var(--cc-royal);
    font-weight: 700;
    text-transform: capitalize;
    box-shadow: none;
    border-radius: var(--cc-radius-sm) !important;
    padding: .4rem .8rem;
}

.fc .fc-button-primary:not(:disabled):hover {
    background-color: var(--cc-royal-dark);
    border-color: var(--cc-royal-dark);
}

.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--cc-navy-deep);
    border-color: var(--cc-navy-deep);
}

.fc .fc-button-primary:focus,
.fc .fc-button-primary:not(:disabled):active:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active:focus {
    box-shadow: 0 0 0 .2rem rgba(25, 85, 166, .3);
}

.fc .fc-button-group > .fc-button {
    margin: 0 1px;
}

.fc .fc-col-header-cell-cushion {
    color: var(--cc-navy);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .72rem;
    padding: .55rem .25rem;
}

.fc .fc-daygrid-day-number {
    color: var(--cc-gray);
    font-weight: 700;
    padding: .35rem .5rem;
}

.fc .fc-day-today .fc-daygrid-day-number {
    color: var(--cc-royal);
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: var(--fc-today-bg-color);
}

.fc-daygrid-event,
.fc-timegrid-event,
.fc .fc-list-event {
    border-radius: 0;
    font-weight: 600;
    border: none;
}

.fc-daygrid-dot-event:hover,
.fc-daygrid-event:hover {
    filter: brightness(.95);
}

.fc .fc-list-day-cushion {
    background-color: var(--cc-royal-light);
}

.fc .fc-list-day-text,
.fc .fc-list-day-side-text {
    color: var(--cc-navy);
    font-weight: 800;
}

/* The sticky day header must stay above the rows scrolling under it; the category icon is
   semi-transparent, which makes it a stacking context that would otherwise paint on top. */
.fc .fc-list-day > * {
    z-index: 2;
}

/* The category icon already carries the colour, so drop FullCalendar's dot beside it. */
.fc .fc-list-event-graphic:has(.cc-ev-icon) .fc-list-event-dot {
    display: none;
}

/* List view: a category with too many events on one day collapses into a single expandable row. */
.fc .fc-list-event.cc-list-group .fc-list-event-title {
    font-style: italic;
}

.cc-list-group-more {
    display: inline-block;
    margin-left: .5rem;
    padding: .05rem .5rem;
    border-radius: 0;
    background-color: var(--cc-royal-light);
    color: var(--cc-royal);
    font-size: .75rem;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* "Show all events" action inside a list-view day header. The cushion is laid out as a row so the
   action sits between the date and the weekday instead of overlapping the floated side text. */
.fc .fc-list-day-cushion {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.fc .fc-list-day-cushion .fc-list-day-text {
    margin-right: auto;
}

.fc .fc-list-day-cushion .fc-list-day-side-text {
    float: none;
    order: 3;
}

.cc-list-day-showall {
    order: 2;
    border: none;
    background: none;
    padding: 0;
    color: var(--cc-royal);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.cc-list-day-showall:hover {
    color: var(--cc-navy);
}

/* Show a pointer cursor over calendar events to indicate they are clickable. */
.fc-event,
.fc-event * {
    cursor: pointer;
}

/* An event someone called off: struck through + faded. */
.fc-event.cc-cancelled {
    opacity: .6;
}

.fc-event.cc-cancelled .fc-event-title,
.fc-event.cc-cancelled .fc-event-time {
    text-decoration: line-through;
}

/* A class meeting a holiday or closure stops. Struck through like a cancelled event, but the "No
   class" badge stays legible so it reads as "not scheduled" rather than "quietly removed". */
.fc-event.cc-not-meeting {
    opacity: .75;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .35) 0 6px, transparent 6px 12px);
    border-style: dashed;
}

.fc-event.cc-not-meeting .fc-event-title,
.fc-event.cc-not-meeting .fc-list-event-title,
.fc-event.cc-not-meeting .fc-event-time {
    text-decoration: line-through;
}

.fc-event.cc-not-meeting .cc-no-class {
    display: inline-block;
    margin-right: .35rem;
    padding: 0 .3rem;
    border-radius: 0;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .7em;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: baseline;
}

.fc-event.cc-not-meeting .cc-ev-icon {
    text-decoration: none;
}

/*
 * NOTE: month view hides the raw per-day event chips (see `.cc-month-view .fc-daygrid-day-events`)
 * and uses category bars instead, so we intentionally do NOT constrain `.fc-daygrid-day-events`
 * globally. Constraining it broke the week/day all-day row: `overflow-y:auto` forces `overflow-x`
 * to `auto`, which clipped multi-day all-day events to the first day and added a horizontal
 * scrollbar. The week/day all-day area is styled below via `.cc-week-view` instead.
 */

/* Week/Day (time-grid) all-day area: give it a taller cap and scroll it VERTICALLY when a day is
   busy, but never horizontally — multi-day events span the full week width and must not trigger a
   horizontal scrollbar. `:has()` targets only the all-day scroller (the one wrapping the daygrid),
   not the time-slot scroller. */
.cc-week-view .fc-scroller:has(> .fc-daygrid-body) {
    max-height: 10rem;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(25, 85, 166, .4) transparent;
}

.cc-week-view .fc-scroller:has(> .fc-daygrid-body)::-webkit-scrollbar {
    width: 7px;
}

.cc-week-view .fc-scroller:has(> .fc-daygrid-body)::-webkit-scrollbar-thumb {
    background: rgba(25, 85, 166, .4);
    border-radius: 0;
}

/* The day-name header row reserves the body scroller's gutter so the columns stay aligned, and the
   month body now scrolls via the week-stepper buttons rather than a scrollbar. Both keep their
   reserved width (alignment) but paint no scrollbar chrome. */
.fc .fc-scrollgrid-section-header .fc-scroller,
.cc-month-view .fc-scroller {
    scrollbar-color: transparent transparent;
}

.fc .fc-scrollgrid-section-header .fc-scroller::-webkit-scrollbar,
.fc .fc-scrollgrid-section-header .fc-scroller::-webkit-scrollbar-track,
.fc .fc-scrollgrid-section-header .fc-scroller::-webkit-scrollbar-thumb,
.cc-month-view .fc-scroller::-webkit-scrollbar,
.cc-month-view .fc-scroller::-webkit-scrollbar-track,
.cc-month-view .fc-scroller::-webkit-scrollbar-thumb {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Comprehensive view: a full-screen week that never compresses content. The modal body owns both
   scrollbars, the time slots are tall enough that stacked events stay legible, and the calendar's
   min-width is raised at runtime to fit the busiest day's side-by-side events (this is the floor). */
.cc-comprehensive-modal .modal-body {
    overflow: auto;
    padding: 1rem;
    cursor: grab;
}

.cc-comprehensive-modal.cc-comp-panning .modal-body {
    cursor: grabbing;
    user-select: none;
}

.cc-comprehensive-calendar {
    min-width: 1400px;
}

.cc-comprehensive-controls {
    display: flex;
    gap: .5rem;
}

/* The modal header is a navy gradient in both themes, so the stock grey outline reads as
   unstyled there — these sit on the gradient as white outlines and invert when active. */
.cc-comprehensive-controls .btn {
    color: #fff;
    background-color: transparent;
    border-color: rgba(255, 255, 255, .55);
}

.cc-comprehensive-controls .btn:hover,
.cc-comprehensive-controls .btn:focus-visible,
.cc-comprehensive-controls .btn.active {
    color: var(--cc-navy-deep);
    background-color: #fff;
    border-color: #fff;
}

.cc-comprehensive-controls .btn:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .35);
}

.cc-comprehensive-calendar .fc-timegrid-slot {
    height: var(--cc-comp-slot-h, 2.5rem);
}

.cc-comprehensive-calendar .fc-timegrid-event {
    font-size: var(--cc-comp-font, .75rem);
}

.cc-comprehensive-calendar .fc-timegrid-event .fc-event-main {
    padding: 2px 4px;
}

/* The columns are sized to fit the heading, so let it wrap instead of truncating. */
.cc-comprehensive-calendar .fc-timegrid-event .fc-event-title,
.cc-comprehensive-calendar .fc-timegrid-event .fc-event-time {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
}

/* Fit to screen: the calendar is scaled to the modal instead of overflowing it, so once the type
   hits its floor the remaining text has to clip rather than push the event box open. */
.cc-comprehensive-modal.cc-comp-fit .modal-body {
    overflow-x: hidden;
}

.cc-comprehensive-modal.cc-comp-fit .cc-comprehensive-calendar .fc-timegrid-event .fc-event-main,
.cc-comprehensive-modal.cc-comp-fit .cc-comprehensive-calendar .fc-timegrid-event .fc-event-title,
.cc-comprehensive-modal.cc-comp-fit .cc-comprehensive-calendar .fc-timegrid-event .fc-event-time {
    overflow: hidden;
}

.cc-comprehensive-modal.cc-comp-fit .cc-comprehensive-calendar .fc-timegrid-event .fc-event-main {
    padding: 0 1px;
}

/* height:auto already renders every row; keep the inner scrollers from clipping the all-day area. */
.cc-comprehensive-calendar .fc-scroller {
    overflow: visible !important;
}

/* ---------- Utilities -------------------------------------------------- */

.cc-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 0;
    flex: 0 0 auto;
}

/* Category icons in the legend/filter and on events. */
.cc-cat-icon {
    width: 1.1rem;
    text-align: center;
    font-size: 1rem;
    flex: 0 0 auto;
}

.cc-ev-icon {
    font-size: .85em;
    opacity: .95;
}

/* Per-category count badges. The day number stays pinned to the top-right corner
   while the badges flow along the top-left, wrapping below only when needed. */
.fc .fc-daygrid-day-frame {
    position: relative;
}

/* Desktop month view: keep every day cell a uniform square regardless of how many
   category bars it has. Days with more bars than fit simply scroll within the cell.
   The cap is set from JS and only bites when a square cell would be too tall to keep
   four weeks on screen. width:100% is load-bearing: without it the aspect ratio drives
   the WIDTH off the capped height and the cell collapses to a narrow column. */
.cc-month-view .fc-daygrid-day-frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: var(--cc-month-row-max, none);
}

/* "Show complete month": without the square cells the weeks divide whatever height the view was
   given, so the whole month fits and the internal scroller disappears. Cells that still have room
   keep the labelled category bars; only once they get too short does JS add -compact, swapping in
   the icon + count badges used on phones. */
.cc-month-view.cc-month-fit .fc-daygrid-day-frame {
    aspect-ratio: auto;
    min-height: 0;
}

.cc-month-view.cc-month-fit-compact .cc-day-bars {
    display: none;
}

.cc-month-view.cc-month-fit-compact .cc-day-badges {
    display: flex;
    align-content: flex-start;
    min-height: 0;
    overflow: hidden;
}

.cc-month-view.cc-month-fit-compact .cc-day-badge {
    font-size: .62rem;
    padding: .12rem .34rem;
}

/* Put the date number back in normal flow so the badges sit below it rather than under it. */
.cc-month-view.cc-month-fit-compact .fc-daygrid-day-top {
    padding-right: 0;
    min-height: 0;
}

.cc-month-view.cc-month-fit-compact .fc-daygrid-day-top .fc-daygrid-day-number {
    position: static;
    display: inline-block;
    font-size: .78rem;
    padding: 1px 4px;
}

.fc .fc-daygrid-day-top {
    display: block;
    min-height: 1.5rem;
    padding-right: 1.6rem;
}

.fc .fc-daygrid-day-top .fc-daygrid-day-number {
    position: absolute;
    top: -2px;
    right: 0;
    margin: 0;
    padding: 2px 5px;
}

/* Days outside the active month: FullCalendar fades the whole day header (which also fades
   our category badges/bars). Keep only the date number muted so the badges render normally. */
.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-top {
    opacity: 1;
}

.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
    opacity: .3;
}

.cc-day-badges {
    display: none; /* badges are mobile-only; desktop uses the category bars below */
    flex-wrap: wrap;
    gap: 3px;
    padding: 4px 4px 0;
    cursor: pointer;
}

.cc-day-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .66rem;
    font-weight: 700;
    color: #fff;
    padding: .14rem .42rem;
    line-height: 1;
    cursor: pointer;
}

.cc-day-badge i {
    font-size: .85em;
    line-height: 1;
}

/* A day with more category badges than its cell can show drops the overflow and counts it here;
   tapping the chip opens the whole day. */
.cc-day-more {
    background: var(--cc-royal-light);
    color: var(--cc-royal);
}

/* Desktop month view: one full-width, colored, clickable bar per category present that day
   (replacing the raw event chips). Tap a bar to open that day filtered to the category. */
.cc-month-view .fc-daygrid-day-events,
.cc-month-view .fc-daygrid-day-bottom {
    display: none;
}

.cc-day-bars {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 2px 3px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(25, 85, 166, .4) transparent;
}

.cc-day-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.15;
    padding: .18rem .3rem;
    border-radius: 0;
    cursor: pointer;
}

.cc-day-bar i {
    flex: 0 0 auto;
    font-size: .9em;
}

.cc-day-bar-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-day-bar-count {
    flex: 0 0 auto;
    font-weight: 800;
}

/* "My Outlook Calendar" is forced to the bottom of a day's category bars (out of A–Z order),
   set off by a thin divider line above it to signal it is separate. */
.cc-day-bar.cc-day-outlook {
    position: relative;
    margin-top: 6px;
}

.cc-day-bar.cc-day-outlook::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 2px;
    right: 2px;
    height: 1px;
    background: var(--cc-border);
}

/* Mobile day focus chooser: the desktop category bar blown up to a tap target, with the full
   category name a month cell has no room for. Kept to the same density as a mobile list row. */
#dayFocusBody {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    /* The gap between the cards is "the whitespace of the day" and opens it in full, so leave
       enough of it to be hittable. */
    padding-bottom: 1rem;
}

.cc-day-focus-card {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    border: 0;
    border-radius: 0;
    padding: .35rem .55rem;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    color: #fff;
    background: var(--cc-focus-color, var(--cc-navy));
    cursor: pointer;
}

.cc-day-focus-card i {
    flex: 0 0 auto;
    font-size: 1em;
}

.cc-day-focus-label {
    flex: 1 1 auto;
}

.cc-day-focus-count {
    flex: 0 0 auto;
    font-weight: 800;
    font-size: .78rem;
    background: rgba(255, 255, 255, .22);
    border-radius: 0;
    padding: .05rem .4rem;
}

.cc-day-badge.cc-day-outlook {
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid var(--cc-border);
}

/* ---- Event detail: location hierarchy + resource tags ------------------- */

.cc-loc-section {
    background: var(--cc-royal-light);
    border: 1px solid #cfe0f5;
    border-radius: var(--cc-radius-sm);
    padding: .6rem .8rem;
}

.cc-loc-heading {
    font-weight: 800;
    color: var(--cc-royal);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .35rem;
}

.cc-loc-node {
    font-weight: 700;
    line-height: 1.35;
}

.cc-loc-site { color: var(--cc-navy); }
.cc-loc-building { color: var(--cc-ink); padding-left: 1.15rem; font-weight: 600; }
.cc-loc-room { color: var(--cc-gray); padding-left: 2.3rem; font-weight: 600; }

.cc-loc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: .15rem 0 .4rem;
}

.cc-indent-1 { padding-left: 1.15rem; }
.cc-indent-2 { padding-left: 2.3rem; }

.cc-loc-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    color: var(--cc-royal);
    border-radius: 0;
    font-size: .92rem;
    cursor: help;
}

.cc-loc-tag:focus {
    outline: 2px solid var(--cc-royal);
    outline-offset: 1px;
}

.cc-dl dt {
    color: var(--cc-navy);
    font-weight: 800;
}

/* ---- Sortable tables (location management) ----------------------------- */
th.cc-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.cc-sort:hover { color: var(--cc-royal); }

.cc-sort-icon {
    font-size: .75em;
    opacity: .5;
    margin-left: .15rem;
}

th[data-sort-dir] .cc-sort-icon { opacity: 1; color: var(--cc-royal); }

/* ---- Icon picker (resource tag editor) --------------------------------- */
.cc-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: .4rem;
    max-height: 55vh;
    overflow: auto;
    padding: .15rem;
}

.cc-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .5rem .25rem;
    border: 1px solid var(--cc-border);
    background: var(--cc-surface);
    border-radius: 0;
    cursor: pointer;
    transition: border-color .1s ease, background-color .1s ease;
}

.cc-icon-btn:hover,
.cc-icon-btn:focus {
    border-color: var(--cc-royal);
    background: var(--cc-royal-light);
    outline: none;
}

.cc-icon-btn i {
    font-size: 1.4rem;
    color: var(--cc-navy);
}

.cc-icon-btn span {
    font-size: .6rem;
    color: var(--cc-gray);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================================
   Scheduling assistant (Outlook-style room availability)
   ========================================================================= */

.cc-assist-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 31, 78, .55);
    padding: 1rem;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
}

.cc-assist-overlay.show { display: flex; }

.cc-assist-dialog {
    background: var(--cc-surface);
    width: 100%;
    max-width: 1120px;
    margin: 2rem auto;
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.cc-assist-header {
    background: linear-gradient(100deg, var(--cc-navy-deep), var(--cc-royal));
    color: #fff;
    padding: .85rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cc-assist-body {
    padding: 1.15rem;
    overflow-y: auto;
}

.cc-assist-days .btn { padding: .15rem .5rem; }

/* Redesigned criteria panel — a clean "Where / When" layout */
.cc-assist-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    padding: 1rem 1.1rem;
    background: var(--cc-royal-light);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
}
.cc-assist-group { min-width: 0; }
.cc-assist-grouplabel {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cc-royal);
    margin-bottom: .5rem;
}
.cc-assist-fields { display: flex; flex-wrap: wrap; gap: .6rem; }
.cc-assist-field { flex: 1 1 130px; min-width: 0; }
.cc-assist-field--wide { flex: 1 1 190px; }
.cc-assist-field > label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: var(--cc-gray);
    margin-bottom: .15rem;
}

.cc-assist-more { margin-top: .75rem; }
.cc-assist-more [data-assist-toggle-more] { font-weight: 600; }
.cc-assist-more [data-assist-toggle-more] .bi-chevron-down { transition: transform .15s ease; }
.cc-assist-more [data-assist-toggle-more].is-open .bi-chevron-down { transform: rotate(180deg); }
.cc-assist-more-body {
    margin-top: .6rem;
    padding: .85rem 1rem;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
}

.cc-assist-actionbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--cc-border);
}

@media (max-width: 767.98px) {
    .cc-assist-controls { grid-template-columns: 1fr; gap: .85rem; }
}

.cc-assist-legend { color: var(--cc-gray); }
.cc-assist-key {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    border-radius: 0;
    vertical-align: -1px;
    border: 1px solid rgba(0, 0, 0, .15);
}
.cc-key-free { background: #d8f0e0; }
.cc-key-busy { background: #f6c6cc; }
.cc-key-pick { background: rgba(25, 85, 166, .35); border-color: var(--cc-royal); }

/* Timeline: a frozen-column, horizontally-scrollable 24-hour grid */
.cc-assist-scrolltop {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--cc-border);
    border-bottom: none;
    border-radius: var(--cc-radius-sm) var(--cc-radius-sm) 0 0;
    background: #f1f4f9;
}
.cc-assist-scrolltop-inner { height: 8px; }

.cc-assist-scroller {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 56vh;
    border: 1px solid var(--cc-border);
    border-radius: 0 0 var(--cc-radius-sm) var(--cc-radius-sm);
    background: var(--cc-surface);
}

.cc-assist-row {
    display: flex;
    align-items: stretch;
    width: max-content;
    min-width: 100%;
}

.cc-assist-headrow {
    position: sticky;
    top: 0;
    z-index: 4;
}

.cc-assist-roomlabel {
    position: sticky;
    left: 0;
    z-index: 2;
    flex: 0 0 var(--cc-label-w, 220px);
    width: var(--cc-label-w, 220px);
    min-width: 0;
    background: var(--cc-surface);
    border-right: 1px solid var(--cc-border);
    border-bottom: 1px solid var(--cc-border);
    padding: .3rem .5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .05rem;
}

/* Drag grip on the "Rooms" header to widen/narrow the whole column. */
.cc-assist-colresize {
    position: absolute;
    top: 0;
    right: -4px;
    width: 9px;
    height: 100%;
    cursor: col-resize;
    z-index: 7;
    touch-action: none;
}
.cc-assist-colresize::after {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: var(--cc-border);
    border-radius: 0;
}
.cc-assist-colresize:hover::after { background: var(--cc-royal); }
.cc-col-resizing, .cc-col-resizing * { cursor: col-resize !important; user-select: none; -webkit-user-select: none; }

.cc-assist-corner {
    z-index: 6;
    background: #f1f4f9;
    justify-content: center;
}

.cc-assist-sub { font-size: .72rem; }
.cc-assist-sub .bi { font-size: .8em; }

.cc-assist-rowactions {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .1rem;
}

.cc-assist-track {
    position: relative;
    z-index: 1;                                /* own stacking context so the block/handles stay behind the sticky Rooms column */
    flex: 0 0 auto;
    min-height: 48px;
    border-bottom: 1px solid var(--cc-border);
    cursor: crosshair;
    background-color: #d8f0e0;                 /* free time reads green */
    /* Solid hour lines on top, lighter dashed half-hour lines beneath. */
    background-image:
        repeating-linear-gradient(90deg, rgba(0, 31, 78, .22) 0 1px, transparent 1px calc(100% / 24)),
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='6'%3E%3Crect%20width='1'%20height='3'%20fill='%23001f4e'%20fill-opacity='0.14'/%3E%3C/svg%3E");
    background-size: auto, 28px 6px;
    background-repeat: repeat, repeat;
    background-position: 0 0, 0 0;
}

/* Zebra banding so each room's row is easy to follow across the 24h timeline. */
.cc-assist-row:nth-of-type(even) .cc-assist-track { background-color: #cfe9d7; }
.cc-assist-row:nth-of-type(even) .cc-assist-roomlabel { background: #f6f8fc; }
.cc-assist-row:not(.cc-assist-headrow):hover .cc-assist-roomlabel { background: #e7eefb; }
.cc-assist-row:not(.cc-assist-headrow):hover .cc-assist-track { box-shadow: inset 0 0 0 9999px rgba(25, 85, 166, .06); }

.cc-assist-headtrack {
    min-height: 1.75rem;
    background-color: #f1f4f9;
    background-image:
        repeating-linear-gradient(90deg, rgba(0, 31, 78, .22) 0 1px, transparent 1px calc(100% / 24)),
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='6'%3E%3Crect%20width='1'%20height='3'%20fill='%23001f4e'%20fill-opacity='0.14'/%3E%3C/svg%3E");
    background-size: auto, 28px 6px;
    background-repeat: repeat, repeat;
    background-position: 0 0, 0 0;
    cursor: default;
}

.cc-assist-tick {
    position: absolute;
    top: 4px;
    padding-left: 3px;
    font-size: .68rem;
    color: var(--cc-gray);
    white-space: nowrap;
}

.cc-assist-busy {
    position: absolute;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(45deg, #f6c6cc, #f6c6cc 6px, #f1b4bb 6px, #f1b4bb 12px);
    border-left: 1px solid #dc3545;
    border-right: 1px solid #dc3545;
}

.cc-assist-proposed {
    position: absolute;
    top: 2px;
    bottom: 2px;
    background: rgba(25, 85, 166, .28);
    border: 2px solid var(--cc-royal);
    border-radius: 0;
    pointer-events: auto;
    cursor: grab;
}
.cc-assist-proposed.is-conflict {
    background: rgba(220, 53, 69, .22);
    border-color: #dc3545;
}

/* Drag handles on the block edges for resizing. */
.cc-assist-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12px;
    cursor: ew-resize;
    z-index: 3;
}
.cc-handle-l { left: -6px; }
.cc-handle-r { right: -6px; }
.cc-assist-handle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 60%;
    background: var(--cc-royal);
    border-radius: 0;
    opacity: .9;
}
.cc-assist-proposed.is-conflict .cc-assist-handle::before { background: #dc3545; }

.cc-dragging .cc-assist-proposed { cursor: grabbing; }
.cc-dragging, .cc-dragging * { user-select: none; -webkit-user-select: none; }

@media (max-width: 575.98px) {
    .cc-assist-roomlabel { flex-basis: 150px; width: 150px; }
    .cc-assist-dialog { margin: .5rem auto; }
}

/* Rendered rich-text descriptions (WYSIWYG output). Keep spacing tidy inside modals/cards. */
.cc-rte p {
    margin-bottom: .5rem;
}

.cc-rte p:last-child {
    margin-bottom: 0;
}

.cc-rte ul,
.cc-rte ol {
    margin-bottom: .5rem;
    padding-left: 1.25rem;
}

/* Constrain the editor height inside the form modal so the toolbar stays reachable. */
.trumbowyg-box,
.trumbowyg-editor {
    min-height: 140px;
}

.cc-dl dd { color: var(--cc-ink); }

/* =========================================================================
   Mobile / small screens
   ========================================================================= */

@media (max-width: 575.98px) {
    .cc-page-title {
        font-size: 1.45rem;
    }

    .cc-hero {
        padding: 2.5rem 1.25rem;
    }

    /* Page toolbar: keep the title and the hamburger toggle together. */
    .cc-toolbar {
        gap: .6rem;
    }

    /* Give the calendar more usable width. */
    .cc-calendar-shell {
        padding: .5rem;
    }

    /* Phones scroll the month grid by touch, so the week stepper and its gutter are dead weight. */
    .cc-calendar-wrap {
        padding-inline: 0;
    }

    .cc-week-nav {
        display: none;
    }

    /* Stack the FullCalendar header into centered rows so nothing overflows. */
    .fc .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: .4rem;
        margin-bottom: .6rem;
    }

    .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }

    .fc .fc-toolbar-title {
        font-size: 1.15rem;
        text-align: center;
    }

    .fc .fc-button {
        padding: .35rem .6rem;
        font-size: .85rem;
    }

    /* Month view on mobile: show only the day number + category badges. The category
       bars (and the raw events) are hidden to keep the grid compact — tap a day (or a
       badge) to open the day view and see the events. */
    .cc-month-view .fc-daygrid-day-events,
    .cc-month-view .fc-daygrid-day-bottom,
    .cc-day-bars {
        display: none;
    }

    .cc-day-badges {
        display: flex;
        align-content: flex-start;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    /* Render the date number in normal flow so the badges sit below it instead of
       overlapping it. */
    .cc-month-view .fc-daygrid-day-top {
        min-height: 0;
        padding-right: 0;
    }

    .cc-month-view .fc-daygrid-day-top .fc-daygrid-day-number {
        position: static;
        display: inline-block;
    }

    /* The cell is capped by --cc-month-row-max; without clipping, a day with more badges than
       fit paints straight over the day below it. */
    .cc-month-view .fc-daygrid-day-frame {
        aspect-ratio: auto;
        min-height: 3.1rem;
        overflow: hidden;
    }

    .cc-day-badge {
        font-size: .62rem;
        padding: .12rem .34rem;
    }

    .fc .fc-col-header-cell-cushion {
        font-size: .62rem;
        padding: .4rem .1rem;
    }

    .fc .fc-daygrid-day-number {
        font-size: .8rem;
        padding: 1px 4px;
    }
}

/* =========================================================================
   Dark mode
   Activated by data-bs-theme="dark" on <html> (set from the user's saved theme
   preference). Re-points the brand variables at a dark palette; the branded
   navy/royal gradients keep --cc-navy-deep so they look the same in both themes.
   ========================================================================= */

[data-bs-theme="dark"] {
    --cc-royal: #4a8be0;
    --cc-royal-dark: #6ea6ea;
    --cc-royal-light: #17263c;
    --cc-navy: #d8e3f5; /* heading ink on dark surfaces */
    --cc-navy-800: #16233a;
    --cc-gray: #a4aec2;
    --cc-gray-200: #222b3b;
    --cc-surface: #161d29;
    --cc-page: #0f141d;
    --cc-border: #2c3548;
    --cc-ink: #e3e9f3;
    --cc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .35);
    --cc-shadow: 0 6px 24px rgba(0, 0, 0, .55);

    --bs-primary: #4a8be0;
    --bs-primary-rgb: 74, 139, 224;
    --bs-link-color: #7fb2ee;
    --bs-link-hover-color: #a6cbf5;
    --bs-body-color: #e3e9f3;
    --bs-body-color-rgb: 227, 233, 243;
    --bs-body-bg: #161d29;
    --bs-body-bg-rgb: 22, 29, 41;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: rgba(227, 233, 243, .72);
    --bs-secondary-bg: #1e2635;
    --bs-tertiary-bg: #1a2231;
    --bs-border-color: #2c3548;
}

/* Brand blue is lightened on dark, so text sitting on it needs to be dark. */
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus,
[data-bs-theme="dark"] .btn-success,
[data-bs-theme="dark"] .btn-success:hover,
[data-bs-theme="dark"] .btn-success:focus,
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-success:hover,
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-primary,
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-success,
[data-bs-theme="dark"] .cc-ath-toggle.is-open,
[data-bs-theme="dark"] .cc-ath-seg-btn.is-active {
    color: #0b1220;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--cc-ink);
    border-color: var(--cc-border);
}

/* Bootstrap keeps .bg-light literally light in dark mode; re-tone the chips that use it. */
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .text-bg-light {
    background-color: var(--cc-gray-200) !important;
    color: var(--cc-ink) !important;
}

[data-bs-theme="dark"] .bg-light.text-dark,
[data-bs-theme="dark"] .text-bg-light.text-dark {
    color: var(--cc-ink) !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    border-color: var(--cc-border);
    color: var(--cc-ink);
}

[data-bs-theme="dark"] .form-control::placeholder { color: var(--cc-gray); }

[data-bs-theme="dark"] .cc-submit-intro {
    border-color: var(--cc-border);
}

[data-bs-theme="dark"] .cc-cat-head,
[data-bs-theme="dark"] .cc-loc-checklist {
    border-color: var(--cc-border);
}

[data-bs-theme="dark"] .cc-ath-panel {
    background: var(--cc-gray-200);
}

/* FullCalendar: lighten the grid chrome and put dark text on the brand buttons. */
[data-bs-theme="dark"] .fc {
    --fc-button-text-color: #0b1220;
    --fc-today-bg-color: rgba(74, 139, 224, .16);
    --fc-neutral-bg-color: var(--cc-gray-200);
    --fc-non-business-color: rgba(255, 255, 255, .04);
    --fc-highlight-color: rgba(74, 139, 224, .2);
}

[data-bs-theme="dark"] .fc .fc-button-primary:not(:disabled):active,
[data-bs-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--cc-royal-dark);
    border-color: var(--cc-royal-dark);
}

[data-bs-theme="dark"] .fc-theme-standard .fc-list-day-cushion {
    background-color: var(--cc-royal-light);
}

/* Scheduling assistant timeline: swap the light greys/greens for dark equivalents. */
[data-bs-theme="dark"] .cc-assist-scrolltop,
[data-bs-theme="dark"] .cc-assist-corner,
[data-bs-theme="dark"] .cc-assist-headtrack {
    background-color: #1c2434;
}

[data-bs-theme="dark"] .cc-assist-row:nth-of-type(even) .cc-assist-track { background-color: #1f3a2a; }
[data-bs-theme="dark"] .cc-assist-row:nth-of-type(even) .cc-assist-roomlabel { background: #1b2331; }
[data-bs-theme="dark"] .cc-assist-row:not(.cc-assist-headrow):hover .cc-assist-roomlabel { background: #22304a; }
[data-bs-theme="dark"] .cc-key-busy { background: #7a3038; }

/* Trumbowyg (rich text editor) ships light-only styling. */
[data-bs-theme="dark"] .trumbowyg-box,
[data-bs-theme="dark"] .trumbowyg-editor {
    background: var(--bs-body-bg);
    color: var(--cc-ink);
    border-color: var(--cc-border);
}

[data-bs-theme="dark"] .trumbowyg-button-pane {
    background: var(--cc-gray-200);
    border-bottom-color: var(--cc-border);
}

[data-bs-theme="dark"] .trumbowyg-button-pane::after { background: var(--cc-border); }
[data-bs-theme="dark"] .trumbowyg-button-pane .trumbowyg-button-group::after { background: var(--cc-border); }
[data-bs-theme="dark"] .trumbowyg-button-pane button svg { fill: var(--cc-ink); }
[data-bs-theme="dark"] .trumbowyg-dropdown { background: var(--cc-surface); border-color: var(--cc-border); }

/* Theme picker in the navbar. */
.cc-theme-menu .dropdown-item.is-active {
    font-weight: 700;
    color: var(--cc-royal);
}

.cc-theme-menu .dropdown-item .bi-check2 { visibility: hidden; }
.cc-theme-menu .dropdown-item.is-active .bi-check2 { visibility: visible; }