/* CSS for browseSessions only! */

/* Navbar Sessions with divs */
.navbar_sessions {
  height: 100%;
}
.navbar_adminSessions {
  box-sizing: border-box !important;
}
.navbar_sessions_table .navbar_elements_td {
  padding: 0 !important;
  vertical-align: middle !important;
}

.navbar_sessions_table .navbar_elements_td > a {
  justify-content: center !important;
}

.navbar_sessions_table .navbar_elements_td > a > .navbar_item {
  margin: 0 !important;
  line-height: normal !important;
}

.navbar_sessions_table .navbar_elements_td > a:focus {
  outline-offset: -2px !important;
  outline: 2px solid currentColor !important;
}

/* Flexbox adjustments for sessions navbar */
.navbar_sessions_table.navbar-flex {
  box-sizing: border-box !important;
}

.navbar_sessions.navbar-flex-left {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  flex-grow: 1 !important;
}

.navbar_sessions_table .navbar_elements_td.navbar-flex-item.hoverable:hover {
  height: 100% !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Sessions-Navbar Links */
.navbar_sessions_table .navbar_elements_td.navbar-flex-item .navbar-flex-link {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  width: 100% !important;
  padding: 0 10px !important;
}

.navbar_sessions_table .navbar_elements_td.navbar-flex-item .navbar-flex-text {
  white-space: nowrap !important;
  line-height: normal;
}

/* Sessions-Navbar Dropdown */
.navbar_sessions_table .navbar_menu.sessions.navbar-flex-dropdown {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  width: 100% !important;
}

/* Sessions-Navbar Flexbox Items */
.navbar_sessions_table .navbar_elements_td.navbar-flex-item {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Definitive fix for focus ring and padding in secondary navbars. Using highly specific selectors to guarantee override of conftool.css. */
.navbar_sessions_table .navbar_elements_td > a > .navbar_item,
.navbar_adminSessions .navbar_elements_td > a > .navbar_item {
  float: none !important;
  padding: 0 !important;
}
.navbar_sessions_table .navbar_elements_td > a,
.navbar_adminSessions .navbar_elements_td > a {
  box-sizing: border-box;
}
/* Specific line-height for session navbar to ensure vertical alignment */
.navbar_sessions .navbar_elements_td {
  line-height: 29px;
}

.navbar_sessions_table .navbar_elements_td > a:focus,
.navbar_adminSessions .navbar_elements_td > a:focus {
  position: relative;
  outline-offset: -2px !important;
}

/* Session-Navbar Searchbox */
#session_search_right {
  height: auto !important;
  padding: 0 2px;
}

/* Search in sessions --------------------------*/

#session_search_right {
  z-index: 2;
  text-align: right;
}

#session_search_wrapper {
  position: relative;
}
#session_search_right input.search {
  font-size: 11px;
  color: #000;
  background: #f4f6f8 url(../icons/magnifier_search.png) no-repeat 3px 3px;
  background-size: 14px 14px;
  width: 73%;
  line-height: 15px;
  height: 15px;
  padding-left: 22px;
  padding-right: 7px;
  margin-right: 5px !important;
}
#session_search_right input.search::-ms-clear,
#navbar_search_left input.search::-ms-clear {
  display: none; /* Hide clear in Edge */
}
#session_search_clear {
  position: absolute;
  float: right;
  height: 17px;
  width: 17px;
  top: 3px;
  right: 3px;
  cursor: pointer;
  cursor: hand;
}
#session_search_clear_img {
  height: 15px;
  width: 15px;
}

/* Special Navbars in Body of ConfTool */
.navbar_sessions {
}
.navbar_adminSessions {
  background: linear-gradient(to bottom, #f1f1f1 0%, #fafafa 8px, #fafafa 30px);
}
.sessionheader_adminSessions {
  background: linear-gradient(to bottom, #eeeeee 0%, #fafafa 8px, #fafafa 30px);
  float: none;
  width: auto;
  padding: 8px 3px 2px 3px;
  border: 0;
  border-top: 1px solid #666666;
}

.session_box_letter {
  border: 1px solid #dddddd;
  background: #f8f8f8;
  margin: 0;
  padding: 2px 7px 5px 7px;
}
.session_box_option {
  border: 1px solid #dddddd;
  border-top: 0;
  background: #f4f4f4;
  margin: 0;
  padding: 5px 7px 5px 7px;
}
.sessions_authors_title {
  padding-left: 5px;
}

/* "Now Live" in Agenda */
.nowlive,
tbody.nowlive td,
tr.nowlive td {
  box-shadow: inset 0 0 500px rgba(153, 255, 136, 0.2) !important;
}
.nowLiveText {
  color: #008800;
  animation: blinker 1.2s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0.5;
  }
}

/* Agenda Icons etc. */
.sessions_agenda_icon {
  position: relative;
  width: 18px;
  height: 15px;
  padding: 0 2px 0 0;
}
.sessions_agenda_icon_add {
  width: 16px;
  height: 16px;
  padding-top: 2px;
  cursor: pointer;
  cursor: hand;
  border: 0;
  position: absolute;
  z-index: 2;
}
.sessions_agenda_icon_add_hidden {
  display: none;
}
.sessions_agenda_icon_in {
  width: 16px;
  height: 16px;
  padding-top: 2px;
  cursor: pointer;
  cursor: hand;
  border: 0;
  position: absolute;
  z-index: 1;
}
.sessions_agenda_icon_booked {
  cursor: not-allowed;
  border: 0;
  position: absolute;
}

.sessions_agenda_div {
  display: block;
  position: relative;
  width: 277px;
  height: 25px;
  clear: both;
}
.sessions_agenda_div_add {
  color: black;
  cursor: pointer;
  cursor: hand;
  position: absolute;
  right: 0;
  z-index: 2;
  width: 269px;
  padding: 1px;
  margin: 2px;
  font-size: 8pt;
  background: white;
  border: 1px solid #cccccc;
  border-radius: 11px;
}
.sessions_agenda_div_add_hidden {
  display: none;
}
.sessions_agenda_div_in {
  color: #006600;
  cursor: pointer;
  cursor: hand;
  position: absolute;
  right: 0;
  z-index: 1;
  width: 269px;
  padding: 1px;
  margin: 2px;
  font-size: 8pt;
  background: #ccffcc;
  border: 1px solid #4fb142;
  border-radius: 11px;
}
.sessions_agenda_div_booked {
  cursor: not-allowed;
  position: absolute;
  right: 0;
  width: 269px;
  padding: 1px;
  margin: 2px;
  font-size: 8pt;
  background: #ffcccc;
  border: 1px solid #c52e2e;
  border-radius: 11px;
}
.box_pcforum {
  border-radius: 6px;
  margin: 2px;
  padding: 5px;
}

/* ICS Link */
.icsicon_big {
  margin: 2px;
  clear: both;
  cursor: pointer;
  cursor: hand;
  z-index: 1;
  width: 269px;
  padding: 2px;
  font-size: 8pt;
  background: #eeeeff;
  border: 1px solid #666699;
  border-radius: 11px;
}
.icsicon_big a {
  font-weight: normal;
  color: #000077 !important;
  display: inline-block;
  width: 99%;
}
.icsicon_big a:hover {
  text-decoration: none;
  color: #000077 !important;
}

/* BibTeX Icon Link */
.bibtexicon_big {
  margin: 2px;
  clear: both;
  cursor: pointer;
  cursor: hand;
  z-index: 1;
  width: 269px;
  padding: 2px;
  font-size: 8pt;
  background: #e7f1f0;
  border: 1px solid #02695f;
  border-radius: 11px;
}
.bibtexicon_big a {
  font-weight: normal;
  color: #02695f !important;
  display: inline-block;
  width: 99%;
}
.bibtexicon_big a:hover {
  text-decoration: none;
  color: #02695f !important;
}

/* Calendar day view with CSS Grid */

/* Grid View container - breaks out of .main container */
/* Also used for Table View with 5+ columns (breakout mode) */
.grid-view-container {
  width: calc(var(--vw, 100vw) - 20px);
  margin-left: calc(var(--vw, 100vw) / -2 + 50%);
  margin-right: calc(var(--vw, 100vw) / -2 + 50%);
  padding-left: 10px;
  padding-right: 10px;
}

/* Fade wrapper around the grid scroll container – pseudo-elements stay fixed at the edges while the inner .grid-view-scroll-wrapper scrolls horizontally. */
.grid-view-scroll-fade {
  position: relative;
}

/* Fade-out gradient right – indicates "more content to the right" */
.grid-view-scroll-fade::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 55px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.7));
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.2s ease;
}

/* Fade-out gradient left – appears only when scrolled right */
.grid-view-scroll-fade::before {
  content: "";
  position: absolute;
  left: 60px;
  top: 0;
  bottom: 0;
  width: 55px;
  background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.7));
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Left gradient visible when scrolled right */
.grid-view-scroll-fade.scrolled-left::before {
  opacity: 1;
}

/* Right gradient hidden when scrolled to end */
.grid-view-scroll-fade.scrolled-end::after {
  opacity: 0;
}

/* No gradient when all content is visible (no scroll needed) */
.grid-view-scroll-fade.no-scroll::before,
.grid-view-scroll-fade.no-scroll::after {
  display: none;
}

/* Uniform day container for Table View — wraps date header + table wrapper.
   Always present, provides structural open/close guarantee. */
.session-day-container {
  /* Neutral wrapper, no layout effect */
}

/* Table wrapper — always present inside session-day-container, wraps the day table.
   Breakout behavior (horizontal scroll) is activated via additional .table-breakout-scroll class. */
.session-day-table {
  /* Neutral wrapper, no layout effect by default */
}
.session-day-table.table-breakout-scroll {
  overflow-x: auto;
}

/* Scroll wrapper - contains only the grid, navigation stays outside.
   position + z-index create a stacking context so the fade gradients
   on .grid-view-scroll-fade (z-index:1) render ABOVE the entire grid content. */
.grid-view-scroll-wrapper {
  overflow-x: auto;
  position: relative;
  z-index: 0;
}

/* Day navigation - horizontal calendar picker */
.grid-view-navigation {
  display: flex;
  justify-content: center;
  padding: 4px 0;
  margin-bottom: 10px;
  max-width: var(--ct-content-max-width, 900px);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  /* For pseudo-elements */
  background: #f0f0f0;
  border-top: 1px solid #fff;
}

/* Fade-Out Gradient rechts - signalisiert "mehr Content" */
.grid-view-navigation::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100px;
  background: linear-gradient(to right, transparent, #f7f7f7);
  pointer-events: none;
  /* Allow clicks through */
  z-index: 1;
  border-radius: 0 6px 6px 0;
}

/* Fade-out gradient left (for bidirectional scrolling) */
.grid-view-navigation::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100px;
  background: linear-gradient(to left, transparent, #f7f7f7);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  /* Initially hidden - appears when scrolled */
  transition: opacity 0.2s ease;
  border-radius: 6px 0 0 6px;
}

/* Left gradient visible when scrolled right */
.grid-view-navigation.scrolled-left::before {
  opacity: 1;
}

/* Right gradient hidden when scrolled to end */
.grid-view-navigation.scrolled-end::after {
  opacity: 0;
}

/* No gradient when all content is visible (no scroll needed) */
.grid-view-navigation.no-scroll::before,
.grid-view-navigation.no-scroll::after {
  display: none;
}

.grid-view-day-picker {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-left: 15px;
  padding-right: 15px;
  margin: 4px 0;
  cursor: grab;
  user-select: none;
  /* Hide scrollbar */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
}

.grid-view-day-picker::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.grid-view-day-picker.dragging {
  cursor: grabbing;
}

/* Individual day card */
.grid-view-day-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 35px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #d2d2d2;
  color: inherit;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}

.grid-view-day-card:hover {
  background: #f2f2f2;
  border-color: #999;
  text-decoration: none;
}

/* Active day */
.grid-view-day-card.active {
  font-weight: 600;
  border-bottom: 3px solid #1a0dab;
  background: #f0f4ff;
}

.grid-view-day-card.active:hover {
  color: #000;
}

/* Day without sessions - greyed out and not clickable */
.grid-view-day-card.no-sessions {
  opacity: 0.4;
  background: #f5f5f5;
  cursor: default;
  pointer-events: none;
}

/* Weekday name */
.grid-view-day-card .day-name {
  font-size: 0.65em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1px;
}

/* Day number */
.grid-view-day-card .day-num {
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1;
  margin: 1px 0;
}

/* Month */
.grid-view-day-card .day-month {
  font-size: 0.6em;
  text-transform: capitalize;
  opacity: 0.7;
}

/* Active state for month */
.grid-view-day-card.active .day-month {
  opacity: 1;
}

/* Grid column width configuration (Small / Medium / Large) */
.grid-view-agenda.grid-col-small {
  --grid-col-min: 140px;
  --grid-col-factor: 141px;
  --session-max-width: 160px;
  --session-hover-max-width: 280px;
}
.grid-view-agenda.grid-col-medium {
  --grid-col-min: 180px;
  --grid-col-factor: 181px;
  --session-max-width: 220px;
  --session-hover-max-width: 350px;
}
.grid-view-agenda.grid-col-large {
  --grid-col-min: 240px;
  --grid-col-factor: 241px;
  --session-max-width: 280px;
  --session-hover-max-width: 400px;
}

/* Main grid layout */
.grid-view-agenda {
  display: grid;
  grid-template-columns: 60px repeat(
      var(--num-rooms, 1),
      minmax(var(--grid-col-min, 180px), 1fr)
    );
  grid-template-rows: auto repeat(var(--num-slots, 1), 20px);
  gap: 1px;
  background: #d2d2d2;
  border-top: 1px solid #d2d2d2;
  border-bottom: 1px solid #d2d2d2;
  border-right: 1px solid #d2d2d2;
  margin: 0 auto 20px auto;
  width: 100%;
  max-width: var(--ct-content-max-width, 900px);
  /* Few rooms: limited to --ct-content-max-width (= $ctconf['totalwidth'] on desktop, 100% on mobile) */
  /* Many rooms: min-width = num rooms × column width + 60px time column */
  min-width: calc(60px + var(--num-rooms, 1) * var(--grid-col-factor, 181px));
  position: relative;
  cursor: grab;
}

.grid-view-agenda:active {
  cursor: grabbing;
}

/* Room header (first row) */
.grid-view-room-header {
  box-sizing: border-box;
  background: #f2f2f2;
  padding: 10px 5px;
  min-height: 18px;
  font-weight: bold;
  font-size: 0.9em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #d2d2d2;
  grid-row: 1;
  user-select: none;
  /* Wrap long room names instead of widening the column */
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* Sticky state on vertical scroll (JS class .is-stuck).
   Header z-index 110 > hover cards 100, corner z-index 111 > header 110. */
.grid-view-room-header.is-stuck {
  z-index: 110;
  box-shadow: 0 -2px 0 0 #f2f2f2;
  border-bottom: 2px solid #d2d2d2;
  /* Own left border replaces the grid gap between headers.
     The gap itself has no z-index and gets covered by hover cards (z-index:100). */
  border-left: 1px solid #d2d2d2;
  margin-left: -1px;
}
.grid-view-corner.is-stuck {
  z-index: 111;
  /* Upward shadow like room headers, but no downward shadow
     (room headers provide the shadow for the entire header row). */
  box-shadow: 0 -2px 0 0 #f2f2f2;
  border-bottom: 2px solid #d2d2d2;
}

/* Top-left corner: date of the selected day */
.grid-view-corner {
  box-sizing: border-box;
  border-right: 1px solid #d2d2d2;
  background: #f2f2f2;
  grid-column: 1;
  grid-row: 1;
  border-bottom: 1px solid #d2d2d2;
  border-left: 1px solid #d2d2d2;
  position: sticky;
  left: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 2px;
}

.grid-view-corner .corner-day-name {
  font-size: 0.6em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1a0dab;
}

.grid-view-corner .corner-day-num {
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  color: #1a0dab;
}

.grid-view-corner .corner-day-month {
  font-size: 0.55em;
  text-transform: capitalize;
  color: #666;
}

/* Time slots (left column) */
.grid-view-time-slot {
  box-sizing: border-box;
  background: #f8f8f8;
  padding: 4px 5px 5px 5px;
  font-size: 0.8em;
  text-align: center;
  color: #666;
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border-bottom: 1px solid #d2d2d2;
  border-right: 1px solid #d2d2d2;
  border-left: 1px solid #d2d2d2;
  position: sticky;
  left: 0;
  z-index: 105;
  /* Bridge the gap - negative margin closes the 1px grid-gap */
  margin-bottom: -1px;
}

/* Only show text for full hours */
.grid-view-time-slot.full-hour {
  font-weight: bold;
  color: #333;
}

/* Background cells for classic calendar grid lines */
.grid-cell {
  background: #ffffff;
  position: relative;
  z-index: 0;
}

/* Slot wrapper holds grid position, card is absolute inside */
.grid-view-session-slot {
  grid-column: var(--room, 2);
  grid-row: var(--start-slot, 2) / var(--end-slot, 3);
  position: relative;
  z-index: 1;
}

.grid-view-session-slot:hover {
  z-index: 100;
}

/* Session cards - absolutely positioned within the slot */
.grid-view-session {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: default;
  background: #ffffff;
  border: 1px solid #d2d2d2;
  border-left-style: solid;
  border-left-width: 4px;
  padding: 1px 4px;
  overflow: hidden;
  transition: box-shadow 0.2s ease-in-out;
  max-width: var(--session-max-width, 220px);
}

/* Hover effect - base (always) */
.grid-view-session:hover {
  overflow: visible;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Hover effect - expand (only when content overflows) */
.grid-view-session.needs-expand:hover {
  bottom: auto;
  right: auto;
  min-width: min(100%, var(--session-max-width, 220px));
  min-height: 100%;
  max-width: var(--session-hover-max-width, 350px);
}

/* Wider expansion for cards with presentations */
.grid-view-session.needs-expand.has-presentations:hover {
  width: max-content;
  max-width: min(400px, 40vw);
}

/* Viewport-aware: expand left when not enough space on the right */
/* Class sits on the slot wrapper so the card doesn't jump and trigger mouseleave */
.grid-view-session-slot.expand-left .grid-view-session.needs-expand:hover {
  right: 0;
  left: auto;
}

/* Session card content */
.grid-view-session .session-title {
  font-size: 0.85em;
  font-weight: bold;
  color: #002299;
  margin-bottom: 2px;
  line-height: 1.2;
}

.grid-view-session .session-title:hover {
  color: #ff7711;
}

/* Flex wrapper: time left, agenda icon right */
.grid-view-session .session-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.grid-view-session .session-time {
  font-size: 0.75em;
  color: #666;
}

/* Session type in card */
.grid-view-session .session-type {
  font-size: 0.7em;
  color: #888;
  margin-bottom: 2px;
  font-style: italic;
}

/* Room in card */
.grid-view-session .session-room {
  font-size: 0.7em;
  color: #555;
  margin-bottom: 2px;
}

.grid-view-session .session-room a {
  color: #002299;
  text-decoration: none;
}

.grid-view-session .session-room a:hover {
  color: #ff7711;
}

/* Room info (password etc.) in card */
.grid-view-session .session-room-info {
  font-size: 0.65em;
  color: #888;
  margin-bottom: 2px;
}

/* Chairs in card */
.grid-view-session .session-chairs {
  font-size: 0.7em;
  color: #555;
  margin-bottom: 2px;
}

/* Info box (hidden until hover) */
.grid-view-session .session-info {
  display: none;
}

/* Styling for info box elements */
.grid-view-session .session-info > div {
  margin-bottom: 4px;
}

.grid-view-session .session-info-room,
.grid-view-session .session-info-chair,
.grid-view-session .session-info-papers {
  font-size: 0.9em;
}

/* Scrollable presentations list in the hover view */
.grid-view-session .session-info-papers {
  position: relative;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Fade gradient at bottom indicates more entries below. Needed because Firefox hides overlay scrollbars after a short time. JS sets .has-overflow on overflow and .scrolled-end at list end. */
.grid-view-session .session-info-papers.has-overflow::after {
  content: "";
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  height: 30px;
  margin-top: -30px;
  background: linear-gradient(to bottom, transparent, var(--card-bg, #fff));
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.2s ease;
}

/* Hide gradient when fully scrolled to bottom */
.grid-view-session .session-info-papers.has-overflow.scrolled-end::after {
  opacity: 0;
}

/* "and X more..." link to full session view */
.grid-view-session .session-info-more {
  margin-top: 4px;
}
.grid-view-session .session-info-more a {
  color: #002299;
  text-decoration: underline;
}
.grid-view-session .session-info-more a:hover {
  color: #ff7711;
}

.grid-view-session .session-info-room a {
  color: #002299;
  text-decoration: none;
}

.grid-view-session .session-info-room a:hover {
  color: #ff7711;
}

.grid-view-session .session-info-room-extra {
  font-size: 0.85em;
  color: #666;
  margin-left: 10px;
}

/* Session-Info Text */
.grid-view-session .session-info-text {
  font-size: 0.85em;
  color: #555;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #eee;
  line-height: 1.3;
}

/* Abstract in Hover-Info */
.grid-view-session .session-info-abstract {
  font-size: 0.85em;
  color: #444;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #eee;
  line-height: 1.4;
}

/* Icons (MyAgenda, Chat) always visible top-right */
.grid-view-session .session-info-icons {
  flex-shrink: 0;
  line-height: 1;
}

/* Single paper session authors */
.grid-view-session .session-info-authors {
  font-size: 0.85em;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}

/* External Resource im Hover */
.grid-view-session .session-info-external {
  font-size: 0.85em;
  color: #555;
  margin-top: 6px;
}

.grid-view-session .session-info-external a {
  color: #002299;
  text-decoration: none;
}

.grid-view-session .session-info-external a:hover {
  color: #ff7711;
}

/* Edit Link im Hover */
.grid-view-session .session-info-edit {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #eee;
}

/* Expand info box inline on hover (no separate tooltip box) */
.grid-view-session:hover .session-info {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.85em;
  color: #333;
  line-height: 1.4;
}

/* Hide compact fields on hover – the detailed .session-info takes over */
.grid-view-session:hover .session-room,
.grid-view-session:hover .session-room-info,
.grid-view-session:hover .session-chairs {
  display: none;
}

/* 
   Overlapping sessions – stacked side-by-side. PHP detects time overlaps per room and delivers
   --overlap-index (position) and --overlap-total (cluster size) as CSS variables.
*/

/* Overlap slots are staggered by index – further right = further in front, so the colored borders of background cards remain visible.
    pointer-events:none on the slot makes the empty area click-transparent. */
.grid-view-session-slot.has-overlap {
  z-index: calc(2 + var(--overlap-index, 0));
  overflow: hidden;
  pointer-events: none;
}

/* Position overlap card proportionally instead of full slot width. Pointer-events:auto only on the card itself, not the empty slot area. */
.grid-view-session-slot.has-overlap .grid-view-session {
  left: calc(
    var(--overlap-index, 0) * ((100% - 15%) / var(--overlap-total, 1))
  );
  width: calc(100% / var(--overlap-total, 1) + 15%);
  right: auto;
  max-width: none;
  min-width: 30px;
  pointer-events: auto;
}

/* Override generic slot hover: for overlap slots, only the card itself may raise z-index, not the empty slot area. */
.grid-view-session-slot.has-overlap:hover {
  z-index: calc(2 + var(--overlap-index, 0));
}

/* Only when the card is hovered (:has), release overflow and raise z-index. */
.grid-view-session-slot.has-overlap:has(.grid-view-session:hover) {
  z-index: 100;
  overflow: visible;
}
.grid-view-session-slot.has-overlap .grid-view-session:hover {
  /* width:100% = full slot width = same size as normal cards.
     left stays calculated — card grows from its position to the right.
     Overflow into adjacent column is OK thanks to overflow:visible on the slot. */
  width: 100%;
  right: auto;
  max-width: var(--session-max-width, 220px);
}
.grid-view-session-slot.has-overlap .grid-view-session.needs-expand:hover {
  right: auto;
  max-width: var(--session-hover-max-width, 350px);
}

/* At the right screen edge, overlap cards expand left instead of right */
.grid-view-session-slot.has-overlap.expand-left
  .grid-view-session.needs-expand:hover {
  left: auto;
  right: 0;
}

/* End overlapping sessions */

/* Empty grid cells as background */
.grid-view-empty-cell {
  background: #ffffff;
  grid-column: var(--room, 2);
  grid-row: 2 / -1;
}

/* Mobile Grid View – Touch device adjustments. No hover-expand (tap opens detail link), narrower time column. */

/* Touch devices: disable hover expansion (tap opens detail link) */
@media (hover: none) {
  .grid-view-session:hover {
    overflow: hidden;
    box-shadow: none;
  }
  .grid-view-session.needs-expand:hover {
    bottom: 0;
    right: 0;
    min-width: unset;
    min-height: unset;
    max-width: var(--session-max-width, 220px);
  }
  .grid-view-session:hover .session-info {
    display: none;
  }
  .grid-view-session:hover .session-room,
  .grid-view-session:hover .session-room-info,
  .grid-view-session:hover .session-chairs {
    display: block;
  }

  /* Adjust left fade gradient for narrower time column */
  .grid-view-scroll-fade::before {
    left: 45px;
  }

  /* Narrower time column on mobile */
  .grid-view-agenda {
    grid-template-columns: 45px repeat(
        var(--num-rooms, 1),
        minmax(var(--grid-col-min, 140px), 1fr)
      );
  }
  .grid-view-time-slot {
    padding: 4px 2px 5px 2px;
    font-size: 0.7em;
  }
}

/* End Grid View */

/* Sticky date headers in List View and Table View. On scroll, the current day header sticks to the top until the next day section replaces it. */

/* List View + Table View (no breakout): sticky on the table cell. z-index below the navbar dropdown (z-index: 9) so menus aren't covered. */
table[id^="session_list_"] > :first-child > tr:first-child > td.listheader,
table[id^="session_table_"] > :first-child > tr:first-child > td.listheader {
  position: sticky;
  top: 0;
  z-index: 4;
}

/* Table View with breakout: date header is its own div outside the table, because overflow-x:auto on the table would break position:sticky on td. */
.session-date-header {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 2px 4px;
}