@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

body {
  padding: 0;
  margin: 0;
}

.dashboard-top-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 24px;
  grid-template-areas:
    "welcome      downloadable"
    "modules      .";
}

.dashboard-top-grid.df-span {
  grid-template-areas:
    "welcome      downloadable"
    "modules      downloadable";
}

.dashboard-top-grid.df-empty {
  grid-template-areas:
    "welcome      downloadable"
    "modules      modules";
}

.dashboard-top-grid.df-hidden {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "welcome"
    "modules";
}

.welcome-area {
  grid-area: welcome;
  align-self: start;
}
.downloadable-area {
  grid-area: downloadable;
}
.modules-area {
  grid-area: modules;
}

.dashboard-modules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  width: 100%;
}

@media (max-width: 1440px) {
  .dashboard-top-grid.df-span {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "welcome"
      "downloadable"
      "modules";
    column-gap: 16px;
    row-gap: 16px;
  }

  .dashboard-top-grid.df-empty {
    grid-template-columns: 3fr 2fr;
    column-gap: 20px;
    row-gap: 20px;
  }

  .welcome-area .mantine-Paper-root {
    padding-right: clamp(140px, 12vw, 280px) !important;
  }

  .advisories-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1024px) {
  .dashboard-top-grid,
  .dashboard-top-grid.df-span,
  .dashboard-top-grid.df-empty {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "welcome"
      "downloadable"
      "modules";
    column-gap: 16px;
    row-gap: 16px;
  }
}

@media (max-width: 600px) {
  .dashboard-modules-grid {
    grid-template-columns: 1fr;
  }
}
/* remove this if week view is added */
.fc .fc-header-toolbar {
  position: relative;
}

/* Venue timetable: wide scrolling columns, toolbar stays at 100% visible width */
.venue-timetable-scroll {
  max-width: 100%;
  overflow-x: auto;
  container-type: inline-size;
}

/* Venue timetable: sticky proxy scrollbar pinned above the grid, kept in sync
   with the bottom (native) scrollbar of .venue-timetable-scroll via JS.
   top: 70px clears the fixed AppShell header (Header height={70});
   z-index 6 sits above calendar content/empty-state (z-5), below the loader (z-10). */
.venue-timetable-top-scroll {
  position: sticky;
  top: 70px;
  z-index: 6;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--fc-page-bg-color, #fff);
}

/* macOS shows scrollbars only briefly (overlay style), so the timetable's
   scrollbars look missing on MacBooks. Customizing ::-webkit-scrollbar makes
   WebKit (Chrome/Safari) render persistent, always-visible scrollbars instead.
   NOTE: do NOT set scrollbar-width/scrollbar-color outside the Firefox block
   below — on Chrome 121+/Safari 18.2+ any non-auto standard property disables
   ::-webkit-scrollbar styling, which restores hidden overlay scrollbars. */
.venue-timetable-top-scroll::-webkit-scrollbar,
.venue-timetable-scroll::-webkit-scrollbar {
  height: 12px;
  -webkit-appearance: none;
}

.venue-timetable-top-scroll::-webkit-scrollbar-track,
.venue-timetable-scroll::-webkit-scrollbar-track {
  background: #f1f3f5;
}

.venue-timetable-top-scroll::-webkit-scrollbar-thumb,
.venue-timetable-scroll::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background-color: #adb5bd;
  border: 2px solid #f1f3f5;
}

/* Firefox-only: no ::-webkit-scrollbar there; scrollbar-color draws a
   persistent bar. Wrapped in @-moz-document so the standard properties can
   never disable the WebKit styling above. */
@-moz-document url-prefix() {
  .venue-timetable-top-scroll,
  .venue-timetable-scroll {
    scrollbar-width: thin;
    scrollbar-color: #adb5bd #f1f3f5;
  }
}

.venue-timetable-scroll .fc .fc-header-toolbar {
  position: sticky;
  left: 0;
  width: 100cqw;
}

/* Venue timetable: pin the time column (12am, 1am, ...) while day columns scroll horizontally */
.venue-timetable-scroll .fc .fc-scroller {
  overflow: visible !important; /* let the outer .venue-timetable-scroll be the scrollport for sticky */
}

.venue-timetable-scroll .fc .fc-scroller-harness {
  overflow: visible; /* same: don't trap sticky positioning in a hidden scroll container */
}

/* position:sticky on table cells requires border-collapse: separate (Chromium/Firefox) */
.venue-timetable-scroll .fc-timegrid-slots > table,
.venue-timetable-scroll .fc-timegrid-cols > table {
  border-collapse: separate;
}

/* avoid doubled 1px lines that border-collapse: separate would introduce; the table's left edge
   is covered by the scrollgrid border and each row keeps its top border */
.venue-timetable-scroll .fc-timegrid-slots > table td,
.venue-timetable-scroll .fc-timegrid-cols > table td {
  border-left-width: 0;
}

/* FullCalendar stacks the slots layer at z-index:1 (a stacking context) while event boxes
   (.fc-timegrid-col-events, z-index:3) and the now-indicator (z-index:4) sit above it, so
   pinned cells inside it could never out-paint scrolled content. Neutralize the layer so
   the pinned cells below compete directly, and raise them above both (slot lines and
   non-pinned content still paint below events, as before). */
.venue-timetable-scroll .fc .fc-timegrid-slots {
  z-index: auto;
}

/* pin the time labels */
.venue-timetable-scroll .fc-timegrid-slots > table td:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--fc-page-bg-color, #fff);
}

/* pin the now-indicator arrow, which lives in the overlay table's axis cell */
.venue-timetable-scroll .fc-timegrid-cols > table td.fc-timegrid-axis {
  position: sticky;
  left: 0;
  z-index: 5;
}

/* keep the empty header corner aligned with the pinned column */
.venue-timetable-scroll .fc-timegrid th.fc-timegrid-axis {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--fc-page-bg-color, #fff);
}

/* compact time-grid rows: keeps event boxes shorter and fits more of the day on screen */
.venue-timetable-scroll .fc .fc-timegrid-slot {
  height: 2em;
}

/* compact header toolbar (Month/Week toggle, nav buttons, title) to free vertical space;
   margin-top adds breathing room between the sticky proxy scrollbar and the buttons row */
.venue-timetable-scroll .fc .fc-header-toolbar {
  margin-top: 0.5rem;
  margin-bottom: 0.35em;
  flex-wrap: nowrap;
}

.venue-timetable-scroll .fc .fc-button {
  padding: 0.25em 0.5em;
  font-size: 0.85em;
}

/* Month/Week view toggle: strong contrast between selected and unselected */
.venue-timetable-scroll .fc .fc-button-group .fc-button {
  --fc-button-text-color: #495057;
  --fc-button-bg-color: #f1f3f5;
  --fc-button-border-color: #ced4da;
  --fc-button-hover-bg-color: #e9ecef;
  --fc-button-hover-border-color: #ced4da;
  --fc-button-active-bg-color: #fcb900;
  --fc-button-active-border-color: #e0a800;
  --fc-button-active-text-color: #212529;
}

.venue-timetable-scroll .fc .fc-button-group .fc-button.fc-button-active {
  --fc-button-text-color: #212529;
  font-weight: 600;
}

.venue-timetable-scroll
  .fc
  .fc-button-group
  .fc-button:not(.fc-button-active):hover {
  --fc-button-text-color: #212529;
}

/* Month/Week toggle: no lingering focus ring after pointer clicks;
   keyboard focus keeps its indicator via :focus-visible */
.venue-timetable-scroll
  .fc
  .fc-button-group
  .fc-button:focus:not(:focus-visible) {
  box-shadow: none;
}

/* make the calendar title match the tab labels (Inter, 600, 16px) */
.venue-timetable-scroll .fc .fc-toolbar-title {
  font-size: 1rem;
  font-weight: 600;
}

/* Left-align day-of-week headers in the Timetable week view */
.venue-timetable-scroll .fc-timegrid .fc-col-header-cell-cushion {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}