/* Event Calenter - Professional Mobile Friendly Styling */

/* Calendar card enhancements */
.card .calendar-container,
.calendar-container,
.card .ratio.ratio-16x9 {
    position: relative;
    width: 100% !important;
    height: auto !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
}

.calendar-container {
    overflow: hidden !important;
}
/* Ensure the FullCalendar root and tables scale with the container width */
.calendar-container .fc,
.calendar-container .fc table,
.calendar-container .fc .fc-scrollgrid,
.calendar-container .fc .fc-scrollgrid table,
.calendar-container .fc .fc-scrollgrid-sync-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}
/* Prevent inner harness from enforcing larger widths than the parent */
.calendar-container .fc .fc-scroller,
.calendar-container .fc .fc-scrollgrid-section > *,
.calendar-container .fc .fc-daygrid-body,
.calendar-container .fc .fc-daygrid-body table,
.calendar-container .fc .fc-daygrid-day-frame,
.calendar-container .fc .fc-daygrid-day {
    min-width: 0 !important;
}

/* Ensure card body around calendar has comfortable padding */
.card:has(.calendar-container) .card-body,
.card:has(.ratio.ratio-16x9) .card-body {
    padding: 20px !important;
}

.card:has(.calendar-container) .card-header,
.card:has(.ratio.ratio-16x9) .card-header {
    padding: 16px 20px !important;
}

/* Calendar iframe styling */
/* FullCalendar root should size itself within container */
.calendar-container .fc {
    height: auto !important;
    border: 0 !important;
}

/* Force FullCalendar internal harness to auto-height and avoid extra whitespace */
.calendar-container .fc .fc-view-harness,
.calendar-container .fc .fc-view-harness-active {
    height: auto !important;
    min-height: 0 !important;
}
.calendar-container .fc .fc-scroller-harness,
.calendar-container .fc .fc-scroller {
    overflow: visible !important;
    max-height: none !important;
}

/* FullCalendar toolbar layout - All elements centered */
.calendar-container .fc .fc-toolbar {
    margin: 8px 8px 12px !important;
    padding: 0 4px !important;
    gap: 12px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
.calendar-container .fc .fc-toolbar .fc-toolbar-chunk {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0;
}
.calendar-container .fc .fc-toolbar .fc-toolbar-chunk:nth-child(1) { justify-content: center !important; }
.calendar-container .fc .fc-toolbar .fc-toolbar-chunk:nth-child(2) { justify-content: center !important; }
.calendar-container .fc .fc-toolbar .fc-toolbar-chunk:nth-child(3) { justify-content: center !important; }
.calendar-container .fc .fc-toolbar-title { font-size: 20px !important; font-weight: 700 !important; line-height: 1.2 !important; }
.calendar-container .fc .fc-button-group { gap: 8px !important; }

/* Mobile stacking - All centered */
@media (max-width: 576px) {
  .calendar-container .fc .fc-toolbar {
      margin: 6px 6px 10px !important;
      gap: 8px !important;
      display: flex !important;
      flex-direction: row !important;
      justify-content: center !important;
      align-items: center !important;
      flex-wrap: wrap !important;
  }
  .calendar-container .fc .fc-toolbar .fc-toolbar-chunk {
      justify-content: center !important;
      width: auto !important;
      margin-bottom: 0 !important;
  }
  .calendar-container .fc .fc-toolbar-title { font-size: 18px !important; }
  .calendar-container .fc .fc-button { padding: 6px 10px !important; }
}

/* Tablet responsive adjustments */
@media (max-width: 992px) {
    .card:has(.calendar-container) .card-body,
    .card:has(.ratio.ratio-16x9) .card-body { padding: 18px !important; }
}

/* Mobile responsive adjustments - Increased height for better display */
@media (max-width: 768px) {
    .card:has(.calendar-container) .card-body,
    .card:has(.ratio.ratio-16x9) .card-body { padding: 16px !important; }
    .card:has(.calendar-container) .card-header,
    .card:has(.ratio.ratio-16x9) .card-header { padding: 14px 16px !important; }
    .card:has(.calendar-container),
    .card:has(.ratio.ratio-16x9) { margin-bottom: 20px !important; }
}

/* Small mobile devices - Even more height */
@media (max-width: 480px) {
    .card:has(.calendar-container) .card-body,
    .card:has(.ratio.ratio-16x9) .card-body { padding: 14px !important; }
    .card:has(.calendar-container) .card-header,
    .card:has(.ratio.ratio-16x9) .card-header { padding: 12px 14px !important; }
}

/* Extra small devices */
@media (max-width: 375px) {}

/* Hide duplicate calendars on mobile - show only the first one */
@media (max-width: 768px) {
    /* Hide all calendar containers except the first one */
    .calendar-container ~ .calendar-container,
    .calendar-container + .calendar-container,
    .ratio.ratio-16x9 ~ .ratio.ratio-16x9,
    .ratio.ratio-16x9 + .ratio.ratio-16x9,
    .row .calendar-container:not(:first-of-type),
    .row .ratio.ratio-16x9:not(:first-of-type),
    .card-body .calendar-container:not(:first-of-type),
    .card-body .ratio.ratio-16x9:not(:first-of-type) {
        display: none !important;
    }

    /* Hide duplicate calendar cards */
    .row .card:has(.calendar-container) ~ .row .card:has(.calendar-container),
    .row .card:has(.ratio.ratio-16x9) ~ .row .card:has(.ratio.ratio-16x9),
    .card:has(.calendar-container) ~ .card:has(.calendar-container),
    .card:has(.ratio.ratio-16x9) ~ .card:has(.ratio.ratio-16x9) {
        display: none !important;
    }

    /* More specific: Hide second calendar row if exists */
    .row.mt-4:has(.calendar-container) ~ .row.mt-4:has(.calendar-container),
    .row.mt-4:has(.ratio.ratio-16x9) ~ .row.mt-4:has(.ratio.ratio-16x9) {
        display: none !important;
    }

    /* JavaScript fallback class */
    .calendar-duplicate {
        display: none !important;
    }
}

/* Ensure calendar container doesn't overflow */
.calendar-container,
.ratio.ratio-16x9 {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Theme the FullCalendar buttons to match app (remove default dark/black) */
.calendar-container .fc .fc-button,
.ratio.ratio-16x9 .fc .fc-button {
    background-color: var(--bs-primary, #5D87FF) !important;
    border-color: var(--bs-primary, #5D87FF) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.calendar-container .fc .fc-button:hover,
.ratio.ratio-16x9 .fc .fc-button:hover {
    filter: brightness(0.95);
}
.calendar-container .fc .fc-button:disabled,
.ratio.ratio-16x9 .fc .fc-button:disabled {
    background-color: #94b3ff !important;
    border-color: #94b3ff !important;
    opacity: .85 !important;
}
.calendar-container .fc .fc-button.fc-button-primary,
.ratio.ratio-16x9 .fc .fc-button.fc-button-primary {
    background-color: var(--bs-primary, #5D87FF) !important;
    border-color: var(--bs-primary, #5D87FF) !important;
}
.calendar-container .fc .fc-button.fc-button-active,
.ratio.ratio-16x9 .fc .fc-button.fc-button-active {
    background-color: var(--bs-primary, #5D87FF) !important;
    border-color: var(--bs-primary, #5D87FF) !important;
}

/* Hard override: ensure calendar containers never enforce fixed min-heights or padding-bottom.
   Apply across all media queries by declaring at the end with !important. */
@media all {
  .calendar-container,
  .ratio.ratio-16x9 {
    height: auto !important;
    min-height: auto !important;
    padding-bottom: 0 !important;
  }
}

.calendar-container .fc .fc-col-header-cell-cushion {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 6px 0 !important;
    font-weight: 600 !important;
}

.calendar-container .fc .fc-daygrid-day-frame {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 6px !important;
    position: relative !important;
}

.calendar-container .fc .fc-daygrid-day-bg { width: 100% !important; }
.calendar-container .fc .fc-daygrid-day-bg .fc-highlight,
.calendar-container .fc .fc-daygrid-day-bg .fc-bg-event {
    inset: 2px !important;
    border-radius: 6px !important;
}
.calendar-container .fc .fc-daygrid-day.fc-day-today {
    background: transparent !important;
}
.calendar-container .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
    border: 2px solid var(--bs-warning, #f8d047) !important;
    border-radius: 8px !important;
}
.calendar-container .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: rgba(248, 208, 71, 0.12);
    border-radius: 6px;
    pointer-events: none;
}

.calendar-container .fc .fc-daygrid-day-number {
    margin: 0 !important;
    padding: 2px 4px !important;
    font-weight: 600 !important;
    align-self: center !important;
}

.calendar-container .fc .fc-daygrid-day-events {
    width: 100% !important;
}