/* Custom MRBS styling — CSIS Maker Space equipment panel
   Loaded via $custom_css_url in config.inc.php, after mrbs.css.php
   and any theme CSS, so these rules can safely override the defaults. */
   
   body.index {
  max-height: none;
  overflow-y: visible;
}

.index :not(.simple) + .contents {
  overflow-y: visible;
}
   
   

/* .mainpane wraps the equipment panel and the day/week/month calendar
   table together, as a single column to the right of the mini-calendars.
   The mini-calendars column is left completely undisturbed by this -
   it keeps its original position and behaviour at all times.
   Within .mainpane, the equipment panel (if open) simply stacks above
   the calendar table, since flex-direction: column lays out children
   top to bottom by default. When the panel is empty, it takes no
   visible space, so the calendar table fills the column as before. */
.mainpane {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  min-width: 0;
}





/* Center the whole two-column area (mini-calendars + mainpane) as one
   unit on the page, and cap its overall width so it doesn't stretch
   edge-to-edge on very wide screens. */
.index :not(.simple) + .contents {
  max-width: 90rem;
  margin-left: auto;
  margin-right: auto;
}

/* Bring the calendar table in slightly from the edges of the mainpane
   column, rather than letting it fill 100% of the available width. */
.mainpane .table_container {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  /* Override MRBS's viewport-based height cap (meant for short screens
     with no other page content above the table). It doesn't account
     for the breadcrumb and equipment panel now sitting above the
     table, which can otherwise squeeze it down to showing only one
     row. The table only ever has a handful of short rows anyway, so
     letting it take its natural height and allowing the page itself
     to scroll is the better behaviour here. */
  max-height: none;
}

/* .view_container has a permanent overflow-y: hidden and flex-grow: 1
   in the core stylesheet, designed for MRBS's default single-viewport
   layout. Within our two-column layout (with extra content above it),
   that combination can clip rows, and browsers differ in exactly how
   much they clip (observed: Chrome more aggressively than Firefox).
   Letting it size to its actual content removes the ambiguity. */
.mainpane .view_container {
  overflow-y: visible;
  flex-grow: 0;
}

/* Match the equipment panel's width to the calendar table above, so
   their edges line up rather than the panel using its own independent
   max-width. (This only applies when the panel is embedded inline via
   AJAX inside .mainpane - the standalone full-page version of the panel
   keeps its original centered 1000px layout.) */
.mainpane #equipment-panel .rp-panel {
  max-width: none;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

/* Top alignment between the panel and mini-calendars is handled
   dynamically by JavaScript (see index.php) rather than a fixed
   value here, since the actual offset depends on rendered content. */

/* Breadcrumb trail above the panel/calendar column */
.equip-breadcrumb {
  display: flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.5rem 0.75rem;
  font-size: 1.05em;
  color: #555;
  margin: 0 0 0.8rem 0;
}

.equip-breadcrumb a {
  color: #555;
  text-decoration: none;
}

.equip-breadcrumb a:hover {
  text-decoration: underline;
}

/* Highlight the calendar column matching the equipment currently shown
   in the panel, and bold its title so it's clear at a glance which item
   the panel belongs to. */
th[data-room].current-room {
  background-color: #eef3e2;
}

th[data-room].current-room a {
  font-weight: bold;
}