/* MD_FILE_VERSION: 1.0.045 | CHANGED: 2026-05-27 10-06-46 */
/* Copyright Information
 * =====================
 * Copyright (c) 2026, The Scripps Research Institute
 * Developed by Dr. Gennadii Grabovyi
 */

/* Table-only: make cell inputs borderless/flat (no inner ovals) */
  #tbl td input[type="text"],
  #tbl td input[type="number"],
  #tbl td textarea{
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    resize: none;
  }
  #tbl td input[type="text"]:focus-visible,
  #tbl td input[type="number"]:focus-visible,
  #tbl td textarea:focus-visible{
    outline: none;
    /* subtle bottom underline for accessibility */
    box-shadow: inset 0 -2px 0 0 var(--accent);
  }


  /* Let JS toggle gutter only when overflow is present */
  #mainGrid, .grid { scrollbar-gutter: auto; }

  /* Data pane: keep a stable right gutter so searching/filtering doesn't change content width. */
  #sidePane .md-props-scroll.grid { scrollbar-gutter: stable; }
  @supports not (scrollbar-gutter: stable){
    /* Fallback: always reserve scrollbar width (prevents row backgrounds from spilling into the gutter). */
    #sidePane .md-props-scroll{ overflow-y: scroll; }
  }

  	table{
 	  border-collapse:separate;border-spacing:0;width:100%;
  	  border:1px solid var(--line);border-radius:10px;
  	  table-layout: fixed; /* keep column widths stable */
  	}

  /* Main molecular table grid: let columns define total width instead of stretching to viewport */
  #tbl{
      width:max-content;
    }

	  /* ===== Main-grid header fill (no layout impact) =====
	     Paint the sticky header background across the full viewport width without adding a
	     positioned element that can transiently affect scrollWidth during side-pane resizes. */
  #mainGrid{
    background-color: var(--bg);
    background-image:
      linear-gradient(var(--main-header-bg), var(--main-header-bg)),
	      linear-gradient(var(--tbl-grid-header), var(--tbl-grid-header));
	    background-repeat: no-repeat;
	    /* JS keeps --md-grid-header-h in sync with thead height (see syncMainGridHeaderSpacer). */
	    background-size:
	      max(0px, calc(100% - var(--md-vscroll-w, 0px))) var(--md-grid-header-h, 0px),
	      max(0px, calc(100% - var(--md-vscroll-w, 0px))) var(--tbl-grid-header-w, 1px);
	    background-position:
	      0 0,
	      0 calc(var(--md-grid-header-h, 0px) - var(--tbl-grid-header-w, 1px));
	  }

  #tabStatsRibbon{
    flex: 0 0 var(--tab-stats-ribbon-height);
    min-height: var(--tab-stats-ribbon-height);
    height: var(--tab-stats-ribbon-height);
    display:flex;
    align-items:center;
    box-sizing:border-box;
    min-width:0;
    background: var(--tab-stats-ribbon-bg);
    border-top: var(--tbl-grid-header-w) solid var(--tbl-grid-header);
    color: var(--fg);
    font-family: var(--tab-stats-ribbon-font-family);
    font-size: var(--tab-stats-ribbon-font-size);
    font-weight: var(--tab-stats-ribbon-font-weight);
    line-height: var(--tab-stats-ribbon-line-height);
  }

  #tabStatsRibbonInner{
    width:100%;
    min-width:0;
    display:flex;
    align-items:center;
    gap: var(--tab-stats-ribbon-item-gap);
    padding: 0 var(--tab-stats-ribbon-pad-x);
    box-sizing:border-box;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #tabStatsRibbon .md-tab-stats-label{
    flex:0 0 auto;
    margin-right: var(--tab-stats-ribbon-label-gap);
    font-weight: var(--tab-stats-ribbon-label-weight);
  }

  #tabStatsRibbon .md-tab-stats-metric,
  #tabStatsRibbon .md-tab-stats-filters{
    flex:0 0 auto;
    min-width:0;
  }

  #tabStatsRibbon .md-tab-stats-count{
    font-weight: var(--tab-stats-ribbon-count-weight);
    font-variant-numeric: tabular-nums;
  }

  #tabStatsRibbon .md-tab-stats-spacer{
    flex: 1 1 auto;
    min-width: 12px;
  }

  #tabStatsRibbon .md-tab-stats-search{
    flex: 0 1 300px;
    min-width: 180px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 0;
    font: inherit;
    color: color-mix(in srgb, var(--muted) 82%, var(--fg) 18%);
  }

  #tabStatsRibbon .md-tab-stats-search-input{
    flex: 1 1 166px;
    min-width: 0;
    height: 24px;
    padding: 0 8px 2px 34px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-image: linear-gradient(
      to bottom,
      transparent calc(50% - 8px),
      color-mix(in srgb, currentColor 66%, transparent 34%) calc(50% - 8px),
      color-mix(in srgb, currentColor 66%, transparent 34%) calc(50% + 8px),
      transparent calc(50% + 8px)
    );
    background-repeat: no-repeat;
    background-size: 1px 100%;
    background-position: 26px 0;
    color: inherit;
    font: inherit;
    font-weight: 400;
    line-height: inherit;
    outline: none;
  }

  #tabStatsRibbon .md-tab-stats-search-input::placeholder{
    color: inherit;
    opacity: 1;
  }

  #tabStatsRibbon .md-tab-stats-search-input::-webkit-search-decoration,
  #tabStatsRibbon .md-tab-stats-search-input::-webkit-search-results-button,
  #tabStatsRibbon .md-tab-stats-search-input::-webkit-search-results-decoration{
    -webkit-appearance: none;
  }

  #tabStatsRibbon .md-tab-stats-search-input::-webkit-search-cancel-button{
    opacity: 0.46;
    transform: scale(0.84);
    transform-origin: center;
    filter: saturate(0.58);
    cursor: pointer;
  }

  #tabStatsRibbon .md-tab-stats-search-nav{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0px;
    min-width: 0;
    min-height: 24px;
    padding-left: 12px;
    position: relative;
    font: inherit;
  }

  #tabStatsRibbon .md-tab-stats-search-nav::before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 16px;
    transform: translateY(-50%);
    background: color-mix(in srgb, currentColor 68%, transparent 32%);
  }

  #tabStatsRibbon .md-tab-stats-search-btn{
    flex: 0 0 auto;
    width: 10px;
    min-width: 10px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
  }

  #tabStatsRibbon .md-tab-stats-search-btn::before{
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
  }

  #tabStatsRibbon #btnTabStatsSearchPrev::before{
    transform: rotate(45deg);
  }

  #tabStatsRibbon #btnTabStatsSearchNext::before{
    transform: rotate(-135deg);
  }

  #tabStatsRibbon .md-tab-stats-search-btn:hover:not(:disabled){
    opacity: 0.88;
  }

  #tabStatsRibbon .md-tab-stats-search-btn:disabled{
    opacity: 0.38;
    cursor: default;
  }

  #tabStatsRibbon .md-tab-stats-search-counter{
    flex: 0 0 auto;
    min-width: 50px;
    text-align: center;
    font: inherit;
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: inherit;
  }

  mark.md-grid-search-mark{
    background: rgba(255, 208, 0, 0.25);
    color: inherit;
    border-radius: 4px;
    padding: 0 2px;
  }

  mark.md-grid-search-mark.md-grid-search-mark--active{
    background: rgba(255, 208, 0, 0.45);
    outline: 2px solid rgba(255, 208, 0, 0.55);
    outline-offset: 2px;
  }

  /* Legacy element kept in the DOM (referenced by older code). It is no longer needed. */
  #mainGridHeaderSpacer{ display:none; }

  /* Allow native text selection in header cells (sorting is double-click in JS). */
  #mainGrid thead th{
    user-select: text;
    cursor: text;
  }

  /* Make native in-cell selection visible even when the whole cell is highlighted. */
  #tbl ::selection{
    background: rgba(250, 204, 21, 0.70);
    color: inherit;
  }
  #tbl ::-moz-selection{
    background: rgba(250, 204, 21, 0.70);
    color: inherit;
  }
  :root[data-theme="dark"] #tbl ::selection{
    background: rgba(250, 204, 21, 0.45);
    color: inherit;
  }
  :root[data-theme="dark"] #tbl ::-moz-selection{
    background: rgba(250, 204, 21, 0.45);
    color: inherit;
  }

  /* ===== Virtualized table spacer rows =====
     These rows preserve scroll height without creating thousands of DOM nodes. */
  #tbl tbody tr.md-vspacer{
    height:auto !important;
    max-height:none !important;
  }
  #tbl tbody tr.md-vspacer td{
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    max-height:none !important;
    position:static !important;
    left:auto !important;
    top:auto !important;
  }

	/* Table gridlines (tables only): controlled by --tbl-grid-* vars (see frontend_theme.css). */
	table td, table th{border-right:var(--tbl-grid-w) solid var(--tbl-grid-v)}
	table td:last-child, table th:last-child{border-right:none}
	thead th{border-bottom:var(--tbl-grid-header-w) solid var(--tbl-grid-header)}
  /* Light mode: darker header column separators (header row only). */
  :root[data-theme="light"] table thead th:not(.frozen-boundary){ border-right-color: #cfd1d9; }
	tbody td, tbody th{border-bottom:var(--tbl-grid-w) solid var(--tbl-grid-h)}
	tbody td{padding:8px;background:var(--row)}
  tbody tr:nth-child(odd) td{background:var(--row-alt)}

  /* Main grid only: keep the far-right header divider visible (aligns with body gridlines). */
  #tbl thead th:last-child:not(.frozen-boundary){
    border-right-width: var(--tbl-grid-w);
    border-right-style: solid;
  }
  /* In dark mode, restore the gridline color (the global last-child rule sets `border-right: none`). */
  :root[data-theme="dark"] #tbl thead th:last-child:not(.frozen-boundary){ border-right-color: var(--tbl-grid-v); }

  /* Main grid only: restore the right-most vertical gridline for body rows.
     (Global rule removes last-child border; #mainGrid has no outer table border.) */
  #tbl tbody tr.md-row td:last-child:not(.frozen-boundary){ border-right: var(--tbl-grid-w) solid var(--tbl-grid-v); }

  /* Main grid zebra striping is JS-driven (stable with virtual spacer rows) */
  #tbl tbody tr.md-row td{ background: var(--row); }
  #tbl tbody tr.md-row.row-alt td{ background: var(--row-alt); }
	.mono{font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
		.tag{display:inline-block;border:1px solid var(--line-dark);padding:2px 6px;border-radius:6px;color:#111;background:#f3f4f6}
		.tag.ok { border-color:#16a34a; background:#dcfce7; color:#14532d }
		.tag.bad{ border-color:#ef4444; background:#fee2e2; color:#7f1d1d }

  /* Center align custom columns (main grid) */
  #tbl td.col-meta { text-align: center; }
  #tbl td.col-meta input[type="text"],
  #tbl td.col-meta input[type="number"]{ text-align: center; }

  /* Residue labels (1-/3-/mixed) should be plain text without pill box */
  #tbl td.col-res .tag{
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
    color: var(--fg);
  }
  #tbl td.col-res .tag.ok,
  #tbl td.col-res .tag.bad{
    border: 0;
    background: transparent;
    color: var(--fg);
  }

  /* Center residue content; give it a steady line box */
  td.col-res { position: relative; }              /* anchor for the star */
  
  /* Clear disabled look */
  button[disabled]{ opacity:.55; cursor:not-allowed }

  .svgbox{
    width:150px;height:104px;display:flex;align-items:center;justify-content:center;
    background: var(--struct-bg); border:0; border-radius:0;
    position:relative;
    /* Fallback padding (CSS % uses width for all sides; overridden below where supported) */
    padding: 5%;
    box-sizing: border-box;
  }
  /* True 5% per-side padding: 5% of height for top/bottom, 5% of width for left/right.
     Implemented by shrinking the SVG inside a size-container to avoid CSS % height pitfall. */
  @supports (width: 1cqw) and (height: 1cqh){
    .svgbox{ padding: 0; container-type: size; }
    .svgbox > svg{
      width: max(0px, calc(100% - 10cqw)) !important;
      height: max(0px, calc(100% - 10cqh)) !important;
    }
  }
  /* In the main grid Structure column, treat the SVG box as an
     absolutely positioned viewport so it cannot change row height.
     The SVG viewBox will handle aspect ratio. */
  #tbl td.col-struct{
    position: relative;
  }
  #tbl td.col-struct .svgbox{
    position:absolute;
    top:1px; bottom:1px; left:1px; right:1px;
    width:auto; height:auto;
  }


  /* SMILES cell: position the eye button top-right */
  #tbl td.col-smis{ position: relative; }
  /* Staple cells also host an eye button */
    #tbl td.col-stp{ position: relative; }
  .btn-eye{
    position:absolute; top:4px; right:6px;
    background: transparent; border: 0; padding: 4px; border-radius: 6px;
    cursor: pointer; color: var(--muted);
  }
    .btn-eye:hover{ background: rgba(0,0,0,0.06); color: var(--fg); }
  /* When a text input is present in the cell, vertically center the eye */
    #tbl td.has-text > .btn-eye{ top:50%; transform: translateY(-50%); }
  
    /* SMILES / Structure columns: reserve space for the eye icon on the right while keeping text truly centered */
      #tbl td.col-smis{ position:relative; padding-right:34px; }
      /* In the Structure column (SMILES-mode), reserve space for the eye icon.
         Do NOT override `position: sticky` on frozen columns. */
      #tbl td.col-struct.smiles-mode{ padding-right:34px; }
  
    /* Small badge for stapled residues in STRUCTURES mode */
  .star-badge{
    position:absolute; top:6px; right:6px;
    font-size:14px; line-height:1; padding:2px 6px;
    background:#f59e0b; color:#fff; border-radius:999px;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
    pointer-events:none;            /* dont block right-click menu */
  }

  /* Use the same star, but positioned top-right when placed on the cell */
  .star-badge.cell { left: auto; right: 6px; top: 6px; }

  /* Wrapper for 1/3/MIXED text cells: center label and leave room for the star on the right */
  /* center perfectly */
  .res-wrap{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;   /* true center */
    min-height: 28px;
    /* remove the old padding-right */
    /* padding-right: 22px; */
  }

  /* reserve space for the star without affecting centering */
  .res-wrap::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;               /* reserve space for star badge */
    height: 100%;
    pointer-events: none;      /* doesnt block clicks */
  }

  /* Column widths
     CSS variables below provide comfortable starting widths for headers; the
     JS sizing logic (initColumnSizing/applyColumnWidth) controls the true min
     width for user resizing so columns can be shrunk well below these values.
     Widths are applied only to header cells; body cells follow table layout. */
  #tbl thead th.col-sel    { width:var(--w-sel); text-align:center }
  #tbl thead th.col-struct { width:var(--w-smis); }
  #tbl thead th.col-id     { width:var(--w-id); }
  #tbl thead th.col-smis   { width:var(--w-smis); }
  #tbl thead th.col-meta   { width:96px; }
  #tbl thead th.col-res    { width:var(--w-res); }
  #tbl thead th.col-stp    { width:var(--w-stp); }
  #tbl thead th.col-cap    { width:var(--w-cap); }
  .col-sel { text-align:center }

  /* Residue header: center number; chip is absolutely positioned so no padding is needed */
  #mainGrid thead th.col-res{ padding: 6px 16px; text-align: center; }

  /* Sort indicator + Excel-like main-grid headers (reserve space for sort arrow) */
  #tbl thead th{
    padding: 8px 16px;
    /* Allow header labels to wrap so columns can shrink; JS still controls
       column widths, and the header row can grow vertically if needed. */
    white-space: normal;
    overflow: hidden;
    word-break: normal;
    overflow-wrap: normal;
    text-align: center;
    /* Ensure inline width matches visible width (no jump on resize) */
    box-sizing: border-box;
  }
  /* Header label span: explicit wrapping so very narrow columns can shrink
     without blocking on a single long word. */
  #tbl thead th .hdr-label{
    display:inline-block;
    white-space:normal;
    overflow-wrap:break-word;
    word-break:break-word;
  }

  /* Column drag/reorder handle (Excel-like grip bar near the top-center of header cells) */
  #tbl thead th .col-drag-handle{
    position:absolute;
    top:4px;
    left:50%;
    transform:translateX(-50%);
    width:56px;
    height:4px;
    border-radius:999px;
    background: rgba(0,0,0,0.22);
    opacity:0;
    transition: opacity 120ms ease, background-color 120ms ease;
    cursor: grab;
    pointer-events:auto;
    z-index:45; /* above sort arrows/resize handles */
  }
  :root[data-theme="dark"] #tbl thead th .col-drag-handle{ background: rgba(255,255,255,0.22); }
  #tbl thead th:hover .col-drag-handle{ opacity:0.45; }
  #tbl thead th .col-drag-handle:hover{ opacity:0.75; }
  body.md-col-dragging #tbl thead th .col-drag-handle{ cursor: grabbing; }
  body.md-col-dragging{ user-select: none; }

  /* Visual cue while dragging: highlight the dragged column perimeter (header + visible body cells) */
  #tbl thead th.md-col-drag-src,
  #tbl tbody td.md-col-drag-src{
    box-shadow:
      inset 2px 0 0 rgba(0,0,0,0.32),
      inset -2px 0 0 rgba(0,0,0,0.32);
  }
  :root[data-theme="dark"] #tbl thead th.md-col-drag-src,
  :root[data-theme="dark"] #tbl tbody td.md-col-drag-src{
    box-shadow:
      inset 2px 0 0 rgba(255,255,255,0.32),
      inset -2px 0 0 rgba(255,255,255,0.32);
  }
  @supports (color: color-mix(in srgb, #000 50%, #fff)){
    #tbl thead th.md-col-drag-src,
    #tbl tbody td.md-col-drag-src{
      box-shadow:
        inset 2px 0 0 color-mix(in srgb, var(--accent) 70%, transparent),
        inset -2px 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
    }
  }

  /* Drag preview: lift the dragged column above its neighbors while it follows the cursor. */
  #tbl thead th.md-col-dragging-col{
    z-index: 60;
  }
  #tbl tbody td.md-col-dragging-col{
    position: relative;
    z-index: 12;
  }

  /* Narrow resize handle at the right edge of resizable header cells (main grid only) */
  #tbl thead th .col-resize-handle{
    position:absolute;
    top:0;
    right:-3px;        /* extend slightly past the border for easier grab */
    width:6px;         /* as requested (Excel-like) */
    height:100%;
    cursor:col-resize;
    z-index:40;
    background:transparent;
  }
  #tbl thead th.sort-asc::after,
  #tbl thead th.sort-desc::after{ content:''; position:absolute; right:5px; top:50%; transform: translateY(-50%); display:block; width:0; height:0; margin:0; }
  #tbl thead th.sort-asc::after{ border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:7px solid currentColor; }
  #tbl thead th.sort-desc::after{ border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid currentColor; }
  /* Show sort arrows inside the Analogs/Library modal header as well */
  #analogsTbl thead th.sort-asc::after,
  #analogsTbl thead th.sort-desc::after{ content:''; position:absolute; right:5px; top:50%; transform: translateY(-50%); display:block; width:0; height:0; margin:0; }
  #analogsTbl thead th.sort-asc::after{ border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:7px solid currentColor; }
  #analogsTbl thead th.sort-desc::after{ border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid currentColor; }
  /* Checkbox column: keep header compact and center the checkbox exactly */
  #tbl thead th.col-sel { padding:6px 4px; }
  #tbl td.col-sel{ position: relative; }
  #tbl td.col-sel input[type="checkbox"],
  #tbl thead th.col-sel input[type="checkbox"]{ display:block; margin:0 auto; }
  #tbl td.col-sel .md-row-pin-btn{
    position:absolute;
    top:6px;
    left: calc(50% + 2px);
    display:block;
    width:18px;
    height:18px;
    padding:0;
    margin:0;
    border:0;
    background:transparent;
    color: rgba(132,132,132,0.88);
    cursor:pointer;
    appearance:none;
    line-height:0;
    transform: translateX(-50%);
    z-index:12;
    transition: color 120ms ease, transform 120ms ease;
  }
  #tbl td.col-sel .md-row-pin-btn:hover,
  #tbl td.col-sel .md-row-pin-btn:focus-visible{
    outline:none;
    color: rgba(112,112,112,0.94);
  }
  #tbl td.col-sel .md-row-pin-btn:active{
    transform: translateX(-50%) translateY(1px);
  }
  #tbl td.col-sel .md-row-pin-btn.is-pinned{
    color: var(--accent);
  }
  #tbl td.col-sel .md-row-pin-icon{
    width:15px;
    height:15px;
    display:block;
    overflow:visible;
  }
  #tbl td.col-sel .md-row-pin-icon .md-row-pin-glyph{
    fill:currentColor;
  }
  #tbl td.col-sel .md-row-pin-icon .md-row-pin-glyph-outline{
    fill-rule:evenodd;
    clip-rule:evenodd;
  }
  #tbl td.col-sel .md-row-pin-icon .md-row-pin-glyph-solid{
    opacity:0;
  }
  #tbl td.col-sel .md-row-pin-btn.is-pinned .md-row-pin-icon .md-row-pin-glyph-outline{
    opacity:0;
  }
  #tbl td.col-sel .md-row-pin-btn.is-pinned .md-row-pin-icon .md-row-pin-glyph-solid{
    opacity:1;
  }
  /* Row numbers under the checkbox (main grid only) */
  #tbl td.col-sel .row-num{
    margin-top: 5px;
    font-size: 13px;
    line-height: 1;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;         /* keep on one line by default; JS may shrink */
    overflow-wrap: normal;
    word-break: normal;
  }
  /* Fallback: allow wrapping when the number can't fit even at the min font size */
  #tbl td.col-sel .row-num.row-num-wrap{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
  }
  :root[data-theme="light"] #tbl td.col-sel .row-num{ color: rgba(0,0,0,0.35); }
  :root[data-theme="dark"] #tbl td.col-sel .md-row-pin-btn{
    color: rgba(190,190,190,0.76);
  }
  :root[data-theme="dark"] #tbl td.col-sel .md-row-pin-btn.is-pinned{
    color: var(--accent);
  }
  :root[data-theme="dark"] #tbl td.col-sel .md-row-pin-btn:hover,
  :root[data-theme="dark"] #tbl td.col-sel .md-row-pin-btn:focus-visible{
    color: rgba(224,224,224,0.88);
  }
  /* Row height handle at the bottom of the checkbox column (main grid only) */
  #tbl td.col-sel .row-resize-handle{
    position:absolute;
    left:0;
    bottom:-3px;        /* extend slightly past the border for easier grab */
    width:100%;
    height:6px;
    cursor:row-resize;
    z-index:30;
    background:transparent;
  }
  /* Main grid row height is controlled via a CSS variable so each tab can have its own setting.
     Use border-box sizing so padding/borders are included in the modeled virtual row height. */
  #tbl tbody tr{
    height: var(--row-h, 64px);
    max-height: var(--row-h, 64px);
    box-sizing: border-box;
  }
  /* Clamp cell height in the main grid body so column width changes
     cannot force rows taller than the configured row height. */
  #tbl tbody td{
    height: var(--row-h, 64px);
    max-height: var(--row-h, 64px);
    box-sizing: border-box;
  }

	/* Allow columns to shrink below content's min-content width */
	table, thead, tbody, tr, th, td { min-width: 0; }
	td, th { overflow: hidden; }

	  /* Strong wrapping for long tokens like SMILES */
	  td, th { word-break: break-word; overflow-wrap: anywhere; }
	  .mono  { white-space: normal; word-break: break-all; overflow-wrap: anywhere; }
	  /* Structure ID cell can be multi-line (stacked IDs) */
	  #tbl tbody td .md-cell-scroll .md-cell-inner.sid-stack{ white-space: pre-line; word-break: normal; overflow-wrap: anywhere; }
	  /* Add-data stacked values (multi-line, with intentional blank lines) */
	  #tbl tbody td .md-cell-scroll .md-cell-inner.md-stack{ white-space: pre-line; word-break: normal; overflow-wrap: anywhere; }
	  /* Structure ID error message */
	  .sid-message{ white-space: normal; word-break: break-word; overflow-wrap: anywhere; }

  /* Wrapped + scrollable cell content (keeps fixed row height) */
  #tbl tbody td .md-cell-scroll{
    display:block;
    width:100%;
    /* Use an explicit pixel-based height so table layout can't treat it as "auto" and grow rows. */
    height: calc(var(--row-h, 64px) - var(--md-cell-pad-y, 12px));
    max-height: calc(var(--row-h, 64px) - var(--md-cell-pad-y, 12px));
    overflow-y:auto;
    overflow-x:hidden;
    box-sizing: border-box;
    scrollbar-width: thin;
  }
  /* Center the content vertically when it fits; when it overflows, the scroll container takes over. */
  #tbl tbody td .md-cell-scroll .md-cell-center{
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    box-sizing:border-box;
  }
  #tbl tbody td .md-cell-scroll .md-cell-center.md-lot-offset{
    align-items:flex-start;
  }
  #tbl tbody td .md-cell-scroll .md-cell-center.md-lot-offset > .md-cell-inner{
    margin-top: var(--md-lot-align-offset, 0px);
  }
	  /* Standard wrapped text block inside a scroll cell */
	  #tbl tbody td .md-cell-scroll .md-cell-inner{
	    display:block;
	    width:100%;
	    box-sizing:border-box;
	    text-align:center;
	    white-space: normal;
	    overflow-wrap: anywhere;
	  }

	  /* Available assays: left-aligned clickable list with hover highlight */
	  #tbl tbody td.md-avail-assays .md-cell-scroll .md-avail-assays-inner{
	    text-align:left;
	  }
	  /* User Comments cells should read like notes, not centered numeric/text data. */
	  #tbl tbody td.md-user-comments-cell .md-cell-scroll .md-cell-inner.md-comments-display{
	    text-align:left;
	  }
	  #tbl tbody td.md-avail-assays .md-avail-assays-line{
	    padding:2px 6px;
	    border-radius:6px;
	    margin:1px 0;
	    line-height:1.35;
	  }
	  #tbl tbody td.md-avail-assays .md-avail-assays-line.clickable{
	    cursor:pointer;
	  }
	  #tbl tbody td.md-avail-assays .md-avail-assays-line.clickable:hover,
	  #tbl tbody td.md-avail-assays .md-avail-assays-line.clickable:focus-visible{
	    background: rgba(0,0,0,0.06);
	    outline:none;
	  }
	  :root[data-theme="dark"] #tbl tbody td.md-avail-assays .md-avail-assays-line.clickable:hover,
	  :root[data-theme="dark"] #tbl tbody td.md-avail-assays .md-avail-assays-line.clickable:focus-visible{
	    background: rgba(255,255,255,0.08);
	  }
	  @supports (color: color-mix(in srgb, #000 50%, #fff)){
	    #tbl tbody td.md-avail-assays .md-avail-assays-line.clickable:hover,
	    #tbl tbody td.md-avail-assays .md-avail-assays-line.clickable:focus-visible{
	      background: color-mix(in srgb, var(--accent) 18%, transparent);
	    }
	  }
		  #tbl tbody td.md-assay-image-cell{
		    overflow:hidden;
		  }
		  #tbl tbody td.md-assay-image-cell .md-assay-image-scroll{
		    max-width:100%;
		    min-width:0;
		    overflow:auto;
		    contain:inline-size;
		  }
		  #tbl tbody td.md-assay-image-cell .md-assay-image-center{
		    align-items:flex-start;
		  }
		  #tbl tbody td.md-assay-image-cell .md-assay-image-inner,
		  #tbl tbody td.md-assay-image-cell .md-assay-image-prompt-inner{
		    width:100%;
		    max-width:100%;
		    min-width:0;
		    text-align:center;
		    white-space:normal;
		    overflow-wrap:anywhere;
		  }
		  #tbl tbody td.md-assay-image-cell .md-assay-image-line{
		    display:flex;
		    align-items:center;
		    justify-content:center;
		    flex-wrap:wrap;
		    gap:6px;
		    min-height:1.35em;
		    padding:2px 4px;
		    box-sizing:border-box;
		  }
		  #tbl tbody td.md-assay-image-cell .md-assay-image-line-blank{
		    padding:0;
		  }
		  #tbl tbody td.md-assay-image-cell .md-assay-image-thumb{
		    display:block;
		    max-width:100%;
		    max-height:max(18px, calc(var(--row-h, 64px) - 18px));
		    width:auto;
		    height:auto;
		    object-fit:contain;
		    border:1px solid var(--line-dark);
		    border-radius:4px;
		    background:#fff;
		    box-sizing:border-box;
		    cursor:zoom-in;
		    transition:max-width 140ms ease, max-height 140ms ease, width 140ms ease, height 140ms ease;
		  }
		  #tbl tbody td.md-assay-image-cell .md-assay-image-text,
		  #tbl tbody td.md-assay-image-cell .md-assay-image-text-line{
		    display:block;
		    font:12px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
		    color:var(--muted);
		    overflow-wrap:anywhere;
		  }
		  #tbl tbody td.md-assay-image-cell .md-assay-image-see-btn{
		    appearance:none;
		    border:1px solid var(--line-dark);
		    border-radius:6px;
		    background:var(--panel);
		    color:var(--text);
		    padding:4px 8px;
		    font:600 12px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
		    cursor:pointer;
		    max-width:100%;
		  }
		  #tbl tbody td.md-assay-image-cell .md-assay-image-see-btn:hover,
		  #tbl tbody td.md-assay-image-cell .md-assay-image-see-btn:focus-visible{
		    border-color:var(--accent);
		    outline:none;
		  }
		  .md-assay-image-context-menu{
		    position:fixed;
		    z-index:240;
		    min-width:140px;
		  }
		  .md-assay-image-preview{
		    position:fixed;
		    inset:0;
		    z-index:230;
		    align-items:center;
		    justify-content:center;
		    padding:24px;
		    background:rgba(0,0,0,.72);
		    box-sizing:border-box;
		  }
		  .md-assay-image-preview-img{
		    max-width:min(96vw, 1400px);
		    max-height:92vh;
		    width:auto;
		    height:auto;
		    object-fit:contain;
		    background:#fff;
		    border-radius:6px;
		    box-shadow:0 18px 50px rgba(0,0,0,.35);
		    cursor:zoom-out;
		  }
		  /* Available PK studies / QC data: one record per line with request/report links. */
	  #tbl tbody td.md-avail-pk-studies,
	  #tbl tbody td.md-avail-qc-data{
	    overflow:hidden;
	  }
	  #tbl tbody td.md-avail-pk-studies .md-cell-scroll,
	  #tbl tbody td.md-avail-qc-data .md-cell-scroll{
	    max-width:100%;
	    min-width:0;
	    overflow-x:hidden;
	    contain:inline-size;
	  }
	  #tbl tbody td.md-avail-pk-studies .md-cell-scroll .md-pk-studies-inner,
	  #tbl tbody td.md-avail-qc-data .md-cell-scroll .md-pk-studies-inner{
	    text-align:left;
	    white-space:normal;
	    overflow-wrap:normal;
	    min-width:0;
	    max-width:100%;
	  }
	  #tbl tbody td.md-avail-pk-studies .md-pk-study-line,
	  #tbl tbody td.md-avail-qc-data .md-pk-study-line{
	    padding:2px 6px;
	    border-radius:6px;
	    margin:1px 0;
	    line-height:1.35;
	    white-space:nowrap;
	    overflow:hidden;
	    text-overflow:ellipsis;
	    max-width:100%;
	  }
	  #tbl tbody td.md-avail-pk-studies .md-pk-study-link,
	  #tbl tbody td.md-avail-pk-studies .md-pk-report-link,
	  #tbl tbody td.md-avail-qc-data .md-pk-study-link,
	  #tbl tbody td.md-avail-qc-data .md-pk-report-link{
	    color:var(--accent);
	    text-decoration:none;
	    cursor:pointer;
	  }
	  #tbl tbody td.md-avail-pk-studies .md-pk-study-link:hover,
	  #tbl tbody td.md-avail-pk-studies .md-pk-study-link:focus-visible,
	  #tbl tbody td.md-avail-pk-studies .md-pk-report-link:hover,
	  #tbl tbody td.md-avail-pk-studies .md-pk-report-link:focus-visible,
	  #tbl tbody td.md-avail-qc-data .md-pk-study-link:hover,
	  #tbl tbody td.md-avail-qc-data .md-pk-study-link:focus-visible,
	  #tbl tbody td.md-avail-qc-data .md-pk-report-link:hover,
	  #tbl tbody td.md-avail-qc-data .md-pk-report-link:focus-visible{
	    text-decoration:underline;
	    outline:none;
	  }
	  #tbl tbody td.md-avail-pk-studies .md-pk-report-all,
	  #tbl tbody td.md-avail-qc-data .md-pk-report-all{
	    border:0;
	    background:transparent;
	    padding:0;
	    margin:0;
	    font:inherit;
	    appearance:none;
	  }
	  #tbl tbody td.md-avail-pk-studies .md-pk-report-missing,
	  #tbl tbody td.md-avail-qc-data .md-pk-report-missing{
	    color:var(--muted);
	  }
	  #tbl tbody td.md-change-registration .md-change-registration-inner{
	    text-align:center;
	  }
	  #tbl tbody td.md-change-registration .md-change-registration-line{
	    white-space:nowrap;
	    overflow:hidden;
	    text-overflow:ellipsis;
	    max-width:100%;
	  }
	  #tbl tbody td.md-change-registration .md-change-registration-link{
	    color:var(--accent);
	    text-decoration:none;
	    cursor:pointer;
	  }
	  #tbl tbody td.md-change-registration .md-change-registration-link:hover,
	  #tbl tbody td.md-change-registration .md-change-registration-link:focus-visible{
	    text-decoration:underline;
	    outline:none;
	  }
	  #tbl tbody td .md-cell-scroll .md-cell-inner.md-editable{ cursor:text; }
	  /* Spreadsheet-like focus underline for inline editors */
	  #tbl tbody td .md-cell-scroll .md-cell-inner[contenteditable="true"]:focus-visible{
	    outline:none;
	    box-shadow: inset 0 -2px 0 0 var(--accent);
  }

  /* Keep terminal cap headers/cells single-line and compact */
  th.col-cap, td.col-cap{ white-space: nowrap; word-break: normal; overflow-wrap: normal; text-overflow: ellipsis; overflow: hidden; }
  /* Plain label for caps (no pill, no background) */
  .cap-label{
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
    display:inline-block; width:100%; text-align:center;
    white-space:nowrap;
    font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  }

  /* Unify fonts and centering for all data values */
  .data-value{ display:inline-block; width:100%; text-align:center; white-space:nowrap; font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; }
  #tbl tbody td.md-formula-cell .data-value{ white-space:pre; }
  #tbl td input[type="text"], #tbl td input[type="number"], #tbl td textarea{ font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; }
  /* Hide number spinners to avoid layout shift */
  #tbl input[type=number]::-webkit-outer-spin-button, #tbl input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin:0; }
  #tbl input[type=number]{ -moz-appearance:textfield; }

	/* Inputs/areas should fit their cell exactly */
	input, textarea { box-sizing: border-box; width: 100%; min-width: 0; }

	.nowrap-ellipsis {
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
  }

  /* Center all data cells and inputs in the main molecular table grid */
  #tbl td { padding: 6px 10px; text-align: center; --md-cell-pad-y: 12px; }
  /* Loading placeholders (ellipsis) should be centered vertically in fixed-height rows. */
  #tbl tbody td.loading{ vertical-align: middle; }
  /* Structure column: slightly tighter padding so thumbnails can occupy more of the cell.
      Other columns keep the default padding above. */
  #tbl td.col-struct { padding: 3px 6px; --md-cell-pad-y: 6px; }
  #tbl td input[type="text"],
  #tbl td input[type="number"],
  #tbl td textarea { text-align: center; }
  #tbl .mono { text-align: center; }

  /* Center structure boxes within their cells */
  .svgbox, .svgbox-sm { margin-left: auto; margin-right: auto; }

  /* Center all cells in the Analogs table */
  #analogsTbl td { text-align: center; }
  
  /* Analogs status line */
  #analogsStatus{ text-align:center; color: var(--muted); font-weight:600; min-height: 0; margin: 0; display:inline-block; }
  .dots{ display:inline-block; width:22px; text-align:left; margin-left:3px }
  .dots span{ display:inline-block; opacity:0; animation: dotsFade 1s infinite }
  .dots span:nth-child(1){ animation-delay: 0s }
  .dots span:nth-child(2){ animation-delay: .2s }
  .dots span:nth-child(3){ animation-delay: .4s }
  @keyframes dotsFade{ 0%{opacity:0} 50%{opacity:1} 100%{opacity:0} }
  
  /* ===== Data pane: Add Molecules Data catalog ===== */
  .md-props-cat-table{
    width:100%;
    min-width:100%;
    table-layout:fixed; /* stable columns even when content changes */
    border:0;
    border-radius:0;
    outline:0;
    box-shadow:none;
    background:transparent;
    border-collapse:separate;
    border-spacing:0;
    border-right:1px solid var(--line-dark);
  }

  /* Category header: single full-width row */
  .md-props-cat-table thead th.md-props-cat-hdr{
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--panel);
    border-bottom: var(--tbl-grid-header-w) solid var(--tbl-grid-header);
    padding: 10px 10px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing:border-box;
  }
  .md-props-cat-table thead th.md-props-cat-hdr::after{
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    right:calc(-1 * var(--md-props-scrollbar-gutter, 0px));
    width:var(--md-props-scrollbar-gutter, 0px);
    background:inherit;
    border-bottom: var(--tbl-grid-header-w) solid var(--tbl-grid-header);
    pointer-events:none;
  }
  :root:not([data-theme="dark"]) .md-props-cat-table thead th.md-props-cat-hdr{
    background: var(--props-cat-bg);
  }

  /* Item grid cells */
  .md-props-cat-table td.md-props-item-cell{
    padding: 10px 10px;
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    border-bottom:1px solid rgba(15,23,42,0.08);
    border-right:1px solid rgba(15,23,42,0.08);
    font-size:13px;
    line-height:1.2;
    color:var(--fg);
    background:transparent;
    box-sizing:border-box;
  }
  :root[data-theme="dark"] .md-props-cat-table td.md-props-item-cell{
    border-bottom:1px solid rgba(255,255,255,0.06);
    border-right:1px solid rgba(255,255,255,0.06);
  }
  .md-props-cat-table td.md-props-item-cell:last-child{
    border-right:0;
  }
  .md-props-cat-table td.md-props-item-cell.md-props-empty{
    cursor: default;
    pointer-events: none;
  }

  /* Stable zebra striping (JS assigns row classes so filtering doesn't change colors). */
  .md-props-cat-table tbody tr.md-props-row-alt td{ background: var(--row-alt); }
  .md-props-cat-table tbody tr:not(.md-props-row-alt) td{ background: var(--row); }

  /* Hover: highlight only the hovered cell (not the whole row). */
  .md-props-cat-table td.md-props-item-cell:not(.md-props-empty):hover{ background: #f1f5f9; }
  :root[data-theme="dark"] .md-props-cat-table td.md-props-item-cell:not(.md-props-empty):hover{ background: var(--bg); }

  /* Focus (keyboard) */
  .md-props-cat-table td.md-props-item-cell:focus{
    outline: 2px solid rgba(37,99,235,0.45);
    outline-offset: -2px;
  }
  :root[data-theme="dark"] .md-props-cat-table td.md-props-item-cell:focus{
    outline-color: rgba(122,162,255,0.55);
  }

  /* Search highlight (label substring matches). */
  .md-props-cat-table mark{
    background: #facc15;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
  }
  :root[data-theme="dark"] .md-props-cat-table mark{
    background: rgba(250, 204, 21, 0.28);
    color: inherit;
  }

  /* Search highlight (description-only matches): tint whole label text. */
  .md-props-cat-table td.md-props-item-cell.md-props-hit-desc{
    color: var(--accent);
    font-weight: 600;
  }

  /* Remove the very bottom boundary line; rely on the dashed frame. */
  .md-props-groups .md-props-cat-table:last-child tbody tr:last-child td{
    border-bottom: 0;
  }

  /* Header residue filter chip (compact, absolute to the right) */
  th .res-filter-chip{
    position:absolute; right:6px; top:4px;
    display:inline-flex; align-items:center; gap:6px;
    padding:2px 5px; border:1px solid var(--line-dark); border-radius:8px;
    font-size:8px; background:var(--tag-bg); color:var(--fg);
    white-space: nowrap; max-width: 30%;
  }  /* Residue header chip on the left to avoid sort arrow overlap */
  #tbl thead th.col-res .res-filter-chip{ left:8px; right:auto; }
  th .res-filter-chip button{ border:0; background:transparent; color:inherit; cursor:pointer; padding:0 2px; }

  /* Center the stacked reagent links */
  .stack-links { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  #tbl tbody td.md-change-reagent-info .md-change-reagent-info-inner{
    text-align:center;
  }
  #tbl tbody td.md-change-reagent-info .md-change-reagent-info-line{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }
  #tbl tbody td.md-change-reagent-info .md-change-reagent-info-link{
    color:var(--accent);
    text-decoration:none;
    cursor:pointer;
  }
  #tbl tbody td.md-change-reagent-info .md-change-reagent-info-link:hover,
  #tbl tbody td.md-change-reagent-info .md-change-reagent-info-link:focus-visible{
    text-decoration:underline;
    outline:none;
  }