@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;
}
/* remove this if week view is added */
.fc .fc-toolbar-chunk:nth-child(2) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* 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-scroll .fc .fc-header-toolbar {
  position: sticky;
  left: 0;
  width: 100cqw;
}
