/* House Reservations -- site-wide styles (loaded by base.html).
   Mostly FullCalendar readability fixes. */

/* ---------------------------------------------------------------------------
   FullCalendar builds its month grid from internal <table>/<td> elements.
   The app's global `td { padding; border-bottom }` rules (in base.html) bleed
   into those cells, adding padding that clips day cells and event bars. Scope
   it back out -- FullCalendar draws its own cell borders via .fc-theme-standard.
   --------------------------------------------------------------------------- */
.fc th,
.fc td {
  padding: 0;
}

/* Desktop: keep month columns wide enough that titles fit, scrolling
   horizontally rather than clipping. On mobile this min-width is dropped (see
   the media query below) so the whole month fits the viewport. */
.calendar-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.fc-dayGridMonth-view {
  min-width: 560px;
}

/* ---------------------------------------------------------------------------
   Event bars: readable white text, a sensible minimum height so short titles
   aren't hidden, a clean ellipsis instead of clipping mid-character, and a
   legible minimum font size (>= 11px).
   --------------------------------------------------------------------------- */
.fc-daygrid-event {
  min-height: 1.5em;
  line-height: 1.35;
  font-size: max(0.8rem, 12px);
  padding: 1px 2px;
}
.fc-event .fc-event-title,
.fc-event .fc-event-time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-event.checkout-marker {
  font-size: max(0.72rem, 11px);
}
/* White text on the colored reservation bars (purple/green/amber/slate); the
   checkout marker keeps dark text on its light-grey background. */
.fc-event:not(.checkout-marker) .fc-event-title,
.fc-event:not(.checkout-marker) .fc-event-time {
  color: #fff;
}
.fc-event.checkout-marker .fc-event-title {
  color: #37474f;
}

/* ---------------------------------------------------------------------------
   Dark mode: retint FullCalendar's own surfaces/borders via its CSS variables
   so the grid matches the rest of the dark UI. Event bar colors come from the
   server and read fine on dark; the checkout marker keeps its light chip.
   --------------------------------------------------------------------------- */
:root[data-theme="dark"] .fc {
  --fc-page-bg-color: #22262b;
  --fc-neutral-bg-color: #2a2f35;
  --fc-neutral-text-color: #cfd3d7;
  --fc-border-color: #3a3f45;
  --fc-today-bg-color: rgba(255, 235, 130, 0.10);
  --fc-list-event-hover-bg-color: #2a2f35;
  color: #e6e6e6;
}
:root[data-theme="dark"] .fc .fc-col-header-cell-cushion,
:root[data-theme="dark"] .fc .fc-daygrid-day-number {
  color: #e6e6e6;
}
:root[data-theme="dark"] .fc .fc-day-other .fc-daygrid-day-number {
  color: #6b7178;
}

/* ---------------------------------------------------------------------------
   Mobile month view: fit all 7 columns to the screen (no horizontal scroll)
   and let event text WRAP onto multiple lines so nothing is hidden -- the
   full "↩ Checkout — Name" is shown, just taller. Cells grow to fit.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Wide enough that a word like "Checkout" fits a column on one line; the
     small remainder scrolls horizontally rather than breaking words. */
  .fc-dayGridMonth-view {
    min-width: 500px;
  }
  .fc-daygrid-event {
    font-size: max(0.72rem, 11px);
    padding: 1px 1px;
    margin-top: 1px;
  }
  .fc .fc-daygrid-day-events { padding: 0 1px; }
  .fc-event .fc-event-title,
  .fc-event .fc-event-time {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    /* Wrap at spaces; only break a word if it alone can't fit the column. */
    overflow-wrap: break-word;
  }
  /* Roomier day cells so the wrapped events aren't cramped. */
  .fc .fc-daygrid-day-frame {
    min-height: 4.5em;
  }
}