/* =========================================================
   FullCalendar - Dark Section Theme using site colors
   Wrap the calendar section with: .calendar-theme-dark bg-quaternary
   (uses skin.css variables: --primary, --secondary, --tertiary, --quaternary)
   ========================================================= */

/* ---------- 0) Panel background (restore .bg-quaternary) ---------- */
/* Do NOT override .card/.card-body backgrounds in this theme—let bg-quaternary show. */
html .bg-color-quaternary,
html .bg-quaternary {
  background-color: #383f48 !important; /* original panel color */
}

/* Optional: if you want only the immediate calendar container darker, keep it: */
html .bg-color-quaternary #calendar,
html .bg-quaternary #calendar {
  background-color: #383f48 !important;
}

/* ---------- 1) Theme tokens for dark calendar ---------- */
.calendar-theme-dark {
  --cal-fg:         #FFF;                   /* primary text */
  --cal-fg-dim:     rgba(255,255,255,.82);
  --cal-fg-muted:   rgba(255,255,255,.68);
  --cal-border:     rgba(255,255,255,.12);
  --cal-muted-bg:   rgba(255,255,255,.06);  /* subtle surfaces */
  --cal-muted-bg-2: rgba(255,255,255,.08);
  --cal-outside-bg: rgba(255,255,255,.07);  /* days outside month */
  --cal-hover:      rgba(193,150,85,.16);   /* primary @ ~16% */
  --cal-primary:    var(--primary);         /* #c19655 */
  --cal-secondary:  var(--secondary);       /* #e36159 */
  --cal-tertiary:   var(--tertiary);        /* #2BAAB1 */
  --cal-quaternary: var(--quaternary);      /* #383f48 */
}

/* Let the calendar and its parents grow naturally */
.calendar-theme-dark #calendar,
.calendar-theme-dark .calendar-wrapper,
.calendar-theme-dark .porto-block,
.calendar-theme-dark .section {
  height: auto !important;
  overflow: visible !important;
}

/* Remove any internal scrollbars */
.calendar-theme-dark .fc .fc-scroller { overflow: visible !important; }

/* Borders/lines harmonized for dark bg */
.calendar-theme-dark .fc-theme-standard td,
.calendar-theme-dark .fc-theme-standard th {
  border-color: var(--cal-border) !important;
}

/* ---------- 2) Header/title/buttons ---------- */
.calendar-theme-dark .fc-toolbar-title { color: var(--cal-fg); }
.calendar-theme-dark .fc .fc-button-primary {
  background: transparent;
  border-color: var(--cal-border);
  color: var(--cal-fg);
}
.calendar-theme-dark .fc .fc-button-primary:hover {
  background: var(--cal-muted-bg);
  border-color: var(--cal-border);
  color: var(--cal-fg);
}
.calendar-theme-dark .fc .fc-button-primary.fc-button-active {
  background: var(--cal-primary);
  border-color: var(--cal-primary);
  color: #111; /* legible on gold */
}

/* Weekday header text (Sun, Mon, …) */
.calendar-theme-dark .fc .fc-col-header { background: transparent !important; }
.calendar-theme-dark .fc .fc-col-header-cell,
.calendar-theme-dark .fc .fc-col-header-cell a,
.calendar-theme-dark .fc .fc-col-header-cell-cushion,
.calendar-theme-dark .fc .fc-col-header-cell-cushion a {
  color: var(--cal-fg-dim) !important;
  text-decoration: none !important;
}
.calendar-theme-dark .fc .fc-col-header-cell-cushion:hover,
.calendar-theme-dark .fc .fc-col-header-cell-cushion a:hover,
.calendar-theme-dark .fc .fc-col-header-cell-cushion:focus,
.calendar-theme-dark .fc .fc-col-header-cell-cushion a:focus {
  color: var(--cal-fg) !important;
}

/* Kill white background from scrollgrid header/frame */
.calendar-theme-dark .fc .fc-scrollgrid,
.calendar-theme-dark .fc .fc-scrollgrid thead,
.calendar-theme-dark .fc .fc-scrollgrid .fc-scrollgrid-section-header,
.calendar-theme-dark .fc .fc-scrollgrid table {
  background: transparent !important;
  border: 0 !important; /* remove the white frame */
}

/* ---------- 3) Month grid & events ---------- */
.calendar-theme-dark .fc-daygrid-day-number { color: var(--cal-fg-muted); }

/* Remove default pill */
.calendar-theme-dark .fc-daygrid-event,
.calendar-theme-dark .fc-popover .fc-event {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Stacked layout: time → type → title */
.calendar-theme-dark .fc-daygrid .fc-event-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  color: var(--cal-fg);
}
.calendar-theme-dark .fc-daygrid .fc-event-time {
  font-weight: 700;
  font-size: 1rem;
  color: var(--cal-primary);
  margin-bottom: 2px;
}
.calendar-theme-dark .fc-daygrid .fc-event-type,
.calendar-theme-dark .fc .list-stack .fc-event-type {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--cal-fg);
  margin-bottom: 1px;
  opacity: .95;
}
.calendar-theme-dark .fc-daygrid .fc-event-title-line,
.calendar-theme-dark .fc .list-stack .fc-event-title-line {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cal-fg-dim);
}

/* Optional thumbnail card (if used) */
.calendar-theme-dark .fc-daygrid .fc-event-card { display:flex; gap:8px; align-items:flex-start; }
.calendar-theme-dark .fc-daygrid .fc-event-thumb {
  width:28px; height:28px; border-radius:4px; object-fit:cover; flex:0 0 auto; margin-right:5px;
}
.calendar-theme-dark .fc-daygrid .fc-event-meta { line-height:1.2; }
.calendar-theme-dark .fc-daygrid .fc-event-title { font-weight:600; font-size:0.85rem; color:var(--cal-fg-dim); }
.calendar-theme-dark .fc-daygrid .fc-event-sub   { font-size:0.75rem; color:var(--cal-fg-muted); }
.calendar-theme-dark .fc-daygrid .fc-event-note  { font-size:0.72rem; color:var(--cal-fg-muted); }

/* Only days outside the current month look lighter */
.calendar-theme-dark .fc-day-other { background-color: var(--cal-outside-bg); }
.calendar-theme-dark .fc-day-other .fc-daygrid-day-number { color: rgba(255,255,255,.55); }
.calendar-theme-dark .fc-day-other .fc-event { opacity: .85; }

/* DO NOT change weekends — keep identical to weekdays */
.calendar-theme-dark .fc .fc-day-sat .fc-daygrid-day-frame,
.calendar-theme-dark .fc .fc-day-sun .fc-daygrid-day-frame {
  background: none !important;
  background-image: none !important;
}

/* Equal-height day cells */
.calendar-theme-dark .fc-daygrid-day-frame { display:flex; flex-direction:column; }
.calendar-theme-dark .fc-daygrid-day-events { flex: 1 0 80px; }

/* Whole-cell hover */
.calendar-theme-dark .fc-daygrid-day.daycell-clickable { cursor:pointer; transition: background-color 120ms ease; }
.calendar-theme-dark .fc-daygrid-day.daycell-clickable:hover { background-color: var(--cal-hover); }

/* “Click for more” link */
.calendar-theme-dark .fc .click-for-more-link {
  font-size: .8rem; font-weight: 600; text-decoration: underline; cursor: pointer;
  color: var(--cal-primary);
}
.calendar-theme-dark .fc .click-for-more-link:hover { color: color-mix(in srgb, var(--cal-primary), #fff 20%); }

/* Popover */
.calendar-theme-dark .fc-popover {
  background: #1e2126; border-color: var(--cal-border); color: var(--cal-fg);
}
.calendar-theme-dark .fc-popover .fc-popover-header {
  background: var(--cal-muted-bg-2); color: var(--cal-fg); border-color: var(--cal-border);
}

/* ---------- 4) List view (mobile) ---------- */
.calendar-theme-dark .fc .fc-list-day { display: none; }           /* hide large day headers */
.calendar-theme-dark .fc .fc-list-event-dot { display: none; }     /* remove blue dot */

.calendar-theme-dark .fc .fc-list-event-time {
  width: 100px; vertical-align: top; text-align: center; padding-right: 12px;
}

/* Left badge (day-of-month + weekday) */
.calendar-theme-dark .list-date-badge {
  display:inline-flex; flex-direction:column; align-items:center; gap:4px; line-height:1;
  border-radius:8px; padding:8px; min-width:70px;
  background: var(--cal-muted-bg); color: var(--cal-fg);
}
.calendar-theme-dark .list-date-daynum { font-size:1.2rem; font-weight:800; color: var(--cal-primary); }
.calendar-theme-dark .list-date-dow   { font-size:.8rem; font-weight:600; color: var(--cal-fg-dim); }

/* Right column stack */
.calendar-theme-dark .fc .list-stack { line-height:1.25; }

/* Bold time line above title (list only) */
.calendar-theme-dark .fc .list-stack .list-time {
  font-weight:800; font-size:.95rem; margin-bottom:2px; color: var(--cal-primary);
}

/* List table + hover */
.calendar-theme-dark .fc .fc-list-table { border-color: var(--cal-border); }
.calendar-theme-dark .fc .fc-list-table td { padding:10px 12px; border-color: var(--cal-border); }
.calendar-theme-dark .fc .fc-list-table tr + tr td { border-top: 1px solid var(--cal-border); }
/* Ensure list-row hover uses theme color (not white) */
.calendar-theme-dark .fc { --fc-list-event-hover-bg-color: var(--cal-hover); }

/* Links */
.calendar-theme-dark .fc a { color: var(--cal-primary); }
.calendar-theme-dark .fc a:hover { color: color-mix(in srgb, var(--cal-primary), #fff 20%); text-decoration: underline; }

/* Today highlight */
.calendar-theme-dark .fc .fc-day-today {
  background: transparent !important;
}
.calendar-theme-dark .fc .fc-day-today .fc-daygrid-day-number {
  color: var(--cal-secondary);
  font-weight: 700;
}

/* ---------- 5) Modal (dark) ---------- */
.calendar-theme-dark .calendar-modal {
  background-color: var(--cal-quaternary, #383f48);
  color: #fff;
  border: 1px solid var(--cal-border, rgba(255,255,255,.12));
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.calendar-theme-dark .calendar-modal .modal-header,
.calendar-theme-dark .calendar-modal .modal-footer {
  background: transparent;
  border-color: var(--cal-border, rgba(255,255,255,.12)) !important;
}
.calendar-theme-dark .calendar-modal .modal-title { color: #fff; }

/* Close button visible on dark */
.calendar-theme-dark .calendar-modal .btn-close,
.calendar-theme-dark .calendar-modal .btn-close:focus {
  filter: invert(1) grayscale(100%);
  opacity: .85;
}
.calendar-theme-dark .calendar-modal .btn-close:hover { opacity: 1; }

/* Copy tones */
.calendar-theme-dark .text-light-85 { color: rgba(255,255,255,.85) !important; }
.calendar-theme-dark .text-light-70 { color: rgba(255,255,255,.70) !important; }
.calendar-theme-dark .calendar-modal .text-primary { color: var(--primary) !important; }

/* Modal image sizing */
.calendar-theme-dark .calendar-modal-img {
  width: 160px; height: 160px; object-fit: cover;
}

/* Buttons in modal */
.calendar-theme-dark .calendar-modal .btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #111;
}
.calendar-theme-dark .calendar-modal .btn-primary:hover {
  background-color: color-mix(in srgb, var(--primary), #fff 20%);
  border-color: color-mix(in srgb, var(--primary), #fff 20%);
  color: #111;
}
.calendar-theme-dark .calendar-modal .btn-outline-light {
  border-color: rgba(255,255,255,.6);
  color: #fff;
  background: transparent;
}
.calendar-theme-dark .calendar-modal .btn-outline-light:hover {
  border-color: #fff;
  background: rgba(255,255,255,.08);
}

/* Lighten modal description/notes */
#eventModalDesc,
#eventModalNotes {
  color: rgba(255, 255, 255, 0.75);
}
#eventModalDesc { margin-bottom: 0.5rem; }
#eventModalNotes { font-size: 0.9rem; }

/* Ensure modal images never overflow */
#eventModalImage {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* ---------- 6) Responsive ---------- */
@media (max-width: 575px) {
  .calendar-theme-dark .calendar-modal-img {
    width: 100%;
    height: 180px;
    margin-bottom: .5rem;
  }
}
/* --- Fix: force dark weekday header (kills white bg) --- */
.calendar-theme-dark .fc .fc-col-header,
.calendar-theme-dark .fc .fc-col-header th,
.calendar-theme-dark .fc .fc-col-header td,
.calendar-theme-dark .fc .fc-scrollgrid thead,
.calendar-theme-dark .fc .fc-scrollgrid thead .fc-scrollgrid-sync-table,
.calendar-theme-dark .fc .fc-col-header .fc-scrollgrid-sync-table {
  background: transparent !important;
}

/* Text color for weekday labels */
.calendar-theme-dark .fc .fc-col-header-cell,
.calendar-theme-dark .fc .fc-col-header-cell a,
.calendar-theme-dark .fc .fc-col-header-cell-cushion,
.calendar-theme-dark .fc .fc-col-header-cell-cushion a {
  color: var(--cal-fg-dim) !important;
  text-decoration: none !important;
}

/* Keep borders on theme token */
.calendar-theme-dark .fc-theme-standard th,
.calendar-theme-dark .fc-theme-standard td {
  border-color: var(--cal-border) !important;
}

/* Force FullCalendar page background in dark section */
.calendar-theme-dark .fc {
  --fc-page-bg-color: transparent !important;   /* or var(--cal-quaternary) */
  --fc-border-color: var(--cal-border) !important; /* keep borders consistent */
}