/*!
 * TWL Calendar — Styles (frontend + modal)
 * Version: 1.6.31
 * 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);
}
.twl-cal-legend-login{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.14);
}

.twl-cal-legend-login .button {
    display:inline-block;
    background:#1f232a;
    color:#e5e7eb;
    border:1px solid rgba(255,255,255,.25);
    border-radius:8px;
    padding:8px 14px;
    font-weight:600;
    text-decoration:none;
    transition:background .2s ease;
}
.twl-cal-legend-login .button:hover {
    background:#2b3340;
}


/* =========================================================
   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;
}

/* FullCalendar's month-view wrappers can otherwise keep all-day bars from shrinking,
   which prevents ellipsis from kicking in for spanning/public events. */
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-daygrid-event .fc-event-main,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-daygrid-event .fc-event-main-frame,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-daygrid-event .fc-event-title-container,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-daygrid-event .fc-sticky{
  min-width:0 !important;
  max-width:100% !important;
}

.twl-calendar-wrap.twl-calendar-frontend .fc .fc-daygrid-event .fc-event-main,
.twl-calendar-wrap.twl-calendar-frontend .fc .fc-daygrid-event .fc-event-main-frame{
  display:flex !important;
  align-items:baseline !important;
  gap:8px !important;
  overflow:hidden !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%);
  /* Keep modal comfortably sized on desktop (theme CSS can sometimes blow this out) */
  width:min(860px, calc(100vw - 80px)) !important;
  max-width:860px !important;
  max-height:calc(100vh - 80px) !important;
  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);
  box-sizing:border-box;
}
.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:45vh;
  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);
}

/* Detail layout: desktop image left, text right (avoid theme float conflicts) */
.twl-cal-detail__layout{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.twl-cal-detail__img{
  float:none;
  margin:0;
  flex:0 0 360px;
  max-width:360px;
}
.twl-cal-detail__img img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
}
.twl-cal-detail__desc{
  flex:1 1 auto;
  min-width:0;
}
.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{
    flex:0 0 auto;
    max-width:100%;
  }
  .twl-cal-detail__layout{
    flex-direction:column;
  }
}

/* =========================================================
   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;
}