/* /styles/calendar-layout.css */
/*
  This file contains aggressive layout styles intended ONLY for the main calendar page.
  It is scoped with the .calendar-page-layout class to prevent it from affecting other pages.
*/

.calendar-page-layout {
  overflow: hidden; /* Prevent scrollbars on the body */
}

/* Make the primary containers fill the viewport height below the header */
.calendar-page-layout .calendar-root-container {
  height: calc(100vh - var(--site-header-height, 80px) - 60px) !important;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 1880px; /* Base for 1080p users */
  margin: 20px auto; /* Center vertically and horizontally with buffers */
  width: 98%;        /* Slight buffer on the sides */
}

/* For 1440p users and above */
@media (min-width: 1921px) {
  .calendar-page-layout .calendar-root-container {
    max-width: 2400px;
  }
}

.calendar-page-layout .calendar-wrapper,
.calendar-page-layout .calendar-layout-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Main flex container for the calendar and sidebar */
.calendar-page-layout .calendar-layout-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  overflow: hidden;

  /* Three columns: nav | calendar | info cards */
}

/* Vertically stacked nav buttons on the left */
.calendar-page-layout .calendar-nav-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 80px;
  min-width: 60px;
  max-width: 120px;
  margin-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: rgba(30,41,59,0.15);
  border-right: 2px solid var(--blue-primary);
  z-index: 2;
}

/* Calendar grid: 75% width */
.calendar-page-layout .calendar-grid {
  flex: 1 1 75%;
  min-width: 0;
  margin-right: 16px;
  margin-left: 0;
  overflow-y: auto;
}

/* Sidebar: Squared up to 340px, pushed to the right side of the container */
.calendar-page-layout .calendar-sidebar-info {
  width: 340px;
  flex: 0 0 340px;
  min-width: 0;
  max-width: none;
  height: 100%;
  overflow-y: auto;
  margin-left: 0;
  margin-right: 0;
  padding: 8px;
  background: rgba(30,41,59,0.15);
}