/**
	Overrides to existing CSS
*/
/* set style for fullcalendar root element */
.fc {
	flex: 1;
}

/* set style for fullcalendar table layout */
.fc table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 0.9em; 
	overflow: hidden;
}
/* override event css */
.fc-event {
	border: unset;
	margin-bottom: 1px;
	margin-right: 1px;
	border-radius: 0px;
}

/* set style when event is draggable */
.fc-unselectable .fc-event-dragging {
  	background-color: rgba(144, 194, 201, 1);
	font-size: 80%;
	color: #3b434a;
	margin : 0.5em;
	padding: 0.5em;
	opacity: .75;
	box-shadow: 6px 11px 6px gray;
}

/*v5 updgrade*/
/* set height of timegrid slot */
.fc .fc-timegrid-slot {
    height: 2.5em;
}
/* set style for event */
.fc-timegrid-event .fc-event-main, .fc-daygrid-event .fc-event-main {
	height: 100%;
	padding: 0px;
}
/* set style for day grid event */
.fc .fc-daygrid-body-natural .fc-daygrid-day-events{
	margin-bottom: 2px;
	min-height: 3em;
}
/* set style for column header title */
.fc .fc-col-header-cell-cushion{
	padding:0px;
}
/* set height of daygrid event */
.fc-daygrid-event {
	height: 3.5em;
}

/* set header style for more list pop up */
.fc .fc-popover-header{
	font-size: 11px;
}
/* workaround for more popover not scrolling
 * https://github.com/fullcalendar/fullcalendar/issues/5532
 *
 * Issue still present eventhough release notes says fixed in 5.7.0! 
 * https://fullcalendar.io/blog/2021/05/new-features-in-v570
*/
.fc-more-popover {
	max-height: 95%;
	overflow-y: auto;
}
/* Override daygrid event title padding */
.fc-daygrid-block-event .fc-event-title {
	padding:0px;
}

/* Set font color of current day header */
th.fc-day-today {
	color: var(--calendar-today-header-font-color);
}

/* Applicable only for iOS */
/* To remove white space in all day row. Bug933583 */
.iOS .fc .fc-daygrid-body-natural table {
	height: -webkit-fit-content;
}

/* Applicable only for iOS phone */
/* To avoid popover cliping inside the all day grid. Bug933584 */
@media only screen and (max-width: 479px) {
    .iOS .fc-timegrid.fc-timeGridWeek-view > table > tbody > tr:nth-child(1) > td > .fc-scroller-harness > .fc-scroller{
        overflow: initial !important;
    }
}

/* Lumina theme overrides. `.fc` in selectors beats FC's runtime-injected rules. */

.CalendarControl--lumina {
    --fc-page-bg-color: var(--slds-g-color-surface-1);
    --fc-border-color: var(--slds-g-color-border-1);
    --fc-today-bg-color: var(--slds-g-color-palette-blue-95);
    --fc-small-font-size: var(--slds-g-font-scale-neg-1);
    --fc-now-indicator-color: var(--slds-g-color-error-1);
    --calendar-today-header-font-color: var(--slds-g-color-accent-2);
    --calendar-font-color: var(--slds-g-color-on-surface-2);
}

/* Bottom gap painted in surface-2 (visible on iOS rubber-band). Padding on the
   scroller because FC ignores .fc padding when sizing .fc-view-harness. */
.CalendarControl--lumina .fc .fc-scroller-liquid-absolute {
    padding-bottom: var(--slds-g-spacing-4);
}

.CalendarControl--lumina .fc .fc-scrollgrid-section-liquid {
    background-color: var(--slds-g-color-surface-2);
}

.CalendarControl--lumina .fc .fc-timegrid-body {
    background-color: var(--slds-g-color-surface-1);
}

.CalendarControl--lumina .fc .fc-event {
    border-radius: var(--slds-g-radius-border-1);
}

/* Override FC's asymmetric `margin: 0 2.5% 0 2px` — centre events 2px each side. */
.CalendarControl--lumina .fc.fc-direction-ltr .fc-timegrid-col-events {
    margin-left: var(--slds-g-sizing-border-2);
    margin-right: var(--slds-g-sizing-border-2);
}

/* Focus ring inset so it doesn't overflow into the context menu. */
.CalendarControl--lumina .fc .fc-event.CalendarEvent--selected {
    box-shadow:
        inset 0 0 0 var(--slds-g-sizing-border-2) var(--slds-g-color-on-surface-2),
        inset 0 0 0 var(--slds-g-sizing-border-4) var(--slds-g-color-surface-1);
}

/* Lift selected event so its focus ring isn't clipped by overlapping siblings. */
.CalendarControl--lumina .fc .fc-timegrid-event-harness:has(> .CalendarEvent--selected) {
    z-index: 100;
}

.CalendarControl--lumina .fc .fc-daygrid-body {
    background-color: var(--slds-g-color-surface-2);
}

/* Reset all sides, then restore only the top border. */
.CalendarControl--lumina .fc .fc-scrollgrid {
    border: 0;
    border-top: var(--slds-g-sizing-border-1) solid var(--fc-border-color);
}

/* Time-axis column shares all-day grey to separate labels from day columns. */
.CalendarControl--lumina .fc .fc-timegrid-axis,
.CalendarControl--lumina .fc .fc-timegrid-slot-label {
    background-color: var(--slds-g-color-surface-2);
    border-left-style: hidden;
    border-top-style: hidden;
    border-bottom-style: hidden;
}

.CalendarControl--lumina .fc .fc-timegrid-axis-cushion {
    font-family: var(--slds-g-font-family);
    font-size: var(--slds-g-font-scale-neg-1);
    font-weight: var(--slds-g-font-weight-7);
    line-height: 14px;
    color: var(--slds-g-color-on-surface-1);
    text-align: right;
}

/* sizing-8 (28px) × 2 slots = 56px per hour line. */
.CalendarControl--lumina .fc .fc-timegrid-slot {
    height: var(--slds-g-sizing-8);
}

/* Position relative so the cushion's translateY centers on the hour line. */
.CalendarControl--lumina .fc .fc-timegrid-slot-label {
    position: relative;
}

.CalendarControl--lumina .fc .fc-timegrid-slot-label-cushion {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-50%);
    font-family: var(--slds-g-font-family);
    font-size: var(--slds-g-font-scale-neg-1);
    font-weight: var(--slds-g-font-weight-4);
    line-height: 14px;
    color: var(--slds-g-color-on-surface-1);
    text-transform: uppercase;
}

/* First row: no row above to center on — drop translate so 12:00 AM isn't clipped. */
.CalendarControl--lumina .fc .fc-timegrid-slots tbody tr:first-child .fc-timegrid-slot-label-cushion {
    transform: none;
}

.CalendarControl--lumina .fc .fc-timegrid-now-indicator-arrow {
    display: none;
}

.CalendarControl--lumina .fc .fc-timegrid-now-indicator-line {
    border-top-width: var(--slds-g-sizing-border-1);
}

/* FC's divider row adds a shaded band by default — neutralise it. */
.CalendarControl--lumina .fc .fc-timegrid-divider {
    border: 0;
    background: transparent;
    padding: 0;
}

/* Hide FC's 1px border on all-day cells — Figma uses bg transition only. */
.CalendarControl--lumina .fc .fc-daygrid-body td {
    border-bottom: 0;
}

/* slotDuration would also work but it changes event-snapping granularity. */
.CalendarControl--lumina .fc .fc-timegrid-slot-minor {
    border-top-style: hidden;
}

/* First slot row's border-top sits under all-day row as a stray separator. */
.CalendarControl--lumina .fc .fc-timegrid-slots tbody tr:first-child > td {
    border-top: 0;
}

.CalendarControl--lumina .fc .fc-timegrid-slot-label-cushion,
.CalendarControl--lumina .fc .fc-timegrid-axis-cushion {
    padding-right: var(--slds-g-spacing-2);
}

/* "+N more" popover — Figma fc-popup.css. */
.CalendarControl--lumina .fc .fc-popover {
    background: var(--slds-g-color-surface-1);
    border: 0;
    border-radius: var(--slds-g-radius-border-3);
    box-shadow:
        0 0 2px rgba(0, 0, 0, 0.18),
        0 2px 2px rgba(0, 0, 0, 0.18),
        0 -1px 2px rgba(0, 0, 0, 0.1);
}

.CalendarControl--lumina .fc .fc-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--slds-g-sizing-10);
    padding: 0 var(--slds-g-spacing-4);
    background: var(--slds-g-color-surface-1);
    border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
    border-radius: var(--slds-g-radius-border-3) var(--slds-g-radius-border-3) 0 0;
}

.CalendarControl--lumina .fc .fc-popover-title {
    font-family: var(--slds-g-font-family);
    font-size: var(--slds-g-font-scale-2);
    font-weight: var(--slds-g-font-weight-6);
    line-height: var(--slds-g-font-line-height-4);
    color: var(--slds-g-color-on-surface-1);
}

/* X is an fc-icon pseudo (sized via font-size). opacity:1 cancels FC's 0.65 fade. */
.CalendarControl--lumina .fc .fc-popover-close {
    width: 18px;
    height: 18px;
    font-size: 18px;
    font-weight: var(--slds-g-font-weight-6);
    color: var(--slds-g-color-accent-2);
    opacity: 1;
}

.CalendarControl--lumina .fc .fc-popover-body {
    display: flex;
    flex-direction: column;
    gap: var(--slds-g-spacing-1);
    padding: var(--slds-g-spacing-3) var(--slds-g-spacing-4);
}

/* Fixed row height so the inner clickable container fills the whole event. */
.CalendarControl--lumina .fc .fc-popover-body .fc-event {
    height: var(--slds-g-sizing-10);
}

.CalendarControl--lumina .fc .fc-event-dragging {
    background: var(--slds-g-color-on-surface-inverse-2);
    border: var(--slds-g-sizing-border-1) dashed var(--slds-g-color-brand-base-40);
    border-radius: var(--slds-g-radius-border-2);
    padding: var(--slds-g-spacing-1);
    color: var(--slds-g-color-surface-1);
}