/* Styles for FullCalendar mobile toolbar layout moved from calendar partial
   Place any future calendar-specific styles here. */

@media (max-width: 576px) {
  .fc-toolbar, .fc-header-toolbar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
  }
  /* Force the center chunk (which contains .fc-toolbar-title) to appear first */
  .fc-toolbar > div:nth-child(2), .fc-header-toolbar > div:nth-child(2) {
    order: -1;
    width: 100%;
    text-align: center;
  }
  /* Make sure the real title is visible and centered */
  .fc-toolbar .fc-toolbar-title, .fc-header-toolbar .fc-toolbar-title {
    display: block !important;
    white-space: nowrap;
    font-weight: 600;
    font-size: 1rem;
    margin: 0 auto;
    color: white;
  }
  /* Reduce spacing of the other chunks so layout fits on small screens */
  .fc-toolbar > div, .fc-header-toolbar > div {
    flex: 0 0 auto;
  }

  /* Mobile rows used by JS relocation helper */
  .fc-toolbar .mobile-fc-row,
  .fc-header-toolbar .mobile-fc-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0.15rem 0.25rem;
  }

  /* Row-specific tweaks */
  .fc-toolbar .mobile-fc-row1 { gap: 0.5rem; }
  .fc-toolbar .mobile-fc-row2 { gap: 0.5rem; }
  .fc-toolbar .mobile-fc-row3 { gap: 0.25rem; }

  /* Ensure toolbar title keeps visual priority in row2 center */
  .mobile-fc-row2 .fc-toolbar-title {
    flex: 1 1 auto;
    text-align: center;
    margin: 0 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  /* CSS-only mobile toolbar: chunk-aware 3-row layout using CSS Grid.
     The FullCalendar toolbar uses three .fc-toolbar-chunk elements which
     contain the prev/next group, the title, and the view buttons. We keep
     those chunks but use grid placement to present the desired rows:
     Row1: today (left)   |        | unscheduled (right)
     Row2: prev (left)    | title  | next (right)
     Row3: view buttons (centered, full width)
  */
  .fc-toolbar, .fc-header-toolbar {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 0.25rem;
    align-items: center;
  }

  /* Place the three toolbar chunks into the grid rows/columns. */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1),
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) {
    /* span full width so internal children can be arranged inside this chunk */
    grid-column: 1 / -1;
    grid-row: 1 / 3; /* occupies first two rows vertically */
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.25rem;
  }

  /* Title chunk -> center of row 2 */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(2),
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(2) {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Mobile-only: decorative bar between prev and next (row 2) */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1)::after,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1)::after {
    content: "";
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    align-self: center;
    width: calc(100% - 0.5rem);
    margin: 0 0.25rem;
    height: 2.4rem; /* matches typical toolbar height */
    background:  #616E7C; /* subtle grey */
    border-radius: 0.375rem;
    z-index: 1; /* sit below buttons/title */
    pointer-events: none;
  }
  /* Views chunk -> full width row 3 */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(3),
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: stretch;
  }

  /* Make the view buttons occupy full width on mobile and grow evenly. */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(3) .fc-button-group,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(3) .fc-button-group {
    display: flex !important;
    width: 100% !important;
    gap: 0.25rem;
    align-items: stretch;
  }

  .fc-toolbar > .fc-toolbar-chunk:nth-child(3) .fc-button-group .fc-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(3) .fc-button-group .fc-button {
    flex: 1 1 0 !important; /* grow evenly */
    width: auto !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* If FullCalendar outputs buttons without a grouping element, target them directly */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(3) .fc-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(3) .fc-button {
    flex: 1 1 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
  }

  /* Inside first chunk: position its children into the small internal grid.
     DOM inside chunk1 is typically: .fc-button-group (prev/next), .fc-today-button, .fc-unscheduledToggle-button
     We'll allow the prev/next buttons to participate directly in the chunk1 grid
     by using display:contents on the group, and then place prev at column 1
     and next at column 3 of row 2. This keeps the title centered in column 2. */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.25rem;
    align-items: center;
  }


  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-button-group,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-button-group {
    display: contents !important; /* let the buttons become grid children */
  }

  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-today-button {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-unscheduledToggle-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-prev-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-prev-button {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: center;
    z-index: 3;
  }

  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-next-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-next-button {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    z-index: 3;
  }

  /* Ensure title styling inside title chunk */
  .fc-toolbar .fc-toolbar-title, .fc-header-toolbar .fc-toolbar-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Align individual buttons nicely */
  .fc-toolbar .fc-button, .fc-header-toolbar .fc-button,
  .fc-toolbar .fc-button-group, .fc-header-toolbar .fc-button-group {
    align-self: center;
  }

  /* Ensure prev/next buttons are visible above the title */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-prev-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-prev-button,
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-next-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-next-button {
    position: relative;
    z-index: 3;
  }

  /* Ensure title sits below buttons so they remain visible */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(2),
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(2) {
    position: relative;
    z-index: 2;
  }

  /* Prevent clipping of buttons by parents */
  .fc-toolbar, .fc-header-toolbar,
  .fc-toolbar > .fc-toolbar-chunk, .fc-header-toolbar > .fc-toolbar-chunk {
    overflow: visible !important;
  }

  /* Extra safeguard: keep other button groups horizontal and prevent wrapping */
  .fc-toolbar .fc-button-group, .fc-header-toolbar .fc-button-group {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.25rem;
    align-items: center;
  }

  /* Avoid buttons expanding to full width inside the grid and keep them inline */
  .fc-toolbar .fc-button, .fc-header-toolbar .fc-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap;
  }

  /* Ensure the first toolbar chunk can expand so its internal grid has room
     for the today/unscheduled and prev/next placements. Removing the
     restrictive max-width that caused right-side buttons to be squeezed. */
  .fc .fc-header-toolbar .fc-toolbar-chunk:first-child,
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) {
    max-width: none !important;
    flex: 0 1 auto !important;
    overflow: visible !important;
  }

 
  /* Make unscheduled sidebar narrower on mobile and ensure hidden position matches width. */
  /* Make unscheduled sidebar overlay the calendar on mobile (fixed, slides in)
     so opening it does NOT push or shift the calendar content. */
  .unscheduled-sidebar {
    position: fixed !important;
    top: 0;
    /* leave room for any fixed mobile bottom nav (JS sets --mobile-bottom-nav-height) */
    bottom: var(--mobile-bottom-nav-height, 0);
    width: 240px !important;
    right: -240px !important;
    height: auto;
    z-index: 1075 !important;
    transition: right 0.28s cubic-bezier(.4,0,.2,1) !important;
    will-change: right;
  }

  /* Open state -> slide over the calendar without affecting layout */
  .unscheduled-sidebar.open {
    right: 0 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  }

  /* Ensure the calendar does NOT shift when 'shifted' class is toggled by JS. */
  .calendar-container.shifted {
    margin-right: 0 !important;
    transform: none !important;
  }
}

/* Capitalize the Today button label across all viewports */
.fc-toolbar .fc-today-button, .fc-header-toolbar .fc-today-button {
  text-transform: capitalize !important;
  margin-left: 0 !important;
}

/* Make toolbar title more prominent and move it slightly upwards so it sits
   higher in the toolbar. Scoped globally but with stronger desktop sizing. */
.fc-toolbar .fc-toolbar-title, .fc-header-toolbar .fc-toolbar-title {
  font-size: 1.15rem !important;
  line-height: 2 !important;
  font-weight: 700 !important;
  margin-top: -0.45rem !important; /* lift the title up */
  transform: translateY(-0.08rem) !important;
  letter-spacing: 0.2px !important;
}

@media (min-width: 577px) {
  .fc-toolbar .fc-toolbar-title, .fc-header-toolbar .fc-toolbar-title {
    font-size: 1.6rem !important;
  }
}

/* Desktop (default) toolbar ordering: put Unscheduled first, then Today,
   then Next, then Previous (left-to-right) inside the first toolbar chunk. */
@media (min-width: 577px) {
  /* Ensure chunk1 lays out its direct children in a row so we can reorder them */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1),
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
  }

  /* Make the unscheduled button appear first */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-unscheduledToggle-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-unscheduledToggle-button {
    order: 0;
  }

  /* Make the today button appear after unscheduled */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-today-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-today-button {
    order: 1;
  }

  /* Place the prev/next group after today but show Next before Previous */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-button-group,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-button-group {
    order: 2;
    display: inline-flex !important;
    gap: 0.25rem;
    align-items: center;
  }

  /* Within the group, show Next before Prev */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-button-group .fc-next-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-button-group .fc-next-button {
    order: 1;
  }
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-button-group .fc-prev-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-button-group .fc-prev-button {
    order: 0;
  }

  /* Position the Unscheduled button above the views buttons on desktop by
     absolutely placing it near the right edge and reserving toolbar top padding
     so it doesn't overlap the rest of the toolbar content. This only applies
     at desktop widths to avoid impacting mobile layout. */
  .fc-toolbar {
    position: relative;
    padding-top: 2.4rem; /* reserve space for the stacked unscheduled button */
  }

  .fc-toolbar .fc-unscheduledToggle-button,
  .fc-header-toolbar .fc-unscheduledToggle-button {
    position: absolute !important;
    right: 0 !important; /* align close to the views area (right side) */
    /* Nudge the button higher: smaller top and a small negative translateY */
    top: 0.0rem !important; /* slightly higher */
    transform: translateY(-0.3rem) !important;
  }

 

  /* Ensure toolbar buttons sit above the decorative background */
  .fc-toolbar .fc-button,
  .fc-header-toolbar .fc-button {
    position: relative;
    z-index: 3;
  }

/* Icon styling for the unscheduled button: keeps icon aligned and inherits color */
.fc-unscheduledToggle-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem;
}

.fc-unscheduledToggle-button .unscheduled-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Increase icon size (em-based so it scales with button font-size). */
  width: 1.4em;
  height: 1.4em;
  line-height: 0;
  vertical-align: middle;
}

.fc-unscheduledToggle-button .unscheduled-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

/* Slightly reduce icon spacing on very small screens */
@media (max-width: 420px) {
  .fc-unscheduledToggle-button .unscheduled-icon { margin-right: 0.25rem; }
}