.session-container {
    overflow: auto;
}
.session-container table {
    border-collapse: collapse;
}
.session-container td {
    border-bottom: 1px solid #ccc;
    vertical-align: top;
}
.session-container td,
.session-container th {
    padding: 1rem;
    transition: all 0.5s;
}
.session-container .session-details {
    vertical-align: middle;
}
td.session-time {
    text-align: center;
}
.session-title,
td.session-time .session-time-start {
    font-weight: bold;
}
td.session-time .session-time-end {
    opacity: 0.4;
}
.session-container tr:hover td {
    background: #eaeaea;
}
.session-container th {
    background: #333;
    color: #fff;
    font-weight: bold;
}
.session-venue {

}
.session-intro {

}
tr:hover .session-time-hide {
    opacity: 1;
}
.session-time-hide {
    opacity: 0;
}
.session-people-role {
    display: none;
}
.engagement-card-details {
    width: 100%;
    border-collapse: collapse;
}
.engagement-card-details th,
.engagement-card-details td {
    padding: 0.5rem;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
}
.session-row-hidden {
    height: 0px; overflow: hidden;
}

.session-row-hidden td {
    padding:0; margin: 0;
    border: 0 none;

}
/* ===== Core variables ===== */
.af-cal {
  --hour: 72px;
  --minute: calc(var(--hour) / 60);
  --time-col: 80px;
  --day-min: 320px;
  --lane-min: 120px;
  --line: #e7e9ed;
  --line-hr: #eef0f3;
  --bg: #fff;
  --chip: #f7f8fa;
  --head-h: 54px;
  --fade: 56px;
  --vhead: 36px;
  --venue-gap: 10px;
  color: #111;
}

.af-cal * {
  box-sizing: border-box;
}

/* ================= Header ================= */
.af-head {
  display: grid;
  grid-template-columns: var(--time-col) 1fr;
}

.af-time-head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--head-h);
  background: #f7f7f8;
  font-weight: 700;
}

.af-head-viewport {
  position: relative;
  height: var(--head-h);
  background: #f7f7f8;
  overflow: hidden;
}

.af-head-track {
  display: flex;
  will-change: transform;
}

.af-day-head {
  flex: 0 0 auto;
  min-width: var(--day-min);
  padding: 14px 8px;
  border-left: 1px solid var(--line);
  text-align: center;
  font-weight: 800;
}

/* fades on left/right for scroll hint */
.af-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--fade);
  display: none;
  pointer-events: none;
}

.af-fade.left {
  left: 0;
  background: linear-gradient(to right, #f7f7f8, rgba(247, 247, 248, 0));
}

.af-fade.right {
  right: 0;
  background: linear-gradient(to left, #f7f7f8, rgba(247, 247, 248, 0));
}

/* ================= Body grid ================= */
.af-body {
  display: grid;
  grid-template-columns: var(--time-col) 1fr;
  margin-top: 8px;
}

/* ----- Time rail ----- */
.af-timecol {
  position: relative;
  z-index: 2;
  height: calc(var(--minutes) * var(--minute) + var(--vhead));
  overflow: hidden;
  background: #fff;
  border-right: 1px solid var(--line);
}

.af-timecol .af-hour {
  position: absolute;
  top: calc(var(--min, 0) * var(--minute) + var(--vhead));
  left: 0;
  right: 0;
  height: var(--hour);
  border-top: 1px dashed var(--line-hr);
  box-sizing: border-box;
}

.af-timecol .af-hour .lab {
  position: absolute;
  top: 2px;
  left: 8px;
  padding: 0 4px;
  font-size: 13px;
  color: #667085;
  background: #fff;
}

/* ----- Scrollable body ----- */
.af-body-viewport {
  position: relative;
  height: calc(var(--minutes) * var(--minute) + var(--vhead) + 12px);
  overflow: hidden;
  background: #fff;
}

.af-scroll {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.af-scroll::-webkit-scrollbar {
  display: none;
}

/* ================= Days grid ================= */
.af-grid {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
  min-width: 100%;
  min-height: 100%;
  background: var(--bg);
  transform: translateZ(0);
  will-change: transform;
}

.af-grid::before {
  box-sizing: border-box;
}

.af-day-wrap {
  position: relative;
  flex: 1 1 var(--width-pct);

  /*
   * The day must be wide enough for ALL overlap lanes inside its venues.
   * + venue gaps
   * + 16px for .af-day-inner horizontal padding
   */
  min-width: max(
    var(--day-min),
    calc(
      (var(--lane-min) * var(--day-lanes, 1))
      + (var(--venue-gap) * (var(--venue-count, 1) - 1))
      + 16px
    )
  );

  border-right: 1px solid var(--line);
  background: var(--bg);
}

.af-day {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.af-day-inner {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  padding-top: var(--vhead);
  padding-right: 8px;
  padding-left: 8px;
}

/* ================= Venues inside a day ================= */
.af-venues {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: calc(100% - var(--vhead));
  gap: var(--venue-gap);
}

.af-venue-col {
  position: relative;
  flex: 1 1 0;
  min-width: calc(var(--lane-min) * var(--vlanes, 1));
  background: var(--bg);
}

.af-venue-head {
  position: absolute;
  top: calc(-1 * var(--vhead));
  left: 2px;
  right: 2px;
  z-index: 3;
  height: calc(var(--vhead) - 8px);
  line-height: calc(var(--vhead) - 8px);
  padding: 0 6px;
  overflow: hidden;
  background: #f7f7f8;
  border: 1px solid #eceff3;
  text-align: center;
  font-weight: 700;
  color: #374151;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.af-venue-inner {
  position: relative;
  height: 100%;
  padding: 0 2px 6px;
  overflow: visible;
}

/* Single-venue day fills full width */
.af-day[data-vcols="1"] .af-venue-col {
  flex: 1 1 auto;
  min-width: 100%;
}

/* ================= Events ================= */
.af-ev {
  position: absolute;
  top: calc(var(--start-min, 0) * var(--minute));
  left: var(--left, 0);
  width: var(--width, auto);
  height: calc(var(--dur-min, 0) * var(--minute));
  min-height: calc(var(--dur-min, 0) * var(--minute));
  z-index: 4;
  overflow: hidden;
  background: var(--chip);
  border: 1px solid #e5e7eb;
}

.af-ev .ttl {
  padding: 10px 10px 6px;
  font-size: 13px;
  font-weight: 800;
}

.af-ev .meta {
  padding: 0 10px 10px;
  font-size: 12px;
  line-height: 1.25;
  color: #6b7280;
}

.af-ev:hover {
  z-index: 5;
  height: auto !important;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}

/* ================= Navigation buttons ================= */
.af-nav {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  gap: 6px;
}

.af-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e0e2e7;
}

.af-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ================= Misc ================= */
.af-timecol {
  transform: translateZ(0);
  will-change: transform;
}