/* Sealion viewer layout & canvas styles
   Extracted from style.css for clarity. */

:root{
  --label-width: 260px;
  --header-height: 30px;
  --overview-height: 48px;
  --row-height: 20px;
  --consensus-height: 20px;
  /* default viewer height; tweak this CSS variable to tune responsive sizing */
  --sealion-height: 60vh;
  
  /* Light mode colors */
  --bg-color: #f3f3f3;
  --text-color: #212529;
  --input-bg: #fff;
  --input-border: #dee2e6;
  --input-focus-border: #86b7fe;
  --input-focus-shadow: rgba(13, 110, 253, 0.25);
  --placeholder-color: #6c757d;
  --divider-gradient: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 70%, rgb(150, 150, 150) 100%);
  --editable-hover-border: #aaa;
  --editable-focus-border: #0d6efd;
  --editable-focus-bg: rgba(13, 110, 253, 0.1);
}

/* Dark mode colors */
.dark-mode {
  --bg-color: #252525;
  --text-color: #d4d4d4;
  --input-bg: #1e1e1e;
  --input-border: #404040;
  --input-focus-border: #5ba3ff;
  --input-focus-shadow: rgba(91, 163, 255, 0.25);
  --placeholder-color: #888;
  --divider-gradient: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 70%, rgb(100, 100, 100) 100%);
  --editable-hover-border: #666;
  --editable-focus-border: #5ba3ff;
  --editable-focus-bg: rgba(91, 163, 255, 0.1);
}

/* 2-column grid: labels | header+alignment */
#sealion{ display:grid; grid-template-columns: var(--label-width) 1fr; grid-template-rows: 1fr; flex:1; min-height:0; }
#labels{ grid-column:1; grid-row:1; background: var(--bg-color); display:flex; flex-direction:column; position:relative; overflow:hidden; }
#header{ grid-column:2; grid-row:1; background: var(--bg-color); overflow:hidden; display:flex; flex-direction:column; }
#alignment{ grid-column:2; grid-row:1; margin-top: calc(var(--overview-height) + var(--header-height) + var(--consensus-height)); position:relative; overflow:visible; height: calc(100% - var(--overview-height) - var(--header-height) - var(--consensus-height)); }

/* allow grid children to shrink below their content intrinsic size
  so the grid keeps to viewport space and the inner scrollers handle overflow */
#sealion > * { min-width: 0; min-height: 0; }

/* make inner containers fill their grid cells so canvases are viewport-backed
  and scrolling happens inside the scroll containers */
#labels, #header { height: 100%; }
#left-inner, #seq-inner { height: 100%; box-sizing: border-box; }

/* Labels column structure with filter box and two header canvases stacked at top */
#label-filter{
  width: var(--label-width);
  height: var(--overview-height);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 0.5rem;
  box-sizing: border-box;
}
#label-filter-box{
  width: 100%;
  height: 1.5rem;
  display: block;
  border: 1px solid var(--input-border);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  color: var(--text-color);
  background-color: var(--input-bg);
  background-clip: padding-box;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  /* box-sizing: border-box; */
}
#label-filter-box:focus{
  outline: 0;
  border-color: var(--input-focus-border);
  background-color: var(--input-bg);
  box-shadow: 0 0 0 0.25rem var(--input-focus-shadow);
}
#label-filter-box::placeholder{
  color: var(--placeholder-color);
  opacity: 1;
}
#labels-header-div{ 
  width: var(--label-width); 
  height: var(--header-height); 
  display: block; 
  flex-shrink: 0; 
}
#labels-consensus-div{ 
  width: var(--label-width); 
  height: var(--consensus-height); 
  display: flex; 
  flex-shrink: 0; 
  align-items: center; 
  justify-content: space-between; 
  padding-left: 48px; /* Indent to align with label text (not line numbers) */
  padding-right: 8px; 
}
#left-inner{ flex: 1; min-height: 0; position: relative; }

/* draggable divider at right edge of labels column to resize label width - now extends full height */
#label-divider{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 10px; /* hit target width */
  cursor: col-resize;
  z-index: 50;
  background: var(--divider-gradient);
}
@media (hover:hover){
  #label-divider:hover{ background: var(--divider-gradient); }
}

/* The alignment-scroll is the only scroller in the layout */
/*
  Keep scrollbars visible and reserve gutter to avoid layout shift.
  Note: macOS system preferences or browser overlay-scrollbar behavior may still hide the visual scrollbar
  even when gutter is reserved; `scrollbar-gutter: stable` helps keep layout stable across states.
*/
#alignment-scroll{ width:100%; height:100%; overflow: scroll; position:relative; scrollbar-gutter: stable both-edges; -ms-overflow-style: scrollbar; }

#overview-canvas{ width:100%; height: var(--overview-height); display:block; }
#header-canvas{ width:100%; height: var(--header-height); }
#consensus-canvas{ width:100%; height: var(--consensus-height); display:block; }
#labels-canvas{ width: var(--label-width); position:absolute; left:0; top:0; }
#seq-canvas{ position:absolute; left:0; top:0; z-index: 3; pointer-events: auto; }
/* seq-canvas receives pointer events for selection; script forwards wheel events to the scroller. */

#seq-inner{ position:relative; }
#seq-spacer{ display:block; }

/* Editable tag and bookmark names */
.tag-name-edit,
.bookmark-name-edit {
  display: inline-block;
  border-bottom: 1px dashed transparent;
  cursor: text;
  outline: none;
}

.tag-name-edit:hover,
.bookmark-name-edit:hover {
  border-bottom-color: var(--editable-hover-border);
}

.tag-name-edit:focus,
.bookmark-name-edit:focus {
  border-bottom-color: var(--editable-focus-border);
  background-color: var(--editable-focus-bg);
}

/* Drag-and-drop cursor for label canvas */
#labels-canvas.draggable {
  cursor: grab;
}

#labels-canvas.draggable:active {
  cursor: grabbing;
}

/* debug HUD removed; use console for diagnostics */