*/
height: 1px /* better than 0, for firefox */
}
.fc .fc-scrollgrid-section > td {
height: 1px; /* needs a height so inner div within grow. better than 0, for firefox */
}
.fc .fc-scrollgrid-section table {
height: 1px;
/* for most browsers, if a height isn't set on the table, can't do liquid-height within cells */
/* serves as a min-height. harmless */
}
.fc .fc-scrollgrid-section-liquid > td {
height: 100%; /* better than `auto`, for firefox */
}
.fc .fc-scrollgrid-section > * {
border-top-width: 0;
border-left-width: 0;
}
.fc .fc-scrollgrid-section-header > *,
.fc .fc-scrollgrid-section-footer > * {
border-bottom-width: 0;
}
.fc .fc-scrollgrid-section-body table,
.fc .fc-scrollgrid-section-footer table {
border-bottom-style: hidden; /* head keeps its bottom border tho */
}
.fc {
/* stickiness */
}
.fc .fc-scrollgrid-section-sticky > * {
background: #fff;
background: var(--fc-page-bg-color, #fff);
position: sticky;
z-index: 3; /* TODO: var */
/* TODO: box-shadow when sticking */
}
.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky > * {
top: 0; /* because border-sharing causes a gap at the top */
/* TODO: give safari -1. has bug */
}
.fc .fc-scrollgrid-section-footer.fc-scrollgrid-section-sticky > * {
bottom: 0; /* known bug: bottom-stickiness doesn't work in safari */
}
.fc .fc-scrollgrid-sticky-shim { /* for horizontal scrollbar */
height: 1px; /* needs height to create scrollbars */
margin-bottom: -1px;
}
.fc-sticky { /* no .fc wrap because used as child of body */
position: sticky;
}
.fc .fc-view-harness {
flex-grow: 1; /* because this harness is WITHIN the .fc's flexbox */
position: relative;
}
.fc {
/* when the harness controls the height, make the view liquid */
}
.fc .fc-view-harness-active > .fc-view {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.fc .fc-col-header-cell-cushion {
display: inline-block; /* x-browser for when sticky (when multi-tier header) */
padding: 2px 4px;
}
.fc .fc-bg-event,
.fc .fc-non-business,
.fc .fc-highlight {
/* will always have a harness with position:relative/absolute, so absolutely expand */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.fc .fc-non-business {
background: rgba(215, 215, 215, 0.3);
background: var(--fc-non-business-color, rgba(215, 215, 215, 0.3));
}
.fc .fc-bg-event {
background: rgb(143, 223, 130);
background: var(--fc-bg-event-color, rgb(143, 223, 130));
opacity: 0.3;
opacity: var(--fc-bg-event-opacity, 0.3)
}
.fc .fc-bg-event .fc-event-title {
margin: .5em;
font-size: .85em;
font-size: var(--fc-small-font-size, .85em);
font-style: italic;
}
.fc .fc-highlight {
background: rgba(188, 232, 241, 0.3);
background: var(--fc-highlight-color, rgba(188, 232, 241, 0.3));
}
.fc .fc-cell-shaded,
.fc .fc-day-disabled {
background: rgba(208, 208, 208, 0.3);
background: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
}
/* link resets */
/* ---------------------------------------------------------------------------------------------------- */
a.fc-event,
a.fc-event:hover {
text-decoration: none;
}
/* cursor */
.fc-event[href],
.fc-event.fc-event-draggable {
cursor: pointer;
}
/* event text content */
/* ---------------------------------------------------------------------------------------------------- */
.fc-event .fc-event-main {
position: relative;
z-index: 2;
}
/* dragging */
/* ---------------------------------------------------------------------------------------------------- */
.fc-event-dragging:not(.fc-event-selected) { /* MOUSE */
opacity: 0.75;
}
.fc-event-dragging.fc-event-selected { /* TOUCH */
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
}
/* resizing */
/* ---------------------------------------------------------------------------------------------------- */
/* (subclasses should hone positioning for touch and non-touch) */
.fc-event .fc-event-resizer {
display: none;
position: absolute;
z-index: 4;
}
.fc-event:hover, /* MOUSE */
.fc-event-selected { /* TOUCH */
}
.fc-event:hover .fc-event-resizer, .fc-event-selected .fc-event-resizer {
display: block;
}
.fc-event-selected .fc-event-resizer {
border-radius: 4px;
border-radius: calc(var(--fc-event-resizer-dot-total-width, 8px) / 2);
border-width: 1px;
border-width: var(--fc-event-resizer-dot-border-width, 1px);
width: 8px;
width: var(--fc-event-resizer-dot-total-width, 8px);
height: 8px;
height: var(--fc-event-resizer-dot-total-width, 8px);
border-style: solid;
border-color: inherit;
background: #fff;
background: var(--fc-page-bg-color, #fff)
/* expand hit area */
}
.fc-event-selected .fc-event-resizer:before {
content: '';
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
}
/* selecting (always TOUCH) */
/* OR, focused by tab-index */
/* (TODO: maybe not the best focus-styling for .fc-daygrid-dot-event) */
/* ---------------------------------------------------------------------------------------------------- */
.fc-event-selected,
.fc-event:focus {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
/* expand hit area (subclasses should expand) */
}
.fc-event-selected:before, .fc-event:focus:before {
content: "";
position: absolute;
z-index: 3;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.fc-event-selected,
.fc-event:focus {
/* dimmer effect */
}
.fc-event-selected:after, .fc-event:focus:after {
content: "";
background: rgba(0, 0, 0, 0.25);
background: var(--fc-event-selected-overlay-color, rgba(0, 0, 0, 0.25));
position: absolute;
z-index: 1;
/* assume there's a border on all sides. overcome it. */
/* sometimes there's NOT a border, in which case the dimmer will go over */
/* an adjacent border, which looks fine. */
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
}
/*
A HORIZONTAL event
*/
.fc-h-event { /* allowed to be top-level */
display: block;
border: 1px solid #3788d8;
border: 1px solid var(--fc-event-border-color, #3788d8);
background-color: #3788d8;
background-color: var(--fc-event-bg-color, #3788d8)
}
.fc-h-event .fc-event-main {
color: #fff;
color: var(--fc-event-text-color, #fff);
}
.fc-h-event .fc-event-main-frame {
display: flex; /* for make fc-event-title-container expand */
}
.fc-h-event .fc-event-time {
max-width: 100%; /* clip overflow on this element */
overflow: hidden;
}
.fc-h-event .fc-event-title-container { /* serves as a container for the sticky cushion */
flex-grow: 1;
flex-shrink: 1;
min-width: 0; /* important for allowing to shrink all the way */
}
.fc-h-event .fc-event-title {
display: inline-block; /* need this to be sticky cross-browser */
vertical-align: top; /* for not messing up line-height */
left: 0; /* for sticky */
right: 0; /* for sticky */
max-width: 100%; /* clip overflow on this element */
overflow: hidden;
}
.fc-h-event.fc-event-selected:before {
/* expand hit area */
top: -10px;
bottom: -10px;
}
/* adjust border and border-radius (if there is any) for non-start/end */
.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-start),
.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-end) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-width: 0;
}
.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-end),
.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-start) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right-width: 0;
}
/* resizers */
.fc-h-event:not(.fc-event-selected) .fc-event-resizer {
top: 0;
bottom: 0;
width: 8px;
width: var(--fc-event-resizer-thickness, 8px);
}
.fc-direction-ltr .fc-h-event:not(.fc-event-selected) .fc-event-resizer-start,
.fc-direction-rtl .fc-h-event:not(.fc-event-selected) .fc-event-resizer-end {
cursor: w-resize;
left: -4px;
left: calc(-0.5 * var(--fc-event-resizer-thickness, 8px));
}
.fc-direction-ltr .fc-h-event:not(.fc-event-selected) .fc-event-resizer-end,
.fc-direction-rtl .fc-h-event:not(.fc-event-selected) .fc-event-resizer-start {
cursor: e-resize;
right: -4px;
right: calc(-0.5 * var(--fc-event-resizer-thickness, 8px));
}
/* resizers for TOUCH */
.fc-h-event.fc-event-selected .fc-event-resizer {
top: 50%;
margin-top: -4px;
margin-top: calc(-0.5 * var(--fc-event-resizer-dot-total-width, 8px));
}
.fc-direction-ltr .fc-h-event.fc-event-selected .fc-event-resizer-start,
.fc-direction-rtl .fc-h-event.fc-event-selected .fc-event-resizer-end {
left: -4px;
left: calc(-0.5 * var(--fc-event-resizer-dot-total-width, 8px));
}
.fc-direction-ltr .fc-h-event.fc-event-selected .fc-event-resizer-end,
.fc-direction-rtl .fc-h-event.fc-event-selected .fc-event-resizer-start {
right: -4px;
right: calc(-0.5 * var(--fc-event-resizer-dot-total-width, 8px));
}
.fc .fc-popover {
position: absolute;
z-index: 9999;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.fc .fc-popover-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 3px 4px;
}
.fc .fc-popover-title {
margin: 0 2px;
}
.fc .fc-popover-close {
cursor: pointer;
opacity: 0.65;
font-size: 1.1em;
}
.fc-theme-standard .fc-popover {
border: 1px solid #ddd;
border: 1px solid var(--fc-border-color, #ddd);
background: #fff;
background: var(--fc-page-bg-color, #fff);
}
.fc-theme-standard .fc-popover-header {
background: rgba(208, 208, 208, 0.3);
background: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
}
:root {
--fc-daygrid-event-dot-width: 8px;
}
/* help things clear margins of inner content */
.fc-daygrid-day-frame,
.fc-daygrid-day-events,
.fc-daygrid-event-harness { /* for event top/bottom margins */
}
.fc-daygrid-day-frame:before, .fc-daygrid-day-events:before, .fc-daygrid-event-harness:before {
content: "";
clear: both;
display: table; }
.fc-daygrid-day-frame:after, .fc-daygrid-day-events:after, .fc-daygrid-event-harness:after {
content: "";
clear: both;
display: table; }
.fc .fc-daygrid-body { /* a that wraps the table */
position: relative;
z-index: 1; /* container inner z-index's because
s can't do it */
}
.fc .fc-daygrid-day.fc-day-today {
background-color: rgba(255, 220, 40, 0.15);
background-color: var(--fc-today-bg-color, rgba(255, 220, 40, 0.15));
}
.fc .fc-daygrid-day-frame {
position: relative;
min-height: 100%; /* seems to work better than `height` because sets height after rows/cells naturally do it */
}
.fc {
/* cell top */
}
.fc .fc-daygrid-day-top {
display: flex;
flex-direction: row-reverse;
}
.fc .fc-day-other .fc-daygrid-day-top {
opacity: 0.3;
}
.fc {
/* day number (within cell top) */
}
.fc .fc-daygrid-day-number {
position: relative;
z-index: 4;
padding: 4px;
}
.fc {
/* event container */
}
.fc .fc-daygrid-day-events {
margin-top: 1px; /* needs to be margin, not padding, so that available cell height can be computed */
}
.fc {
/* positioning for balanced vs natural */
}
.fc .fc-daygrid-body-balanced .fc-daygrid-day-events {
position: absolute;
left: 0;
right: 0;
}
.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
position: relative; /* for containing abs positioned event harnesses */
min-height: 2em; /* in addition to being a min-height during natural height, equalizes the heights a little bit */
}
.fc .fc-daygrid-body-natural { /* can coexist with -unbalanced */
}
.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
margin-bottom: 1em;
}
.fc {
/* event harness */
}
.fc .fc-daygrid-event-harness {
position: relative;
}
.fc .fc-daygrid-event-harness-abs {
position: absolute;
top: 0; /* fallback coords for when cannot yet be computed */
left: 0; /* */
right: 0; /* */
}
.fc .fc-daygrid-bg-harness {
position: absolute;
top: 0;
bottom: 0;
}
.fc {
/* bg content */
}
.fc .fc-daygrid-day-bg .fc-non-business { z-index: 1 }
.fc .fc-daygrid-day-bg .fc-bg-event { z-index: 2 }
.fc .fc-daygrid-day-bg .fc-highlight { z-index: 3 }
.fc {
/* events */
}
.fc .fc-daygrid-event {
z-index: 6;
margin-top: 1px;
}
.fc .fc-daygrid-event.fc-event-mirror {
z-index: 7;
}
.fc {
/* cell bottom (within day-events) */
}
.fc .fc-daygrid-day-bottom {
font-size: .85em;
padding: 2px 3px 0
}
.fc .fc-daygrid-day-bottom:before {
content: "";
clear: both;
display: table; }
.fc .fc-daygrid-more-link {
position: relative;
z-index: 4;
cursor: pointer;
}
.fc {
/* week number (within frame) */
}
.fc .fc-daygrid-week-number {
position: absolute;
z-index: 5;
top: 0;
padding: 2px;
min-width: 1.5em;
text-align: center;
background-color: rgba(208, 208, 208, 0.3);
background-color: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
color: #808080;
color: var(--fc-neutral-text-color, #808080);
}
.fc {
/* popover */
}
.fc .fc-more-popover .fc-popover-body {
min-width: 220px;
padding: 10px;
}
.fc-direction-ltr .fc-daygrid-event.fc-event-start,
.fc-direction-rtl .fc-daygrid-event.fc-event-end {
margin-left: 2px;
}
.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
margin-right: 2px;
}
.fc-direction-ltr .fc-daygrid-week-number {
left: 0;
border-radius: 0 0 3px 0;
}
.fc-direction-rtl .fc-daygrid-week-number {
right: 0;
border-radius: 0 0 0 3px;
}
.fc-liquid-hack .fc-daygrid-day-frame {
position: static; /* will cause inner absolute stuff to expand to | */
}
.fc-daygrid-event { /* make root-level, because will be dragged-and-dropped outside of a component root */
position: relative; /* for z-indexes assigned later */
white-space: nowrap;
border-radius: 3px; /* dot event needs this to when selected */
font-size: .85em;
font-size: var(--fc-small-font-size, .85em);
}
/* --- the rectangle ("block") style of event --- */
.fc-daygrid-block-event .fc-event-time {
font-weight: bold;
}
.fc-daygrid-block-event .fc-event-time,
.fc-daygrid-block-event .fc-event-title {
padding: 1px;
}
/* --- the dot style of event --- */
.fc-daygrid-dot-event {
display: flex;
align-items: center;
padding: 2px 0
}
.fc-daygrid-dot-event .fc-event-title {
flex-grow: 1;
flex-shrink: 1;
min-width: 0; /* important for allowing to shrink all the way */
overflow: hidden;
font-weight: bold;
}
.fc-daygrid-dot-event:hover,
.fc-daygrid-dot-event.fc-event-mirror {
background: rgba(0, 0, 0, 0.1);
}
.fc-daygrid-dot-event.fc-event-selected:before {
/* expand hit area */
top: -10px;
bottom: -10px;
}
.fc-daygrid-event-dot { /* the actual dot */
margin: 0 4px;
box-sizing: content-box;
width: 0;
height: 0;
border: 4px solid #3788d8;
border: calc(var(--fc-daygrid-event-dot-width, 8px) / 2) solid var(--fc-event-border-color, #3788d8);
border-radius: 4px;
border-radius: calc(var(--fc-daygrid-event-dot-width, 8px) / 2);
}
/* --- spacing between time and title --- */
.fc-direction-ltr .fc-daygrid-event .fc-event-time {
margin-right: 3px;
}
.fc-direction-rtl .fc-daygrid-event .fc-event-time {
margin-left: 3px;
}
/* =============================================
GLOBAL / WRAPPERS
============================================= */
#events-list-wrapper,
#calendar-wrapper {
position: relative;
margin: 2.4rem auto;
padding: 1.6rem;
background: #fff;
border-radius: 8px;
box-shadow: none;
overflow: visible;
}
#calendar-wrapper {
max-width: 121.6rem;
}
/* =============================================
VIEW TOGGLE (OUTSIDE VUE TEMPLATE)
============================================= */
.view-toggle {
max-width: 121.6rem;
margin: 1.6rem auto 0 auto;
padding: 0 1.6rem;
display: flex;
justify-content: flex-end;
gap: 0.8rem;
}
.view-toggle-button {
height: 3.2rem;
width: 3.2rem;
border-radius: 10px;
border: 1px solid #ccc;
background: #fff;
font-size: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
#list-view-btn::before {
content: "☰";
font-size: 1.8rem;
color: #333;
}
#calendar-view-btn::before {
content: "📅";
font-size: 1.6rem;
color: #333;
}
.view-toggle-button.is-active {
background: #00579c;
border-color: #00406f;
}
.view-toggle-button.is-active::before {
color: #fff;
}
/* =============================================
CALENDAR COMPONENT SHELL
============================================= */
.calendar-component {
width: 100%;
}
/* =============================================
HEADER (DATEPICKER + NAV + FILTERS)
============================================= */
.calendar-component .header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 25px 0;
}
.calendar-component .left-header {
display: flex;
align-items: center;
gap: 1.2rem;
}
/* =============================================
DATEPICKER
============================================= */
.calendar-component .month-year-picker {
position: relative;
}
.calendar-component .picker-toggle {
display: flex;
justify-content: space-between;
align-items: center;
width: fit-content;
padding: 0.6rem 1rem;
background: #fff;
border: none;
cursor: pointer;
}
.calendar-component .picker-toggle .picker-label {
font-size: 32px;
color: #0B233D;
white-space: nowrap;
}
.calendar-component .picker-toggle span {
transition: transform 0.25s ease;
}
.calendar-component .arrow-rotated {
transform: rotate(180deg);
}
.calendar-component .picker-panel {
position: absolute;
top: 3.8rem;
left: 0;
width: 22rem;
min-width: 27rem;
max-width: 90vw;
background: #fff;
border: 1px solid #ccc;
border-radius: 10px;
padding: 1rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 2000;
}
.calendar-component .picker-year-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.calendar-component .year-arrow {
background: #fff;
border: none;
padding: 0.2rem 0.6rem;
cursor: pointer;
}
.calendar-component .picker-year-label {
font-weight: 600;
}
.calendar-component .month-grid-12 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
}
.calendar-component .month-tile {
padding: 0.6rem;
border-radius: 10px;
background: #fff;
border: 1px solid #E1E3E8;
cursor: pointer;
text-align: center;
font-size: 1.3rem;
}
.calendar-component .month-tile:hover {
background: #e6f2ff;
}
/* =============================================
TODAY / PREV / NEXT BUTTONS
============================================= */
.calendar-component .fc-left-buttons {
display: flex;
gap: 0.8rem;
}
.calendar-component .fc-nav-button {
background: #fff;
border: 1px solid rgba(3, 79, 252, 0.2);
border-radius: 20px;
padding: 0.6rem 1rem;
cursor: pointer;
font-size: 1.2rem;
color: #1e49e2;
}
.calendar-component .fc-nav-button:hover {
background: #f5f5f5;
color: #00338d;
}
/* =============================================
FILTERS
============================================= */
.calendar-component .filters-section {
display: flex;
gap: 1.2rem;
align-items: center;
}
.calendar-component .filter-dropdown {
position: relative;
}
/* Filter toggle — same sizing desktop & mobile */
.calendar-component .filter-toggle {
display: flex;
align-items: center;
gap: 6px;
padding: 0.6rem 1rem;
background: #fff;
border: 1px solid rgba(3, 79, 252, 0.2);
border-radius: 20px;
cursor: pointer;
width: fit-content;
min-width: max-content;
font-size: 1.2rem;
color: #1e49e2;
white-space: nowrap;
}
.calendar-component .filter-toggle:hover {
color: #00338d;
}
/* 12px after label, before arrow */
.calendar-component .filter-toggle span:first-child {
margin-right: 12px;
}
.calendar-component .filter-panel {
position: absolute;
top: calc(100% + 0.4rem);
left: 0;
width: auto;
min-width: max-content;
white-space: nowrap;
padding: 0.75rem 1.25rem;
background: #fff;
border: 1px solid #ccc;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 0.8rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 2000;
}
.calendar-component .filter-option {
display: flex;
align-items: center;
gap: 0.8rem;
}
/* =============================================
FILTER TAG ROW — final version
============================================= */
.calendar-component .filter-tag-row {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-bottom: 25px;
}
/* Individual filter pill */
.calendar-component .filter-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 20px;
/* Matches dropdown borders */
border: 1px solid rgba(3, 79, 252, 0.2);
background: transparent;
color: #1E49E2;
font-size: 12px;
font-weight: 400;
}
/* “x” close button inside pill */
.calendar-component .pill-close {
background: none;
border: none;
cursor: pointer;
font-size: 14px;
line-height: 1;
color: #1E49E2;
padding: 0;
}
/* Clear All */
.calendar-component .filter-clear-all {
background: none;
border: none;
padding: 8px 0; /* aligns vertically with pill height */
font-size: 12px;
font-weight: 600; /* bold */
color: #1E49E2;
cursor: pointer;
}
/* =============================================
FULLCALENDAR – DAYS & EVENTS
============================================= */
.fc .fc-col-header-cell-cushion {
color: #0B233D;
}
/* Center date number */
.calendar-component .fc .fc-daygrid-day-top {
justify-content: center;
}
/* Unbold date numbers */
.calendar-component .fc .fc-daygrid-day-number {
font-weight: normal;
color: #000;
z-index: -1;
position: absolute;
top: -1px;
}
/* TODAY: remove default yellow */
.calendar-component .fc .fc-daygrid-day.fc-day-today {
background-color: transparent;
}
/* TODAY circle: 32x32 */
.calendar-component .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
background: #E0F4F8;
border-radius: 50%;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Event appearance (pill) */
.calendar-component .fc .fc-daygrid-event {
background: #E0F4F8;
border-radius: 2.4rem;
padding: 0.2rem 0.4rem;
border: none;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Event title ellipsis + color */
.calendar-component .fc .fc-event-title {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #02338D;
font-weight: normal;
}
/* Time pill */
.calendar-component .fc .fc-event-time {
background: #fff;
color: #7213ea;
border-radius: 2.4rem;
padding: 2px 8px;
margin-right: 0.4rem;
}
/* Past events: white background, blue border */
.calendar-component .fc .fc-daygrid-event.fc-event-past {
background: #fff;
border: 1px solid #ACE9FF;
}
/* Hide dots in desktop */
@media (min-width: 769px) {
.calendar-component .fc .fc-daygrid-event-dot {
display: none;
}
}
/* MAIN TOOLTIP BOX */
.fc-event-tooltip {
position: fixed;
background: #0B233D;
color: #fff;
font-size: 0.85em;
padding: 8px 12px;
border-radius: 24px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
z-index: 999999;
}
/* visible */
.fc-event-tooltip.show {
opacity: 1;
}
/* DEFAULT ARROW (center) */
.fc-event-tooltip::after {
content: "";
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #0B233D;
}
/* ARROW WHEN LEFT-ALIGNED */
.fc-event-tooltip.align-left::after {
left: 16px; /* aligns with left of event */
transform: none;
}
/* ARROW WHEN RIGHT-ALIGNED */
.fc-event-tooltip.align-right::after {
right: 16px;
left: auto;
transform: none;
}
/* =============================================
MOBILE – LAYOUT & DOTS
============================================= */
@media (max-width: 768px) {
.calendar-component .header-row {
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: 1.6rem;
}
.calendar-component .left-header {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.2rem;
}
.calendar-component .filters-section {
width: 100%;
display: flex;
gap: 1.2rem;
flex-wrap: nowrap;
margin-top: 0.4rem;
}
.calendar-component .filter-dropdown {
position: relative;
flex: 0 0 auto;
}
/* Blue dot for days with events */
.calendar-component .fc .fc-daygrid-day-frame {
position: relative;
}
.mobile-day-dot {
position: absolute;
top: 0.3rem;
right: 0.3rem;
width: 8px;
height: 8px;
background: #77D2FE;
border-radius: 50%;
}
/* Hide inline events in boxes; rely on list below */
.calendar-component .fc .fc-daygrid-day .fc-daygrid-event {
display: none;
}
/* Bold selected day number */
.calendar-component .fc-daygrid-day.mobile-selected
.fc-daygrid-day-top .fc-daygrid-day-number {
font-weight: 700;
}
.calendar-component .fc .fc-view-harness {
height: auto !important;
min-height: 300px !important;
}
.calendar-component .fc .fc-scroller {
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
.calendar-component .fc .fc-daygrid-body {
height: auto !important;
}
}
/* =============================================
MOBILE EVENTS LIST
============================================= */
.mobile-events-list {
margin-top: 1.6rem;
}
.mobile-events-heading {
font-size: 1.4rem;
margin-bottom: 0.8rem;
}
.mobile-events-items {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-event-item {
display: flex;
flex-direction: column;
gap: 0.2rem;
margin-bottom: 0.8rem;
padding: 0.8rem 1rem;
border-radius: 12px;
border: 1px solid #E0F4F8;
background: #f9fcff;
}
.mobile-event-time-pill {
display: inline-block;
background: #fff;
color: #7213ea;
border-radius: 2.4rem;
padding: 2px 8px;
border: 1px solid #ccc;
margin-bottom: 0.3rem;
}
.mobile-event-title {
color: #02338D;
}
/* =============================================
MODAL
============================================= */
.calendar-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
}
.calendar-modal {
background: #fff;
padding: 24px;
border-radius: 10px;
width: 420px;
max-width: 90%;
box-shadow: 0 4px 20px rgba(0,0,0,0.35);
position: relative;
}
.modal-x-close {
position: absolute;
top: 10px;
right: 10px;
background: transparent;
border: none;
font-size: 24px;
line-height: 1;
cursor: pointer;
color: #444;
}
.modal-register-button {
display: inline-block;
margin-top: 20px;
background: #00579c;
color: #fff;
padding: 10px 16px;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
}
.modal-ics-button {
display: inline-block;
margin-top: 20px;
margin-left: 8px;
background: #28a745;
color: #fff;
padding: 10px 16px;
border-radius: 6px;
font-weight: 600;
border: none;
}
|