/* CSS Document */
/* =========================================
   GLOBAL RESET
   ========================================= */
:root {
	--backgroundCalendar: var( --themeColourWhiter10 );
	--colorCalendar: var( --themeColourDarker90 );

	--backgroundMonth: var( --themeColourWhiter20 );

	
	--backgroundCalendarTitle: var( --themeColourWhiter80 );
	--backgroundTitle: var( --themeColourWhiter50 );
	--colorTitle: var( --white );

	--backgroundHeader: var( --themeColourWhiter30 );
	--colorHeader: var( --greyDim );

	--backgroundWeekNumber: var( --themeColourWhiter30 );
	--colorWeekNumber: var( --greyDim );

	--backgroundDays: var( --white );
	--colorDays: var( --themeColourDarker90 );

	--backgroundToday: var( --themeColourWhiter10 );
	--colorToday: var( --themeColourDarker90 );

	--backgroundOther: var( --greyGhost );
	--colorOther: var( --greyLighter );

	--backgroundWeekends: var( --greySmoke );
	--colorWeekends: var( --greyDim );

	--backgroundAdd: var( --greyLight );
	--colorAdd: var( --white );

	--backgroundAddHover: var( --themeColour );
	--colorAddHover: var( --white );

	--colorEdit: var( --greyLight );
	--backgroundEditHover: var( --themeColour );
	--colorEditHover: var( --white );

	--backgroundAppointment: var( --themeColour ); /* Red */
	--backgroundBooking: #2ECC71; /* green */ 
	--backgroundEvent: #F1C40F; /* yellow */
	--backgroundPublicHoliday: #899AC3; /* blue */ 

	--colorDisabled: var( --greyLight );
  }

/* =========================================
   OVERALL CALENDAR WRAPPER
   ========================================= */
.calendar {
  container-type: inline-size;
  container-name: calendarCell;

  min-width: 20rem;
  /*max-width: 75rem;*/
  margin: auto;
  background: var( --backgroundCalendar , #FFFFFF );
  box-shadow: 0 0 0.9375rem rgba(0,0,0,0.1);
  overflow: hidden; 
  padding: 1.25rem;
  color: var( --colorCalendar , #000000 );
  }
/* TITLE */
.cTitle ,
.cMonthTitle {
  position: relative;         /* so we can absolutely position arrows */
  display: flex;
  align-items: center;
  justify-content: center;    /* always center the text */
  
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.1875rem;
  border-radius: 0.625rem 0.625rem 0 0;
  padding: 0.5em;
  text-align: center;
  
  color: var( --colorTitle , #FFFFFF );
  }
.cTitle {
  background: var( --backgroundCalendarTitle , #dcdde1 );
  }
.cMonthTitle {
  background: var( --backgroundTitle , #dcdde1 );
  }

.cMonthTitle .cPrevious {
  left: 0.5em;  /* distance from left edge */
}
.cMonthTitle .cNext {
  right: 0.5em; /* distance from right edge */
}
.cMonthTitle .cPrevious,
.cMonthTitle .cNext {
  position: absolute; /* position relative to cMonthTitle */
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  user-select: none;
  font-size: 1.5em;

  padding: 0.2em 0.4em;        /* space around arrow */
  border-radius: 0.25em;       /* optional rounding */
  background: var(--backgroundTitle, #dcdde1); /* background for shadow */

  /* New: smooth fade */
  opacity: 1;                  /* visible by default */
  transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Hidden state */
.cTitle.cHidden ,
.cMonthTitle .cPrevious.cHidden,
.cMonthTitle .cNext.cHidden {
  opacity: 0;
  pointer-events: none;        /* prevents click when hidden */
  transform: translateY(-1rem); /* optional: slide a bit */

  visibility: hidden;

  max-height: 0;
  max-width: 0;
  margin: 0;
  padding: 0; /* optional */
}
.cMonthTitle .cPrevious:hover,
.cMonthTitle .cNext:hover {
  color: var( --backgroundCalendarTitle , #dcdde1 );
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
  /*text-shadow: 0 2px 4px rgba(0,0,0,0.3);*/
}
.cMonthTitle .disabled {
  pointer-events: none;       /* prevent clicks */
  color: var(--colorDisabled, #aaa); /* change color */
  box-shadow: none;           /* remove shadow */
}

/* ===============================
   Calendar Radio Bubbles
   =============================== */
.calendar-tabs input[type="radio"], .service-tabs-css input[type="checkbox"] {
    display: none;
}
.calendar-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: calc( 0.6rem * var( --ui-scale , 1 ) );
  padding: calc( 0.6rem * var( --ui-scale , 1 ) ) 0;
}
.calendar-tabs .cal-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;

  padding:
    calc(0.6rem * var(--ui-scale,1))
    calc(1.25rem * var(--ui-scale,1));

  border-radius: 2rem;
  background: #fff;
  color: var(--themeColour);
  border: 1px solid rgba(194,106,122,0.3);

  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;

  transition:
    background-color 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.calendar-tabs .cal-tab:hover {
  background: rgba(194,106,122,0.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* icon size & color */
.calendar-tabs .cal-tab .cal-icon {
  width: var(--ui-icon-size, 1.1em);
  height: var(--ui-icon-size, 1.1em);
  fill: currentColor;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.calendar-tabs .cal-tab:hover .cal-icon {
  transform: scale(1.1) rotate(-12deg);
}

.calendar-tabs input:checked + .cal-tab {
  background: var(--themeColour);
  color: #fff;
  border-color: var(--themeColour);
  box-shadow: 0 6px 18px rgba(194,106,122,0.35);
}

.calendar-tabs input:checked + .cal-tab .cal-icon {
  transform: scale(1.15);
}
.calendar-tabs svg {
    width: var(--ui-icon-size);
    height: var(--ui-icon-size);
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}


/* =========================================
   GRIDS
   ========================================= */
.grid.gMonths {
  height: unset;
  --gMonthsEffective: var(--gMonthsOverride, var(--gMonths, 3));
  grid-template-columns: repeat(var(--gMonthsEffective), 1fr);
  grid-template-rows: auto;
  gap: 0.125rem;
}
.grid.gDays {
  --cellWidth: 2.25rem;        /* size of the wk column */
  height: unset;
  grid-template-columns:
	repeat( var( --gDays , 0 ) , minmax( var( --cellWidth ) , 1fr ) );
  grid-template-rows: auto;
  gap: 0.125rem;
}
.grid.gDays.gBefore {
  grid-template-columns:
    var( --cellWidth )
	repeat( var( --gDays , 0 ) , 1fr  );
}
.grid.gDays.gAfter {
  grid-template-columns:
	repeat( var( --gDays , 0 ) , 1fr  )
	var( --cellWidth );
}

/* =========================================
   MONTH
   ========================================= */
.cMonth {
  container-type: inline-size;
  container-name: monthCell;

  min-width: 19rem;
  border-radius: 0.625rem;
  font-size: 1rem;
  background: var( --backgroundMonth , #dcdde1 );
  padding-bottom: 1.0em;

  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 1s ease,
    transform 1s ease,
    max-height 1s ease,
    margin 1s ease,
    padding 1s ease;
}
/* hidden state */
.cMonth.cHidden {
  opacity: 0;
  transform: translateX(-2rem);
  pointer-events: none;
  visibility: hidden;

  max-height: 0;
  max-width: 0;
  margin: 0;
  padding: 0; /* optional */
}
.grid.gMonths:has( .cMonth.cHidden ) {
    gap: 0;
}
/* HEADER */
.cHeader {
  text-align: center;
  font-weight: bold;
  background: var( --backgroundHeader , #dcdde1 );
  color: var( --colorHeader , #FFFFFF );
  font-size: 0.875em;
  margin-bottom: 0.1875rem;
  padding: 0.0625em;
  }

/* BOX */
.cBox {
  container-type: inline-size;
  container-name: dayCell;

  text-align: center;
  border-radius: 0.1875rem;
  padding: 0.25em 0.5em;
  position: relative;
  }

/* =========================================
   DAYS
   ========================================= */
.cDays {
  text-align: center;
  /*border-radius: 0.25em;*/
  z-index: 1;
  }
/* DAY */
.cDays .cBox {
/*
  container-type: inline-size;
  container-name: dayCell;
*/
  --matchingDayBckg: var( --backgroundDays , #FFFFFF );
  background: var( --matchingDayBckg , #FFFFFF );
  cursor: pointer;
  min-width: 0;

  border: 0.0125rem solid var( --matchingDayBckg , #CCCCCC );
  box-shadow: 0 0 0.9375rem var( --matchingDayBckg , #CCCCCC );
  }
/*
.cDays .cBox:has( .cEvent ) {
  padding-bottom: 1.75em;
  }
*/
.cDays .cBox:hover:not( .cWeekNumber ):not( .cOther ) {
  /*background: var( --backgroundDays , #FFFFFF );*/
  color: var( --themeColour , #FFFFFF );
  border: 0.0125rem solid var( --themeColour050 , #CCCCCC );
  box-shadow: 0 0 0.9375rem var( --themeColour050 , #CCCCCC );
  z-index: 2;
  }
/* DAY NUMBER */
.cDays .cBox.cDayNumber {
  }

/* WEEKS NUMBER */
.cDays .cBox.cWeekNumber {
  --matchingDayBckg: var( --backgroundWeekNumber , #FFFFFF );
  --matchingDayColour: var( --colorWeekNumber , #FFFFFF );

  background: var( --matchingDayBckg );
  color: var( --colorWeekNumber , #FFFFFF );
  cursor: auto; 
  }

/* WEEKENDS */
.cDays .cBox:has( .publicHoliday ) ,
.cDays .cBox[ col="Sat" ] ,
.cDays .cBox[ col="Sun" ] {
  --matchingDayBckg: var( --backgroundWeekends , #FFFFFF );
  background: var( --matchingDayBckg );
  color: var( --colorWeekends , #FFFFFF );
  /*cursor: pointer; */
  }

/* OTHER MONTH */
.cDays .cBox.cOther {
  --matchingDayBckg: var( --backgroundOther , #FFFFFF );
  background: var( --matchingDayBckg );
  color: var( --colorOther , #FFFFFF );
  cursor: auto; 
  }

/* Today */
.cDays .cBox.cToday {
  --matchingDayBckg: var( --backgroundToday , #FFFFFF );
  --matchingDayColour: var( --colorToday , #FFFFFF );

  background: var( --matchingDayBckg );
  border: 0.0125rem solid var(--themeColour050, #CCCCCC);
  }
.cDays .cBox.cToday .cDayNumber {
  font-weight: bold;
  }

/* ADD */
.cDays .cBox .cAdd  {
  --addSize: 1.0em;

  position: absolute;
  right: 0.375rem;
  /*bottom: 0.375rem;*/
  top: 0.375rem;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  width: var( --addSize );
  height: var( --addSize );

  line-height: var( --addSize );
  font-size: var( --addSize );
  font-weight: bold;

  background: var( --backgroundAdd );
  color:  var( --colorAdd );

  opacity: 1; /* keep fully opaque, control visibility with transform */
  transform: scale( 0 );
  transition: opacity 0.35s ease, transform 0.5s ease;
  
  cursor: pointer;

  z-index: 5;
  }
/* ADD show on hover*/
.cBox:hover .cAdd {
  opacity: 0.7;
  transform: scale( 1 );
  z-index: 6;
}
/* ADD ToolTip*/
.cAdd::after {
  content: "Add an event to your calendar ";
  position: absolute;
  top: 1.5em;
  right: 0;

  padding: 0.125rem 0.375rem;
  margin: 0 calc( var( --addSize , 1.5rem ) / 2 );
  border-radius: 0.25rem;

  font-size: 0.75rem;
  white-space: nowrap;

  background: var( --backgroundAddHover );
  color:  var( --colorAddHover );

  opacity: 0; /* hidden initially */
  transform: scale( 0.5 );
  transition: opacity 0.35s ease, transform 1.0s ease;
  
  pointer-events: none;
  z-index: 7;
}

.cAdd:hover::after {
  opacity: 1;
  transform: scale( 1.0 );
  z-index: 7;
}

.cDays .cBox .cAdd:hover {
  background: var( --backgroundAddHover );
  color:  var( --colorAddHover );
  transform: scale( 1.25 );
}

/* =========================================
   EVENTS
   ========================================= */
.cEvent.booking {
  --matchingEventBckg: var( --backgroundBooking );
  --matchingEventColour: #FFFFFF;
  background: var( --matchingEventBckg );
  color: var( --matchingEventColour );
  }
.cEvent.appointment {
  --matchingEventBckg: var( --backgroundAppointment );
  --matchingEventColour: #FFFFFF;
  background: var( --matchingEventBckg );
  color: var( --matchingEventColour );
  }
.cEvent.event {
  --matchingEventBckg: var( --backgroundEvent );
  --matchingEventColour: #FFFFFF;
  background: var( --matchingEventBckg );
  color: var( --matchingEventColour );
  }
.cEvent.publicHoliday {
  --matchingEventBckg: var( --backgroundPublicHoliday );
  --matchingEventColour: #FFFFFF;
  background: var( --matchingEventBckg );
  color: var( --matchingEventColour );
  }
.cEvent {
  position: relative;

  --matchingEventBckg: var( --custonBackground , var( --matchingDayBckg ) );
  --matchingEventColour: var( --colorToday , #FFFFFF );
  background: var( --matchingEventBckg );
  /*color: var( --colorOther , #FFFFFF );*/
  /*padding: 0.185em 1.5em 0.185em 0.375em ;*/
  padding: 0.185em 1.5em 0.185em 0.75em ;
  margin-bottom: 0.25em;

  max-width: 100%;

  font-size: 0.75em;
  border-radius: 0.25em;

  transform: scale( 1 );
  opacity: 1;

  transition:
    transform 500ms ease,
    opacity 400ms ease,
    max-height 500ms ease,
    padding 400ms ease,
    border-radius 500ms ease;
  /*transform-origin: top center;*/

  cursor: auto; 
  border: 0.0125rem solid var( --matchingDayBckg , #CCCCCC );
  box-shadow: 
	0 0 0 1px var( --matchingDayBckg , #CCCCCC ),   /* sharp ring */
	0 0 0.5rem var( --matchingDayBckg , #CCCCCC ); /* soft glow */  
  z-index: 3;
  }

.cEvent > * {
  opacity: 1;
  transform: scale(1);
}

.cEvent:hover {
  border: 0.0125rem solid var( --matchingEventBckg , #CCCCCC );
  box-shadow: 0 0 0.9375rem var( --matchingEventBckg , #CCCCCC ); 
  z-index: 4;
  }
.cEvent .cEventTitle {
  display: block;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  max-width: 100%;
  font-size: 1rem;
  font-weight: bold;
}
.cEvent .cEventDescription ,
.cEvent .cEventTimeWrapper {
  font-size: 0.9rem;
}

/* EDIT */
.cEdit span {
  display: inline-block;
  transform: scaleX( -1 );
   font-size: 0.8rem;
}
.cEvent .cEdit  {
  --editSize: 1.0em;

  position: absolute;
  right: 0.375rem;
  bottom: 0.375rem;

  width: var( --editSize );
  height: var( --editSize );
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: var( --editSize );
  font-weight: bold;

  /*background: var( --backgroundEdit );*/
  color:  var( --colorEdit );

  /*opacity: 1; *//* keep fully opaque, control visibility with transform */
  /*transform: scale( 0.75 );*/
  /*transition: opacity 0.35s ease, transform 1.0s ease;*/
  
  cursor: pointer;

  z-index: 5;
  }

/* EDIT show on hover*/
/*
.cEvent:hover .cEdit {
  opacity: 1;
  transform: scale( 1 );
}
*/
/* EDIT ToolTip*/
.cEvent .cEdit::after {
  content: "Edit this event ";
  position: absolute;
  top: 1.5em;
  right: 0;

  padding: 0.125rem 0.375rem;
  margin: 0 calc( var( --editSize , 1.5rem ) / 2 );
  border-radius: 0.25rem;

  font-size: 0.75rem;
  white-space: nowrap;

  background: var( --matchingEventBckg );
  color:  var( --matchingEventColour );

  opacity: 0;        /* hidden initially */
  transform: scale( 0.5 );
  transition: opacity 0.35s ease, transform 1.0s ease;
  
  pointer-events: none;
  z-index: 6;
}

.cEvent .cEdit:hover::after {
  opacity: 1;
  transform: scale( 1.0 );
}

.cEvent .cEdit:hover {
  /*background: var( --backgroundEditHover );*/
  color:  var( --colorEditHover );
  transform: scale( 1.25 );
}

/* =========================================
   CONTAINER QUERIES – CALENDAR CELL
   ========================================= */
@container calendarCell ( max-width: 640px ) {
  .grid.gMonths {
    --gMonths: 1 ;
  }
}

@container calendarCell ( min-width: 640px ) and ( max-width: 1200px ) {
  .grid.gMonths {
    --gMonths: 2;
  }
}


/* =========================================
   CONTAINER QUERIES – MONTH CELL
   ========================================= */
@container monthCell ( max-width: 420px ) {
  .cDays .cBox {
	padding: 0.125em 0.125em;
	}
}

/* =========================================
   CONTAINER QUERIES – DAY CELL
   ========================================= */
/* show a dot */

@container dayCell ( max-width: 40px ) {

  .cDays .cBox .cAdd  {
	right: -0.375rem;
	}
}
@container dayCell ( max-width: 110px ) {

  .cEvent {
    position: relative;

    display: inline-flex;
	justify-content: center;  /* horizontal center */
	align-items: center;      /* vertical center */
	vertical-align: middle;   /* in case inline-flex */

    width: 0.75rem;
    height: 0.75rem;

    padding: 0;
    margin-bottom: 0.125rem;

    border-radius: 50%;

    opacity: 0.85;
    transform: scale( 0.75 );
  }
  .cEvent:hover {
	box-shadow: 
	  0 0 0 1px var( --matchingEventBckg , #CCCCCC),   /* sharp ring */
	  0 0 0.5rem var( --matchingEventBckg , #CCCCCC); /* soft glow */
  }

  /* invisible hover target */
/**/
  .cEvent::before {
	content: '';
	position: absolute;

	/* bigger hit area */
	inset: 0.125rem;        
	/* above other dots */
	z-index: 4;             

	cursor: pointer;
  }
/**/
  /* hide all children */
  .cEvent > * {
    max-height: 0;

    overflow: hidden;

    opacity: 0;
    transform: scale( 0.75 );
    transition: opacity 300ms ease, transform 300ms ease;
	transform-origin: top center; /* make scale grow from top */
  }

  /* Title on top */
  .cEvent .cEventTitle {
	overflow: hidden;
	display: block;

	/* adjust vertical position above the dot */
	top: 0.75rem;
	/* left: 50%; centers it */
	/*left: 50%;*/

	padding: 0.25em 0.75em;

	opacity: 0;
	transform: translateX( -50% ) scale( 0.8 );
	transform-origin: top center;

	font-size: 1.25rem;
	font-weight: bold;
	white-space: nowrap;
	text-align: center;
	color: var( --matchingEventColour );

	background: var( --matchingEventBckg );
	border-radius: 0.25em;
	z-index: 5;
  }

  /* Wrapper for start/end times */
  .cEvent:not( .allDay ) .cEventTimeWrapper {
    position: absolute;

	display: flex;           /* side by side */
    /*gap: 0.25em;*/             /* space between start/end */

    top: 2.2rem;                  /* below title */
	min-width: fit-content;
	/* left: 50%; centers it */
	/*left: 50%;*/

    opacity: 0;
	transform: translateX( -50% ) scale( 0.8 );
	transform-origin: top center;

    pointer-events: none;
    z-index: 5;
  }


  /* Add a dash between start and end times */
  .cEvent:not( .allDay ) .cEventTimeWrapper .cEventStartTime::after {
	content: " - ";       /* note the space before the dash */
	margin: 0 0.5em; /* optional spacing */
	font-weight: normal;  /* optional styling */
	color: var( --matchingEventColour ); /* same color as times */
  }

  /* Start & End times side by side, below the title */
  .cEvent:not( .allDay ) .cEventTimeWrapper .cEventStartTime,
  .cEvent:not( .allDay ) .cEventTimeWrapper .cEventEndTime {
    display: inline-flex;

	font-size: 1.1rem;
    line-height: 1.2;
    white-space: nowrap;
    color: var( --matchingEventColour );

    background: var( --matchingEventBckg );
    padding: 0.125em 0.25em;
    border-radius: 0.25em;
  }
  /* SHOW all on hover / focus */
  .cEvent:hover .cEventTitle,
  .cEvent:focus-visible .cEventTitle,
  .cEvent:hover .cEventTimeWrapper,
  .cEvent:focus-visible .cEventTimeWrapper {
    position: absolute;

    max-height: 2em;
	min-width: fit-content;

	opacity: 1;
    transform: translateX( -50% ) scale( 1 );
	transform-origin: top center;
  }

  .cEvent .cEventTimeWrapper .cEventStartDate,
  .cEvent .cEventTimeWrapper .cEventEndDate {
    opacity: 0;
	overflow: hidden;
	display: none;
  }
}


@container dayCell ( min-width: 110px ) and ( max-width: 200px ) {

  .cEvent .cEventTitle {
    display: block;
  }

  .cEvent .cEventStartTime , 
  .cEvent .cEventEndTime {
	display: inline-flex;
  }

  /* hide things */

  .cEvent .cEventStartDate ,
  .cEvent .cEventEndDate ,
  .cEvent .cEventDescription {
	opacity: 0;
	transform: scale( 0 );
	transition: opacity 500ms ease, transform 500ms ease;
	display: none;
  }

  /* Add a dash between start and end times */
  .cEvent:not( .allDay ) .cEventTimeWrapper .cEventStartTime::after {
	content: " - ";       /* note the space before the dash */
	margin: 0 0.5em; /* optional spacing */
	font-weight: normal;  /* optional styling */
	color: var( --matchingEventColour ); /* same color as times */
  }

}


@container dayCell ( min-width: 200px ) {

  .cEvent .cEventTimeWrapper {
    display: grid;
    grid-template-columns: auto auto;  /* 2 items per row */
    grid-template-rows: auto auto;     /* 2 rows */
    gap: 0.25rem 0.25rem;               /* row-gap column-gap */
    justify-content: left;           /* center horizontally */
    align-items: center;               /* vertical alignment */
  }

  /* cEvent:not( .publicHoliday ) */
  .cEvent .cEventStartDate,
  .cEvent .cEventStartTime,
  .cEvent .cEventEndDate,
  .cEvent .cEventEndTime {
    display: block;      /* grid items should be block */
    opacity: 0.9;
    text-align: center;  /* optional for better alignment */
  }

  /* Optional: make the “Start” row first, “End” row second */
  .cEvent .cEventStartDate { grid-column: 1; grid-row: 1; }
  .cEvent .cEventStartTime { grid-column: 2; grid-row: 1; }
  .cEvent .cEventEndDate { grid-column: 1; grid-row: 2; }
  .cEvent .cEventEndTime { grid-column: 2; grid-row: 2; }
}



@container dayCell ( min-width: 260px ) {

  .cEvent .cEventDescription {
    display: block;
    font-size: 1rem;
    opacity: 0.9;
  }

  .cEvent {
    padding-right: 2em;
  }
}