/* ============================================================
   GLOBAL RESET AND BOX MODEL
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Franklin Gothic", Arial, Helvetica, sans-serif;
  margin: 0;
}


/* ============================================================
   TYPOGRAPHY (Global v4 style guide)
   Franklin Gothic everywhere; Ubuntu only for buttons, calendar
   labels (month, date) and accordion headings. Both are loaded
   in fonts.css.
   ============================================================ */
/* Buttons (FullCalendar's toolbar buttons inherit from .fc-toolbar) */
button,
#filters-hamburger,
/* Calendar labels: toolbar month title, weekday/date headers, day
   numbers, "+more" popover date, list-view day headers, date picker */
.fc-toolbar,
.fc-col-header-cell-cushion,
.fc-daygrid-day-number,
.fc-popover-title,
.fc-list-day-cushion,
.flatpickr-months,
.flatpickr-weekdays,
.flatpickr-days,
/* Accordion headings (sidebar filter groups) and the Select/deselect
   all toggle above them */
.filter-group-title,
.filter-header label {
  font-family: Ubuntu, sans-serif;
}


/* ============================================================
   RESET LINKS
   "Reset dates" -- a link-styled button beside the list view's date
   range, shown only while a date is set. It sits in a wrapping flex
   row, so on narrow screens it drops under the inputs.
   ============================================================ */
.reset-link {
  background: none;
  border: none;
  padding: 8px 4px;
  color: #0077ca;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.reset-link[hidden] {
  display: none;
}

.reset-link:hover {
  color: #003c71;
}


/* ============================================================
   SEARCH CLEAR BUTTON
   × inside the right end of the calendar and list search boxes,
   shown only while the box has text.
   ============================================================ */
.search-field {
  position: relative;
}

.search-clear {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: #4f5964;
  cursor: pointer;
}

.search-clear[hidden] {
  display: none;
}

.search-clear:hover {
  background: #f2f3f4;
  color: #003c71;
}

.search-clear .material-symbols-sharp {
  font-size: 20px;
}


/* ============================================================
   PAGE LAYOUT
   Sidebar + calendar sit side-by-side on desktop.
   Stacks vertically on mobile (see mobile section at bottom).
   ============================================================ */
#calendar-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Fixed width, no grow/shrink -- without this, the sidebar has no width of
   its own and is sized by flex's shrink-to-fit algorithm, which depends on
   how much room the calendar/list content next to it wants. That demand
   differs between Calendar and List view, so the sidebar (and with it the
   logo, sized off the sidebar's width) rendered at a different size in each
   view and visibly jumped on toggle. */
#sidebar {
  flex: 0 0 280px;
  width: 280px;
}

#calendar-container {
  flex-grow: 1;
  background: #ffffff;
  padding: 20px;
}

#calendar {
  width: 100%;
  margin: 0 auto;
}


/* ============================================================
   DESKTOP (min-width: 1001px)
   Calendar fills the viewport height so a full month is visible
   without scrolling the page -- FullCalendar's dayMaxEvents option
   (set in main.js) collapses any day with more events than fits
   into a "+N more" link, the same way Outlook's month view does.
   List view isn't height-constrained -- it's a normal block that
   grows the page and scrolls like before.
   ============================================================ */
@media (min-width: 1001px) {
  #calendar-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  #calendar {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* The sidebar's logo sits above the filter list at a fixed height of its
     own -- without this, #filters-panel's independent height:100vh (see
     sidebar.css) stacks on top of the logo's height and pushes the sidebar
     taller than one viewport, forcing the very page-level scroll this
     layout is meant to avoid. */
  #sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
}


/* ============================================================
   MOBILE (max-width: 1000px)
   ============================================================ */
@media (max-width: 1000px) {
  #calendar-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  #calendar-container,
  #calendar {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
}