/**
 * WebCalendar Frontend Styles
 */

/* CSS Isolation & Reset */
.webcal-frontend-container,
.webcal-frontend-container *,
.webcal-frontend-container *::before,
.webcal-frontend-container *::after,
.webcal-upcoming-events-root,
.webcal-upcoming-events-root *,
.webcal-upcoming-events-root *::before,
.webcal-upcoming-events-root *::after {
    box-sizing: border-box;
}

.webcal-frontend-container,
.webcal-upcoming-events-root {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #1d2327;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 20px 0;
}

/* Reset headings and lists that themes often style aggressively */
.webcal-frontend-container h2,
.webcal-frontend-container h3,
.webcal-upcoming-events-root h2,
.webcal-upcoming-events-root h3 {
    margin: 0;
    padding: 0;
    border: none;
    text-transform: none;
    letter-spacing: normal;
}

.webcal-frontend-container ul,
.webcal-upcoming-events-root ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Standardized Buttons — scoped to navbar only so Toast UI internal
   buttons ("+N more", popup close, etc.) are not affected. */
.webcal-frontend-navbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: #2271b1;
    background: #f6f7f7;
    border: 1px solid #2271b1;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.1s ease-in-out;
    text-decoration: none;
}

.webcal-frontend-navbar button:hover {
    background: #f0f0f1;
    border-color: #135e96;
    color: #135e96;
}

.webcal-frontend-navbar button:focus {
    color: #135e96;
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: 2px solid transparent;
}

.webcal-frontend-navbar button:active {
    background: #edeff0;
    border-color: #135e96;
    transform: translateY(1px);
}

/* Calendar Container Height Safety */
.webcal-frontend-container [ref="containerRef"],
.webcal-frontend-container div[style*="height: 600px"] {
    height: 600px;
}

@media (max-width: 600px) {
    .webcal-frontend-container [ref="containerRef"],
    .webcal-frontend-container div[style*="height: 600px"] {
        height: 450px !important;
    }
}

.webcal-frontend-navbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid #dcdcde;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.webcal-frontend-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #1d2327 !important;
}

.webcal-view-selector {
    height: 32px;
    padding: 0 24px 0 8px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 8px center;
    background-size: 8px 10px;
    appearance: none;
    font-size: 13px;
    cursor: pointer;
}

.webcal-view-selector:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .webcal-frontend-navbar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center !important;
        gap: 6px;
    }

    .webcal-frontend-title {
        order: -1;
        width: 100%;
        margin-bottom: 4px !important;
    }

    .webcal-frontend-navbar button {
        height: 28px;
        padding: 0 8px;
        font-size: 12px;
    }

    .webcal-view-selector {
        width: auto;
        height: 28px;
        font-size: 12px;
        margin-top: 0;
    }
}

/* Upcoming Events */
.webcal-upcoming-events {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.webcal-upcoming-event {
    padding: 16px 0;
    border-bottom: 1px solid #dcdcde;
}

.webcal-upcoming-event:last-child {
    border-bottom: none;
}

.webcal-upcoming-event__header {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 4px 8px;
    margin: 0 -8px;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.webcal-upcoming-event__header:hover {
    background-color: #f0f0f1;
}

.webcal-upcoming-event__header-content {
    flex: 1;
    min-width: 0;
}

.webcal-upcoming-event__title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #1d2327;
    margin: 0 0 4px 0 !important;
    line-height: 1.3;
}

.webcal-upcoming-event__chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    color: #646970;
    transition: transform 0.2s ease;
    display: block;
}

.webcal-upcoming-event__chevron--expanded {
    transform: rotate(90deg);
}

.webcal-upcoming-event__details {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}

.webcal-upcoming-event__details--open {
    max-height: 1000px; /* Increased for longer descriptions */
}

.webcal-upcoming-event__details-inner {
    padding: 12px 0 4px 0;
}

.webcal-upcoming-event__featured-image {
    display: block;
    max-width: 60px;
    max-height: 60px;
    border-radius: 4px;
    border: 1px solid #dcdcde;
    object-fit: cover;
    margin-bottom: 8px;
}

.webcal-upcoming-event__attachments {
    margin-top: 12px;
    border-top: 1px solid #dcdcde;
    padding-top: 12px;
}

.webcal-upcoming-event__attachments-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #646970;
    margin-bottom: 8px;
}

.webcal-upcoming-event__attachment-thumb {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 150px;
    border-radius: 4px;
    display: block;
    margin: 8px 0;
    border: 1px solid #dcdcde;
}

.webcal-upcoming-event__attachment-link {
    display: inline-block;
    font-size: 0.8125rem;
    color: #2271b1;
    text-decoration: none;
    margin: 4px 0;
    word-break: break-all;
}

.webcal-upcoming-event__attachment-link:hover {
    color: #135e96;
    text-decoration: underline;
}

.webcal-upcoming-event__date,
.webcal-upcoming-event__time,
.webcal-upcoming-event__location {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    color: #646970;
    margin-right: 16px;
    line-height: 1.4;
}

.webcal-upcoming-event__location::before {
    content: "\1F4CD";
    margin-right: 4px;
    font-style: normal;
}

p.webcal-upcoming-event__description {
    font-size: 0.875rem;
    color: #3c434a;
    margin: 8px 0 0 0 !important;
    line-height: 1.5;
    white-space: pre-wrap;
}

div.webcal-upcoming-event__description {
    font-size: 0.875rem;
    color: #3c434a;
    margin: 8px 0 0 0 !important;
    line-height: 1.5;
    white-space: normal;
}

.webcal-upcoming-event__map-link {
    margin: 6px 0;
    font-size: 0.8125rem;
}

.webcal-upcoming-event__map-link a {
    color: #0073aa;
    text-decoration: none;
}

.webcal-upcoming-event__map-link a:hover {
    color: #135e96;
    text-decoration: underline;
}

.webcal-upcoming-event__event-link {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid #eee;
}

.webcal-upcoming-event__event-link a {
    color: #0073aa;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
}

.webcal-upcoming-event__event-link a:hover {
    color: #135e96;
    text-decoration: underline;
}

.webcal-upcoming-events-loading,
.webcal-upcoming-events-empty {
    padding: 30px 0;
    color: #646970;
    font-style: italic;
    text-align: center;
}

/* Compact layout */
.webcal-upcoming-events--compact .webcal-upcoming-event {
    padding: 10px 0;
}

/* Compact rows stay compact: a smaller picture. */
.webcal-upcoming-events--compact .webcal-event-thumb {
    width: 28px;
    height: 28px;
    margin-right: 8px;
}

.webcal-upcoming-events--compact .webcal-upcoming-event__title {
    display: inline;
    margin-right: 12px !important;
    font-size: 0.9375rem;
}

.webcal-upcoming-events--compact .webcal-upcoming-event__description {
    display: none;
}

/* Responsive */
@media (max-width: 782px) {
    .webcal-frontend-navbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .webcal-frontend-title {
        order: -1;
        width: 100%;
        text-align: center;
        margin-bottom: 2px !important;
    }

    .webcal-view-selector {
        width: auto;
    }

    .webcal-upcoming-event__date,
    .webcal-upcoming-event__time,
    .webcal-upcoming-event__location {
        display: flex;
        margin-right: 0;
        margin-top: 4px;
    }
}

/* Calendar loading indicator — uses grid stacking (grid-area: 1/1)
   to overlay the calendar. No position: absolute/relative needed,
   which avoids creating positioned ancestors that break Toast UI
   popup placement on multi-calendar pages. */
.webcal-frontend-loading {
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.7);
    color: #1d2327;
    font-size: 0.9375rem;
    font-weight: 500;
    backdrop-filter: blur(2px);
}

.webcal-frontend-loading__spinner {
    display: block;
    width: 32px;
    height: 32px;
    border: 3px solid #dcdcde;
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: webcal-spin 0.8s linear infinite;
}

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

/* Holiday Manager Admin Table */
.webcal-holiday-manager .wp-list-table th {
    font-weight: 600;
}

.webcal-holiday-manager .wp-list-table td {
    vertical-align: middle;
}

/* Toast UI Overrides & Custom Popup Styles */
.toastui-calendar-layout {
    background-color: #fff;
    border: 1px solid #dcdcde;
    border-radius: 4px;
}

/* Keep the "+N more" button in month view cells above the
   absolutely-positioned event overlay so users can click it.
   The events container (.toastui-calendar-weekday-events) is an
   absolutely-positioned sibling that paints on top of the grid by
   DOM order.  Elevating the button into its own stacking context
   with z-index lets it render above the overlay. */
.toastui-calendar-grid-cell-more-events {
    position: relative;
    z-index: 1;
}

/* Detail Popup Content */
.toastui-calendar-detail-container {
    padding: 16px !important;
}

.toastui-calendar-detail-container p {
    margin: 0 0 12px 0 !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
    color: #3c434a !important;
}

.toastui-calendar-detail-container strong {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    text-transform: uppercase;
    color: #646970;
}

.toastui-calendar-detail-container img {
    border: 1px solid #dcdcde;
    transition: transform 0.2s ease;
}

.toastui-calendar-detail-container img:hover {
    transform: scale(1.02);
}

/* Detail popup buttons: match plugin style */
.toastui-calendar-detail-container .toastui-calendar-icon {
    filter: sepia(100%) hue-rotate(190deg) saturate(500%); /* Match WP Blue */
}

/* Fixed height for calendar root to prevent layout shifts.
   IMPORTANT: Do NOT add position: relative — it creates a positioned
   ancestor that breaks Toast UI's document-absolute popup coordinates
   on multi-calendar pages. Use CSS Grid stacking for the loading
   overlay instead (see .webcal-frontend-calendar-wrapper). */
.webcalendar-frontend-root {
    min-height: 400px;
}

/* Grid stacking lets the loading overlay cover the calendar without
   needing position: relative on a parent element. Both children
   occupy grid cell 1/1 and overlap visually. */
.webcal-frontend-calendar-wrapper {
    display: grid;
}

.webcal-frontend-calendar-wrapper > * {
    grid-area: 1 / 1;
}

/* ========================================
   Category Legend (Layer Toggle)
   ======================================== */
/* Filter Bar — server-side facets, above the category legend. */
.webcal-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 10px 0;
}

.webcal-filter-bar__field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.webcal-filter-bar__label {
    color: #50575e;
}

.webcal-filter-bar__select {
    font-size: 13px;
    padding: 3px 6px;
    max-width: 220px;
}

.webcal-filter-bar__clear {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    color: #2271b1;
    cursor: pointer;
    text-decoration: underline;
}

/* The bar is a control surface, not content: printing it wastes space and
   the selections are already reflected in which events appear. */
@media print {
    .webcal-filter-bar {
        display: none;
    }
}

.webcal-category-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 10px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #dcdcde;
}

.webcal-category-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    color: #1d2327;
    user-select: none;
}

.webcal-category-legend__item input[type="checkbox"] {
    margin: 0;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.webcal-category-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.webcal-category-legend__actions {
    margin-left: auto;
    font-size: 12px;
    color: #646970;
    white-space: nowrap;
}

/* Multi-select category dropdown */
.webcal-category-filter {
    position: relative;
    display: inline-block;
}

.webcal-category-filter__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: #1d2327;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
}

.webcal-category-filter__toggle:hover {
    border-color: #8c8f94;
    background: #f6f7f7;
}

.webcal-category-filter__caret {
    font-size: 10px;
    color: #646970;
}

.webcal-category-filter__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1000;
    width: 260px;
    max-width: 90vw;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    padding: 8px;
}

.webcal-category-filter__search {
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    padding: 5px 8px;
    margin-bottom: 6px;
    border: 1px solid #c3c4c7;
    border-radius: 3px;
}

.webcal-category-filter__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    overflow-y: auto;
}

.webcal-category-filter__list .webcal-category-legend__item {
    padding: 5px 6px;
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box;
}

.webcal-category-filter__list .webcal-category-legend__item:hover {
    background: #f0f0f1;
}

.webcal-category-filter__group-label {
    margin: 6px 6px 2px;
    padding-top: 6px;
    border-top: 1px solid #dcdcde;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #646970;
}

.webcal-category-filter__empty {
    padding: 8px 6px;
    font-size: 13px;
    color: #646970;
}

.webcal-category-filter__actions {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #dcdcde;
    font-size: 12px;
    color: #646970;
}

/* Print-only category key — hidden on screen. */
.webcal-category-legend__print {
    display: none;
}

.webcal-category-legend__link {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: #2271b1;
    cursor: pointer;
    text-decoration: none;
    height: auto;
    line-height: inherit;
}

.webcal-category-legend__link:hover {
    color: #135e96;
    text-decoration: underline;
    background: none;
    border: none;
}

@media (max-width: 600px) {
    .webcal-category-legend {
        gap: 6px 12px;
    }

    .webcal-category-legend__actions {
        margin-left: 0;
        width: 100%;
        margin-top: 4px;
    }
}

/* ========================================
   Agenda / List View
   ======================================== */
.webcal-agenda {
    min-height: 200px;
}

.webcal-agenda__date-group {
    margin-bottom: 4px;
}

/* List height limit: the events scroll inside the box; the date headers
   above stay sticky within it. */
.webcal-agenda-scroll--limited {
    border: 1px solid #dcdcde;
    border-radius: 4px;
    overscroll-behavior: contain;
}

.webcal-agenda-scroll--limited:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Continuous list: the "Load more" trigger and the end of the feed. */
.webcal-agenda__more,
.webcal-agenda__end {
    padding: 12px;
    text-align: center;
    color: #50575e;
    font-size: 0.875rem;
}

.webcal-upcoming-events--limited {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.webcal-agenda__date-header {
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1d2327;
    background: #f6f7f7;
    padding: 8px 12px;
    border-bottom: 1px solid #dcdcde;
    border-top: 1px solid #dcdcde;
}

.webcal-agenda__date-group:first-child .webcal-agenda__date-header {
    border-top: none;
}

.webcal-agenda__event {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f1;
    cursor: pointer;
    transition: background-color 0.15s;
}

.webcal-agenda__event:hover {
    background-color: #f6f7f7;
}

.webcal-agenda__event:last-child {
    border-bottom: none;
}

/* The event's image beside its entry in List view and Upcoming Events. */
.webcal-event-thumb {
    display: block;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 4px;
    object-fit: cover;
}
.webcal-event-thumb--empty {
    background: none;
}
/* The agenda row spaces its items with gap; the Upcoming header does not. */
.webcal-upcoming-event__header .webcal-event-thumb {
    margin-right: 10px;
}

.webcal-agenda__event-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.webcal-agenda__event-time {
    flex-shrink: 0;
    width: 80px;
    font-size: 0.8125rem;
    color: #646970;
}

.webcal-agenda__event-title {
    flex: 1;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1d2327;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.webcal-agenda__event-location {
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: #646970;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.webcal-agenda__event-location::before {
    content: "\1F4CD";
    margin-right: 4px;
}

.webcal-agenda__event-edit {
    margin-top: 8px;
    font-size: 13px;
}

.webcal-agenda__event-details {
    padding: 10px 0 4px 22px;
}

p.webcal-agenda__event-description {
    font-size: 0.875rem;
    color: #3c434a;
    line-height: 1.5;
    white-space: pre-wrap;
    margin: 0 0 8px 0;
}

div.webcal-agenda__event-description {
    font-size: 0.875rem;
    color: #3c434a;
    line-height: 1.5;
    white-space: normal;
    margin: 0 0 8px 0;
}

.webcal-agenda__event-image {
    display: block;
    max-width: 80px;
    max-height: 80px;
    border-radius: 4px;
    border: 1px solid #dcdcde;
    object-fit: cover;
    margin-bottom: 8px;
}

.webcal-agenda__empty {
    padding: 40px 0;
    color: #646970;
    font-style: italic;
    text-align: center;
    font-size: 0.9375rem;
}

@media (max-width: 600px) {
    .webcal-agenda__event-row {
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    .webcal-agenda__event-time {
        width: auto;
    }

    .webcal-agenda__event-title {
        white-space: normal;
        flex-basis: 100%;
        order: -1;
    }

    .webcal-agenda__event-location {
        max-width: none;
    }
}

/* ========================================
   Single Event Page — Featured Image
   ======================================== */
.webcal-single-event__featured-image {
    margin-bottom: 24px;
}

/* Whole, not cropped (flyers carry text), and no taller than 400px: a tall
   flyer used to fill the screen. Wide images still take the full width. */
.webcal-single-event__featured-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 400px;
    margin: 0 auto;
    border-radius: 6px;
    border: 1px solid #dcdcde;
}

/* ========================================
   Rich Text (HTML) Description Styles
   ======================================== */
.webcal-popup-html-desc p,
div.webcal-agenda__event-description p,
div.webcal-upcoming-event__description p {
    margin: 0 0 0.5em;
}

.webcal-popup-html-desc ul, .webcal-popup-html-desc ol,
div.webcal-agenda__event-description ul, div.webcal-agenda__event-description ol,
div.webcal-upcoming-event__description ul, div.webcal-upcoming-event__description ol {
    margin: 0.25em 0;
    padding-left: 1.5em;
    list-style: revert !important;
}

.webcal-popup-html-desc a,
div.webcal-agenda__event-description a,
div.webcal-upcoming-event__description a {
    color: #0073aa;
    text-decoration: underline;
}

.webcal-popup-html-desc blockquote,
div.webcal-agenda__event-description blockquote,
div.webcal-upcoming-event__description blockquote {
    border-left: 3px solid #dcdcde;
    margin: 0.5em 0;
    padding-left: 1em;
    color: #646970;
}

/* ========================================
   Event Detail Popup — scrollable for long descriptions
   ======================================== */
.webcalendar-frontend-root .toastui-calendar-popup-container {
  max-height: 60vh !important;
  overflow-y: auto !important;
}

.webcalendar-frontend-root .toastui-calendar-detail-container {
  color: #1d2327 !important;
}

.webcalendar-frontend-root .toastui-calendar-detail-container .toastui-calendar-content {
  color: #2c3338 !important;
}

.webcalendar-frontend-root .toastui-calendar-template-popupDetailDate,
.webcalendar-frontend-root .toastui-calendar-template-popupDetailLocation,
.webcalendar-frontend-root .toastui-calendar-template-popupDetailState,
.webcalendar-frontend-root .toastui-calendar-template-popupDetailAttendees {
  color: #2c3338 !important;
}

.webcalendar-frontend-root .toastui-calendar-template-popupDetailBody {
  max-height: 120px;
  overflow-y: auto;
  color: #2c3338 !important;
}

.webcalendar-frontend-root .toastui-calendar-template-popupDetailBody p,
.webcalendar-frontend-root .toastui-calendar-template-popupDetailBody span,
.webcalendar-frontend-root .toastui-calendar-template-popupDetailBody div,
.webcalendar-frontend-root .toastui-calendar-template-popupDetailBody li {
  color: #2c3338 !important;
}

/* Force dark popup text regardless of theme inheritance */
.webcalendar-frontend-root .toastui-calendar-detail-container * {
  color: #1d2327;
}

.webcalendar-frontend-root .toastui-calendar-detail-container a {
  color: #2271b1 !important;
}

.webcalendar-frontend-root .toastui-calendar-template-popupDetailBody::-webkit-scrollbar {
  width: 4px;
}

.webcalendar-frontend-root .toastui-calendar-template-popupDetailBody::-webkit-scrollbar-thumb {
  background: #c3c4c7;
  border-radius: 2px;
}

/* ========================================
   Mini Calendar Widget
   ======================================== */
.webcal-mini-calendar {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #1d2327;
    max-width: 280px;
}

.webcal-mini-calendar__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.webcal-mini-calendar__month {
    font-weight: 600;
    font-size: 14px;
}

.webcal-mini-calendar__prev,
.webcal-mini-calendar__next {
    background: none;
    border: 1px solid #dcdcde;
    border-radius: 3px;
    width: 28px;
    height: 28px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: #2271b1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.webcal-mini-calendar__prev:hover,
.webcal-mini-calendar__next:hover {
    background: #f0f0f1;
    border-color: #2271b1;
}

.webcal-mini-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.webcal-mini-calendar__header {
    font-weight: 600;
    font-size: 11px;
    color: #646970;
    padding: 4px 0;
    text-transform: uppercase;
}

.webcal-mini-calendar__day {
    padding: 4px 2px;
    border-radius: 3px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #1d2327;
}

.webcal-mini-calendar__day--empty {
    visibility: hidden;
}

.webcal-mini-calendar__day--today {
    background: #f0f0f1;
    font-weight: 700;
}

.webcal-mini-calendar__day--has-events {
    font-weight: 700;
    color: #2271b1;
    position: relative;
}

.webcal-mini-calendar__day--has-events::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #2271b1;
}

a.webcal-mini-calendar__day--has-events:hover {
    background: #e7f3ff;
    color: #135e96;
    cursor: pointer;
}

a.webcal-mini-calendar__day--has-events:hover::after {
    background: #135e96;
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    /* Hide navbar controls — keep only the title */
    .webcal-frontend-navbar button,
    .webcal-frontend-navbar a.button,
    .webcal-frontend-navbar input,
    .webcal-frontend-navbar select { display: none !important; }

    .webcal-frontend-navbar {
        border-bottom: none !important;
        margin-bottom: 10px !important;
        padding-bottom: 0 !important;
    }

    .webcal-frontend-navbar h2.webcal-frontend-title {
        display: block !important;
        font-size: 18pt !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Category legend: hide the interactive dropdown, print a static color key */
    .webcal-category-filter,
    .webcal-category-legend input[type="checkbox"],
    .webcal-category-legend__actions { display: none !important; }

    .webcal-category-legend__print {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px 16px;
        justify-content: center;
    }

    /* Browsers leave backgrounds off paper by default, which printed the key
       as bare names. */
    .webcal-category-legend__print .webcal-category-dot {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .webcal-category-legend {
        border-bottom: none !important;
        justify-content: center !important;
    }

    /* Calendar: a page-sized box. Toast UI lays out the month's weeks as
       fractions of this box's height, so collapsing it to auto (as 1.5.0
       did) stacked every week on the first row and the month printed as
       one week. Week and day view print the hours in view, as on screen. */
    .webcal-frontend-calendar-wrapper > div { height: 7in !important; }
    .toastui-calendar-month { overflow: visible !important; }

    /* Hide popups, overlays, loading */
    .webcal-frontend-loading,
    .toastui-calendar-see-more-popup-slot,
    .toastui-calendar-event-detail-popup-slot,
    .toastui-calendar-event-form-popup-slot,
    .toastui-calendar-popup-overlay { display: none !important; }

    /* Agenda view: no hover effect */
    .webcal-agenda__event:hover { background: none !important; }

    /* Upcoming events: no hover effect */
    .webcal-upcoming-event__header:hover { background: none !important; }

    /* Featured images: constrain height in print */
    .webcal-single-event__featured-img { max-height: 250px !important; }
    .webcal-agenda__event-image { max-height: 60px !important; }
    .webcal-upcoming-event__featured-image { max-height: 50px !important; }

    /* General: force black text, white background, remove shadows */
    .webcal-frontend-container { color: #000 !important; }
    .webcal-frontend-container * { box-shadow: none !important; }

    /* A height-limited list prints in full, not just the part in view. */
    .webcal-agenda-scroll--limited,
    .webcal-upcoming-events--limited {
        max-height: none !important;
        overflow: visible !important;
        border: none !important;
    }

    /* The Print button prints only its calendar (src/printCalendar.js marks
       everything around it). Removed from the layout, not just hidden: with
       visibility the theme's header, content and footer kept their space
       and printed as blank pages. The calendar stays in normal flow, so a
       long list still breaks across pages. */
    html.webcal-printing [data-webcal-print-hide] { display: none !important; }
    html.webcal-printing .webcal-print-target {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Week and day views draw the current-time line across today's column on
   top of the events, and it took the click: an event clicked where the line
   crosses it opened nothing. The line is only a marker; let clicks through
   to the event beneath it. */
.toastui-calendar-timegrid-now-indicator,
.toastui-calendar-timegrid-now-indicator * {
    pointer-events: none;
}

/* Month view's "+N more" link sits in the cell footer, below the day's
   events (src/monthMore.js). Toast UI still renders an empty button for it
   in the header beside the date; hide that one. */
.toastui-calendar-grid-cell-header .toastui-calendar-grid-cell-more-events {
    display: none;
}
.toastui-calendar-grid-cell-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 4px;
}
/* Toast floats the button right; under the events it reads as their
   continuation, so left-align it. */
.toastui-calendar-grid-cell-footer .toastui-calendar-grid-cell-more-events {
    float: none;
    margin: 0;
    padding: 0 2px;
    height: auto;
    line-height: 16px;
    font-size: 11px;
    font-weight: 600;
    color: #2271b1;
    background: none;
    border: none;
    cursor: pointer;
}
.toastui-calendar-grid-cell-footer .toastui-calendar-grid-cell-more-events:hover,
.toastui-calendar-grid-cell-footer .toastui-calendar-grid-cell-more-events:focus {
    text-decoration: underline;
}