/*!
 * TWL Calendar — Styles (frontend + modal)
 * Version: 1.6.28
 * Notes:
 * - Provides theme in place of FullCalendar CSS.
 * - Styles ONLY custom eventContent classes: .twl-fc-time / .twl-fc-title.
 * - Month view: no internal scrollbars + remove header "scroll lane" next to Sat.
 * - Desktop: time + title on one line; Mobile month: time on line 1, title on line 2.
 */

/* =========================================================
   Base
   ========================================================= */
.twl-calendar-wrap { position: relative; }

/* =========================================================
   Front-end layout (calendar + legend)
   ========================================================= */
.twl-calendar-frontend-layout { display:flex; gap:16px; align-items:flex-start; }
.twl-calendar-frontend-main { flex:1; min-width:0; }
.twl-calendar-frontend-side { width:var(--twl-legend-width,220px); }

/* Shared "box" styling */
.twl-cal-legend-box,
.twl-cal-calendar-box{
  border-radius:16px;
  padding:12px;
  border:1px solid;
  background:#0b1220;
  border-color:#2b3340;
  color:#e5e7eb;
}
.twl-cal-legend-box{ padding:12px 12px 10px; }

/* =========================================================
   Legend
   ========================================================= */
.twl-cal-legend-title{
  margin:0 0 10px;
  font-weight:700;
  letter-spacing:.2px;
  font-size:var(--twl-legend-title-size,14px);
}
.twl-cal-legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.twl-cal-legend li{ display:flex; align-items:center; gap:10px; }
.twl-cal-legend__swatch,
.twl-cal-legend-swatch{
  width:var(--twl-legend-swatch,12px);
  height:var(--twl-legend-swatch,12px);
  border-radius:3px;
  flex:0 0 var(--twl-legend-swatch,12px);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset;
  display:inline-block;
}
.twl-cal-legend__label,
.twl-cal-legend-label{
  font-weight:700;
  opacity:.95;
  font-size:var(--twl-legend-item-size,13px);
}



/* =========================================================
   FullCalendar base theming (replaces FC CSS)
   ========================================================= */
.twl-calendar-wrap.twl-calendar-frontend .fc{
  --fc-border-color: #2b3340;
}

/* Grid background/borders */
.twl-calendar-wrap.twl-calendar-frontend .fc th,
.twl-calendar-wrap.twl-calendar-frontend .fc td,
.twl-calendar-wrap.twl-calendar-frontend .fc hr,
.twl-calendar-wrap.twl-calendar-frontend .fc tbody,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-row{
  background:#222;
  border-color:#2b3340;
}

/* Today highlight */
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-day-today{
  background:#484848 !important;
}

/* Grid hover */
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-daygrid-day:hover{
  background:rgba(255,255,255,.10);
}

/* Day number strip */
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-daygrid-day-top{
  background:#2f2f2f;
  line-height:1;
}

/* Toolbar/title */
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-toolbar-title{
  font-weight:700;
  font-size:24px;
}
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-button{ font-weight:700; }
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-popover{ background:#1f232a; }

/* Muted days outside current month */
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-daygrid-day.fc-day-other{
  opacity:0.42;
}

/* Day number */
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-daygrid-day-number{ font-weight:700; }

/* Event bars */
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-daygrid-event,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-timegrid-event{
  border-radius:7px;
  padding:2px 6px;
  margin-top:3px;
  margin-bottom:2px;
  border: 0 !important;
  box-shadow: none;
  transition: box-shadow 0.2s ease;
}
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-daygrid-event-dot{
  display:none !important;
}
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-daygrid-event:hover,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-timegrid-event:hover{
  box-shadow: 0 0 8px rgba(255, 255, 0, 0.9);
}

/* =========================================================
   Custom eventContent layout (your actual DOM)
   ========================================================= */
/* Desktop: time + title on one line, aligned */
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-daygrid-event,
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timegrid-event{
  display:flex !important;
  align-items:baseline !important;
  gap:8px !important; /* space between time and title */
  min-width:0 !important;
}

/* Time: not bold */
.twl-calendar-wrap.twl-calendar-frontend .fc .twl-fc-time{
  flex:0 0 auto !important;
  font-weight:400 !important;
  font-size:13px;
  line-height:1.15;
  white-space:nowrap !important;
}

/* Title: single line with ellipsis */
.twl-calendar-wrap.twl-calendar-frontend .fc .twl-fc-title{
  flex:1 1 auto !important;
  min-width:0 !important;
  font-weight:700;
  font-size:13px;
  line-height:1.15;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* =========================================================
   Month view: FINAL scrollbar removal (KNOWN GOOD)
   ========================================================= */
/* Allow page to scroll normally (outer wrappers) */
.twl-cal-calendar-box,
.twl-calendar-frontend-main,
.twl-calendar-wrap.twl-calendar-frontend{
  height:auto;
  max-height:none;
  overflow:visible;
}

/* Kill month scrollers AND scrollbar gutter */
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-dayGridMonth-view .fc-scroller,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-dayGridMonth-view .fc-scroller-harness{
  overflow: hidden !important;
}

/* Don’t reserve space for a scrollbar lane */
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-dayGridMonth-view .fc-scroller{
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* old Edge */
  scrollbar-gutter: auto !important; /* avoid “stable” gutters */
}
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-dayGridMonth-view .fc-scroller::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}

/* Let the month grid expand naturally */
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-dayGridMonth-view .fc-daygrid-body,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-dayGridMonth-view .fc-daygrid-body-balanced,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-dayGridMonth-view .fc-scrollgrid-section-body,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-dayGridMonth-view .fc-view-harness,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-dayGridMonth-view .fc-view-harness-active{
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}

/* Header scroller lane fix (block next to Sat) */
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-dayGridMonth-view
.fc-scrollgrid-section-header .fc-scroller,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-dayGridMonth-view
.fc-scrollgrid-section-header .fc-scroller-harness{
  overflow: hidden !important;
  height: auto !important;
  max-height: none !important;
}

/* =========================================================
   TimeGrid (week/day): keep FC’s internal scrolling
   ========================================================= */
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timegrid-body .fc-scroller{
  overflow:auto; /* FC default */
}

/* =========================================================
   Modal (unchanged)
   ========================================================= */
.twl-cal-modal{ display:none; }
.twl-cal-modal.is-open{ display:block; }
body.twl-cal-modal-open{ overflow:hidden; }

.twl-cal-modal__backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.65);
  z-index:2147483646;
}
.twl-cal-modal__panel{
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(960px, calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  overflow:auto;
  background:#1f232a;
  color:#e9eef5;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:22px 22px 18px;
  z-index:2147483647;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
}
.twl-cal-modal__close{
  position:absolute; top:10px; right:12px;
  width:54px; height:54px;
  border-radius:27px;
  border:2px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.15);
  color:#fff;
  font-size:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  cursor:pointer;
}
.twl-cal-modal__close:hover{ filter:brightness(1.08); }
.twl-cal-modal__content img{
  max-width:100%;
  height:auto;
  max-height:55vh;
  object-fit:contain;
}

.twl-cal-detail__datetime{ margin:0 0 8px; font-size:20px; line-height:1.2; }
.twl-cal-detail__title{ font-size:18px; font-weight:600; margin:0 0 10px; opacity:.95; }
.twl-cal-detail__cat{ opacity:.9; margin-top:4px; font-weight:600; }
.twl-cal-detail__time{ margin:6px 0 12px; opacity:.95; font-weight:600; }
.twl-cal-detail__desc{ opacity:.98; }
.twl-cal-detail__desc a{ color:#9fd0ff; }
.twl-cal-detail__notesbox{
  margin-top:14px;
  padding:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(0,0,0,.18);
}
.twl-cal-detail__img{
  float:left;
  margin:0 16px 12px 0;
  max-width:360px;
}
.twl-cal-detail__img img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
}
.twl-cal-detail::after{
  content:"";
  display:block;
  clear:both;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px){
  .twl-calendar-frontend-layout{ flex-direction:column; }
  .twl-calendar-frontend-side{ width:100%; }
}

/* MOBILE: month view drops title to next line */
@media (max-width: 640px){
  .twl-calendar-wrap.twl-calendar-frontend
  .fc .fc-dayGridMonth-view .fc-daygrid-event{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:2px !important;
  }
  .twl-calendar-wrap.twl-calendar-frontend
  .fc .fc-dayGridMonth-view .twl-fc-title{
    width:100% !important;
  }
  .twl-calendar-wrap.twl-calendar-frontend .fc .twl-fc-time,
  .twl-calendar-wrap.twl-calendar-frontend .fc .twl-fc-title{
    font-size:12px;
  }
  .twl-calendar-wrap.twl-calendar-frontend .fc .fc-daygrid-event{
    padding:2px 5px;
  }
  .twl-cal-detail__img{
    float:none;
    max-width:100%;
    margin:0 0 12px 0;
  }
}

/* =========================================================
   Tooltip (JS-created) — styled, on top, not clipped
   ========================================================= */
.twl-fc-tooltip{
  position: fixed;
  z-index: 9999999;
  max-width: min(520px, calc(100vw - 20px));
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.35);
  color: #fff;
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
  pointer-events: none;
  font-weight: 600;
  line-height: 1.15;
  /* fallback background if JS doesn't set one */
  background: rgba(20,20,24,.96);
  backdrop-filter: blur(2px);
}
.twl-fc-tooltip:before{
  content:"";
  position:absolute;
  width: 12px;
  height: 12px;
  top: -6px;
  transform: rotate(45deg);
  background: inherit;
  border-left: 2px solid rgba(255,255,255,.35);
  border-top: 2px solid rgba(255,255,255,.35);
  left: 18px; /* default caret position */
}
.twl-fc-tooltip.is-right:before{
  left: auto;
  right: 18px;
}

/* Month containers often clip overlays — let overlays show */
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-daygrid-day-events,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-daygrid-event-harness,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-daygrid-day-frame{
  overflow: visible !important;
}

/* =========================================================
   TimeGrid (week/day) event text rules — readable wrapping
   ========================================================= */
/* Hide time in week/day (timeGrid) */
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-timeGridWeek-view .twl-fc-time,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-timeGridDay-view .twl-fc-time{
  display: none !important;
}
/* Allow title to wrap and stay inside event box */
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-timeGridWeek-view .twl-fc-title,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-timeGridDay-view .twl-fc-title{
  display: block !important;
  white-space: normal !important;  /* allow wrapping */
  overflow: hidden !important;     /* keep inside event box */
  text-overflow: clip !important;  /* no ellipsis when wrapping */
  line-height: 1.15 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
}
/* Ensure FC wrappers don’t force single-line layout in timeGrid */
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-timeGridWeek-view .fc-event-main-frame,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-timeGridDay-view  .fc-event-main-frame,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-timeGridWeek-view .fc-event-main,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-timeGridDay-view  .fc-event-main{
  min-width: 0 !important;
}
/* Slight padding tweak so wrapped titles have room (week/day only) */
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-timeGridWeek-view .fc-timegrid-event,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-timeGridDay-view  .fc-timegrid-event{
  padding-right: 2px;
}

/* Limit titles to 2 lines in week/day (stable) */
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timeGridWeek-view .twl-fc-title,
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timeGridDay-view  .twl-fc-title{
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* <-- 2 lines max */
  overflow: hidden !important;
  text-overflow: ellipsis;
  line-height: 1.15;
  max-height: calc(2 * 1.15em);
}

/* Mobile: same rule */
@media (max-width: 640px){
  .twl-calendar-wrap.twl-calendar-frontend
  .fc .fc-timeGridWeek-view .twl-fc-title,
  .twl-calendar-wrap.twl-calendar-frontend
  .fc .fc-timeGridDay-view  .twl-fc-title{
    -webkit-line-clamp: 2;
  }
}

/* =========================================================
   TimeGrid tooltip stacking — keep tooltip above overlaps
   ========================================================= */
/* Allow overlays */
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timegrid-col-events,
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timegrid-event-harness{
  overflow: visible !important;
}
/* Raise hovered event */
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timegrid-event-harness:hover{
  z-index: 99998 !important;
}
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timegrid-event:hover{
  z-index: 99999 !important;
}

/* Elevate hovered event’s whole day column (modern :has support) */
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timegrid-col-events:has(.fc-timegrid-event:hover){
  position: relative;
  z-index: 99990 !important;
}

/* Tooltip element should be highest */
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timegrid-event a.fc-event[data-twl-tip]::after,
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timegrid-event a.fc-event[data-twl-tip]::before{
  z-index: 100000 !important;
}

/* =========================================================
   TimeGrid rounding: hide 1–2px “ghost” scrollbars (no month changes)
   ========================================================= */
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timeGridWeek-view .fc-scroller,
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timeGridDay-view  .fc-scroller{
  overflow-y: hidden !important;  /* kill the almost-empty vertical scrollbar */
  overflow-x: hidden !important;
  scrollbar-width: none;          /* Firefox */
}
/* Chrome/Safari scrollbar hide */
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timeGridWeek-view .fc-scroller::-webkit-scrollbar,
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timeGridDay-view  .fc-scroller::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}
/* Don’t reserve gutter space */
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timeGridWeek-view .fc-scroller,
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timeGridDay-view  .fc-scroller{
  scrollbar-gutter: auto !important;
}
/* Optional tiny buffer to avoid 1px clip */
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timeGridWeek-view .fc-timegrid-body,
.twl-calendar-wrap.twl-calendar-frontend
.fc .fc-timeGridDay-view  .fc-timegrid-body{
  padding-bottom: 2px;
  box-sizing: content-box;
}

/* =========================================================
   Year view (multiMonthYear)
   ========================================================= */

/* Keep cells compact and avoid showing internal event stacks */
.twl-calendar-wrap.twl-calendar-frontend .fc-multimonth .fc-daygrid-day-frame{
  min-height: 22px;
}

.twl-calendar-wrap.twl-calendar-frontend .fc-multimonth .fc-daygrid-day-events{
  display: none;
}

/* Heat indicator: subtle fill when a day has one+ events */
.twl-calendar-wrap.twl-calendar-frontend .fc-multimonth .fc-daygrid-day.twl-has-events{
  position: relative;
}

.twl-calendar-wrap.twl-calendar-frontend .fc-multimonth .fc-daygrid-day.twl-has-events::before{
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 6px;
  background: var(--twl-day-heat, rgba(255,255,255,0.15));
  opacity: 0.28;
  pointer-events: none;
}

/* Small count badge */
.twl-calendar-wrap.twl-calendar-frontend .fc-multimonth .fc-daygrid-day.twl-has-events::after{
  content: attr(data-twl-count);
  position: absolute;
  right: 4px;
  bottom: 4px;
  font-size: 10px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.15);
  color: #e5e7eb;
  pointer-events: none;
}

/* Tooltip formatting for multi-line lists */
.twl-fc-tooltip.twl-fc-tooltip--year{
  white-space: pre-line;
}