/* --- Lock the page at 100vh and prevent outer scrolling --- */
html,
body {
  overflow: hidden; /* no page scroll */
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The Bootstrap row already has h-100 via HTML; ensure it can shrink */
.row.h-100 {
  min-height: 0;
}

/* --- Columns: allow flex children to shrink & manage their own overflow --- */
#player-container {
  min-height: 0;
  overflow: hidden;
}
.activity-panel {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

/* Make only the activity list scroll */
#activity-list {
  min-height: 0;
  overflow: auto; /* the only scrollbar */
}

/* --- Player: fill remaining space in its column without forcing page growth --- */
#player {
  width: 100%;
  height: auto; /* flex controls height */
  min-height: 0; /* allow shrink below previous 360px if needed */
  flex: 1 1 0; /* take remaining vertical space in left column */
  background: #fff;
  position: relative;
  overflow: hidden;
}

/* Controls sit under the player; no extra page growth */
#controls {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* --- Scaled content wrap + iframe + overlay --- */
#wrap {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}

#iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#ovl {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- Timeline --- */
#timeline {
  flex: 1;
  height: 8px;
  background: #c0c2c5; /* light grey base track */
  position: relative;
  border-radius: 4px;
  cursor: pointer;
  overflow: visible; /* contains the black fill cleanly */
}

/* Played progress (translucent so idle shading stays visible) */
#prog {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #000; /* solid black fill */
  border-radius: 4px; /* keep rounded leading edge */
  z-index: 4;
}

/* Idle shading & markers */
.segment.idle {
  position: absolute;
  top: 0;
  height: 100%;
  background: #f3f4f6; /* very light grey */
  z-index: 1;
}

.marker {
  position: absolute;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  transform: translateX(-50%);
  z-index: 5;
}

/* one color per event */
.marker.snapshot {
  background: #2ecc71;
} /* you used .url; alias kept below */
.marker.click {
  background: #16a085;
}
.marker.input-typing {
  background: #2980b9;
}
.marker.input-change {
  background: #3498db;
}

.marker.dom-add {
  background: #e67e22;
}
.marker.dom-remove {
  background: #d35400;
}
.marker.dom-attr {
  background: #f39c12;
}
.marker.dom-text {
  background: #e74c3c;
}

.marker.scroll {
  background: #95a5a6;
}
.marker.wheel {
  background: #bdc3c7;
}

.marker.move {
  background: #7f8c8d;
}
.marker.down {
  background: #1abc9c;
}
.marker.up {
  background: #2c3e50;
}
.marker.contextmenu {
  background: #8e44ad;
}

.marker.focus {
  background: #8e44ad;
}
.marker.blur {
  background: #9b59b6;
}

.marker.dropdown {
  background: #27ae60;
}
.marker.select {
  background: #34495e;
}

.marker.dialog {
  background: #ff0000;
}
.marker.submit {
  background: #0c4c6c;
}
.marker.invalid {
  background: #c0392b;
}

.marker.url {
  background: #2ecc71;
}

.marker.container-replace {
  background: #f1c40f;
}

/* Tooltip for markers */
#hint {
  position: absolute;
  display: none;
  padding: 2px 6px;
  font: 11px/1 sans-serif;
  background: #333;
  color: #fff;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -120%);
  z-index: 20;
}

/* --- Overlay visuals --- */
.mouse {
  position: absolute;
  width: 18px; /* smaller than 24px */
  height: 28px; /* smaller than 36px */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="28" viewBox="0 0 448 512"><path fill="%2334495e" d="M77.3 2.5c8.1-4.1 17.9-3.2 25.1 2.3l320 239.9c8.3 6.2 11.6 17 8.4 26.8s-12.4 16.4-22.8 16.4l-152.3 0 88.9 177.7c7.9 15.8 1.5 35-14.3 42.9s-35 1.5-42.9-14.3l-88.9-177.7-91.3 121.8c-6.2 8.3-17 11.6-26.8 8.4S64 434.3 64 424L64 24c0-9.1 5.1-17.4 13.3-21.5z"/></svg>')
    center/contain no-repeat;
  transform: translate(-4px, -4px); /* nudge tip after size change */
  pointer-events: none;
  z-index: 9;
}

.rip {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 2px solid #34495e;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: r 0.6s ease-out;
  z-index: 8;
}

@keyframes r {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
  }
}

.sel {
  position: absolute;
  background: rgba(0, 120, 215, 0.35);
  border: 1px solid rgba(0, 120, 215, 0.6);
  pointer-events: none;
  z-index: 7;
}

.warn,
.dlg {
  position: absolute;
  font-size: 12px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 10;
}

.warn {
  padding: 5px 8px;
  background: #ffe9e9;
  border: 1px solid #d0021b;
  color: #900;
  max-width: 220px;
  animation: fadeW 3s forwards;
}

@keyframes fadeW {
  0%,
  85% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.dlg {
  padding: 8px 10px;
  background: #eee;
  border: 1px solid #666;
  color: #000;
  max-width: 260px;
  animation: fadeD 3s forwards;
}

@keyframes fadeD {
  0%,
  90% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.style2 {
  height: 60px;
  min-height: 60px;
  max-height: 60px;
}

.style3 {
}

.style4 {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
}

.style5 {
  font-size: 14px;
}

.style6 {
  margin-left: 3px;
}

.style7 {
  width: 40px;
  min-width: 40px;
  max-width: 50px;
}

.style8 {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
}

.style9 {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
}

.activity-filter-menu {
  min-width: 280px;
  max-width: 340px;
  max-height: 60vh;
  overflow: auto;
}

.activity-filter-menu .dropdown-header {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #6c757d;
  margin-top: 0.25rem;
}

/* === Fullscreen theme-aware overrides (append at end) === */
#player-container:-webkit-full-screen {
  background: var(--bs-body-bg, #fff);
}
#player-container:fullscreen,
#player-container:-webkit-full-screen {
  background: var(--bs-body-bg, #fff);
}

/* Active item while playback progresses */
.activity-active {
  position: relative;
  background: rgba(56, 132, 255, 0.12) !important;
  transition:
    background 200ms ease,
    box-shadow 200ms ease;
}

[data-bs-theme="dark"] .btn-outline-secondary {
  color: #fff !important;
}

.style1 {
  display: grid;
  grid-template-rows: 1fr 1fr; /* two equal rows */
  height: calc(100vh - 40px);
  min-height: 100%;
  max-height: 100%;
}

.style10 {
  overflow: auto;
  height: 40%;
  min-height: 40%;
  max-height: 40%;
}

.style11 {
  overflow: auto;
  height: 30%;
  min-height: 30%;
  max-height: 30%;
}

.header {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
}

.main-wrapper {
  height: 100%;
  overflow: hidden; /* no page scroll */
  display: flex;
  flex-direction: column;
}

.style12 {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
}

.sessions-table {
  flex: 1;
}

.style13 {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

.style14 {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
}

.style15 {
}

.sessions-table-table-head {
  z-index: auto;
}

.cuform {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

/* Needed for scrollable children inside a flex column */
.min-h-0 {
  min-height: 0 !important;
}

#activity-panel .panel-section {
  flex: 1 1 0; /* 3 equal sections */
  min-height: 0; /* allow inner overflow */
  overflow: hidden; /* keep scroll inside */
}

#activity-panel .section-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto; /* make section body scroll */
}

.style16 {
  overflow: auto;
}

.style17 {
}