/* MD_FILE_VERSION: 1.0.016 | CHANGED: 2026-04-13 14-33-40 */
/* Copyright Information
 * =====================
 * Copyright (c) 2026, The Scripps Research Institute
 * Developed by Dr. Gennadii Grabovyi
 *
 * Third-Party Notices and Licenses
 * ================================
 * This UI stylesheet is used with backend chemistry services powered by:
 * 1) RDKit (backend depiction and chemistry): BSD 3-Clause License.
 * See corresponding backend module docstrings for detailed attributions.
 */

/* Main table scroll viewport */

  #mainGridShell{
    display:flex;
    flex-direction:column;
    min-height:200px;
    overflow:hidden;
  }

  #mainGrid{
    /* height is set by JS so the grid fills the screen under the page header */
    flex:1 1 auto;
    min-height:0;
    overflow: auto;                 /* both axes */
    border: 0;                      /* no perimeter border */
    border-radius: 0px;
  }

  #mainGrid table{
    border: 0;
    border-radius: 0;
    overflow: visible;   /* belt & suspenders */
  }  

  /* HEADER: sticks to top inside #mainGrid and stays above everything */
  #mainGrid thead th{
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--main-header-bg);
    border-bottom: var(--tbl-grid-header-w) solid var(--tbl-grid-header);
    padding: 10px;
    font-weight: 500;
    user-select: none;
    cursor: pointer;
  }

  /* ===== Tab strip (worksheet tabs) ===== */
  /* New UI + animations based on new_tab_code.html (CSS knobs preserved). */

  /* --- KNOBS (scoped to the strip for easy tweaking) --- */
  #tabStrip.tab-bar{
    /* Dimensions */
    --tab-height: 40px;
    --tab-width-min: 200px;
    --tab-width-max: 500px;
    --tab-width: var(--tab-width-min); /* fallback for legacy width references */

    /* Shape & Design */
    --top-radius: 0px;
    --bottom-curve: 0px; /* The size of the "feet" */
    --tab-overlap: 0px;  /* Match bottom-curve for seamless overlap */

    /* Auto-scale helpers (derived from --tab-height). Override if desired. */
    --tab-bar-extra: 0px;
    --tab-pad-extra: calc(var(--tab-height) * 0.3157894737); /* 12/38 */
    --tab-pad-x: calc(var(--bottom-curve) + var(--tab-pad-extra));
    --tab-favicon-size: clamp(6px, calc(var(--tab-height) * 0.4210526316), 16px); /* 16/38 */
    --tab-favicon-gap:  clamp(4px, calc(var(--tab-height) * 0.2631578947), 10px); /* 10/38 */
    --tab-title-font-size: 14px;
    --tab-btn-size: clamp(8px, calc(var(--tab-height) * 0.6315789474), 24px); /* 24/38 */
    --tab-btn-icon-size: clamp(6px, calc(var(--tab-height) * 0.2631578947), 10px); /* 10/38 */
    --tab-btn-icon-stroke: clamp(0.9px, calc(var(--tab-height) * 0.0526315789), 2px); /* 2/38 */
    --tab-close-gap: clamp(2px, calc(var(--tab-height) * 0.1052631579), 4px); /* 4/38 */
    --tab-add-size: clamp(8px, calc(var(--tab-height) * 0.7368421053), 28px); /* 28/38 */
    --tab-add-icon-size: clamp(6px, calc(var(--tab-height) * 0.3684210526), 14px); /* 14/38 */
    --tab-add-icon-stroke: clamp(0.9px, calc(var(--tab-height) * 0.0394736842), 1.5px); /* 1.5/38 */
    --tab-add-offset-y: calc((var(--tab-height) - var(--tab-add-size)) * 0.5);
    --tab-nav-btn-size: clamp(14px, calc(var(--tab-height) * 0.55), 22px);
    --tab-nav-icon-size: clamp(7px, calc(var(--tab-height) * 0.35), 12px);

    /* Colors (mapped to current UI theme vars) */
    --bg-bar: rgba(255, 255, 255, 0); /* translucent */
    --bg-tab-active: var(--tab-active-bg);
    --bg-tab-inactive: var(--tab-inactive-bg);
    --bg-tab-hover:  var(--tab-active-bg);
    --text-active:   var(--fg);
    --text-inactive: var(--muted);
    --hover-bg: rgba(0,0,0,0.06);

    /* Extra knobs (safe defaults) */
    --tab-separator-color: rgba(0,0,0,0.22);
    --tab-favicon-bg: var(--accent);
    --tab-favicon-animated-bg: var(--tab-favicon-bg);

    /* Animation Physics */
    --anim-duration: 0.3s;
    --anim-ease: cubic-bezier(0.25, 1, 0.5, 1);
  }
  :root[data-theme="dark"] #tabStrip.tab-bar{
    --bg-bar: rgba(255, 255, 255, 0); /* translucent */
    --hover-bg: rgba(255,255,255,0.10);
    --tab-separator-color: rgba(255,255,255,0.18);
  }
  @supports (background: color-mix(in srgb, black, white)){
    #tabStrip.tab-bar{
      --bg-tab-hover: color-mix(in srgb, var(--tab-active-bg) 55%, var(--tab-inactive-bg) 45%);
    }
  }

  #tabStripShell{
    display: flex;
    align-items: flex-end;
    min-width: 0;
    background: var(--bg-bar, transparent);
  }
  #tabStripShell #tabStrip{
    flex: 1 1 auto;
    min-width: 0;
  }
  #tabStripShell,
  #tabStripShell #tabStrip,
  #tabStripNav,
  #tabStripNav .tab-strip-nav-btn,
  #tabStrip .tab-wrapper,
  #tabStrip .tab,
  #tabStrip .tabtitle,
  #tabStrip .favicon,
  #tabStrip .close-btn,
  #tabStrip .add-btn{
    user-select: none;
    -webkit-user-select: none;
  }

  .tab-bar{
    display: flex;
    align-items: flex-end;
    height: calc(var(--tab-height) + var(--tab-bar-extra));
    background: var(--bg-bar);
    padding: 0 0px;
    margin: 0px 0 0px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar{
    width: 0;
    height: 0;
    background: transparent;
  }

  #tabStripNav{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    height: var(--tab-height, 35px);
    padding: 0 6px 0 4px;
    box-sizing: border-box;
    border-left: 1px solid var(--tab-separator-color, rgba(0,0,0,0.22));
    background: var(--bg-bar, transparent);
  }
  .tab-strip-nav-btn{
    width: var(--tab-nav-btn-size, 18px);
    height: var(--tab-nav-btn-size, 18px);
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-inactive, var(--muted));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
  }
  .tab-strip-nav-btn svg{
    width: var(--tab-nav-icon-size, 10px);
    height: var(--tab-nav-icon-size, 10px);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tab-strip-nav-btn:hover{
    background: var(--hover-bg, rgba(0,0,0,0.06));
    color: var(--text-active, var(--fg));
  }
  .tab-strip-nav-btn:disabled{
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
  }

  .md-tab-rename-popover{
    position: fixed;
    z-index: 146;
    width: min(320px, calc(100vw - 20px));
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid var(--line-dark);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: 0 18px 34px rgba(0,0,0,0.24);
  }
  .md-tab-rename-title{
    margin: 0 0 8px 0;
    color: var(--fg);
    font: 600 13px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  }
  .md-tab-rename-input{
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid var(--line-dark);
    border-radius: 8px;
    background: var(--control-bg);
    color: var(--fg);
    font: 500 14px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    padding: 8px 10px;
    outline: none;
  }
  .md-tab-rename-input:focus{
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
  }
  .md-tab-rename-actions{
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
  .md-tab-rename-btn{
    border: 1px solid var(--line-dark);
    border-radius: 8px;
    background: var(--control-bg);
    color: var(--fg);
    padding: 6px 11px;
    font: 500 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    cursor: pointer;
  }
  .md-tab-rename-btn.primary{
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
  }
  .md-tab-rename-btn:hover{
    filter: brightness(0.98);
  }
  .md-tab-project-popover{
    width: min(460px, calc(100vw - 20px));
  }
  .md-tab-project-list{
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(300px, 48vh);
    overflow: auto;
    padding-right: 4px;
  }
  .md-tab-project-item{
    width: 100%;
    min-height: 34px;
    box-sizing: border-box;
    border: 1px solid var(--line-dark);
    border-radius: 8px;
    background: var(--control-bg);
    color: var(--fg);
    padding: 8px 12px;
    text-align: left;
    font: 500 13px/1.28 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    cursor: pointer;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .md-tab-project-item:hover{
    background: rgba(148,163,184,0.14);
  }
  .md-tab-project-item.is-current{
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  .md-tab-project-empty{
    display: none;
    margin-top: 8px;
    color: var(--muted);
    font: 500 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  }

  /* --- 1. THE WRAPPER (The Sliding Door) --- */
  .tab-wrapper {
    position: relative;
    height: var(--tab-height);
    width: var(--tab-item-w, var(--tab-width-min));
    flex-basis: var(--tab-item-w, var(--tab-width-min));
    margin-right: calc(var(--tab-overlap) * -1);
    overflow: hidden;
    transition:
      width var(--anim-duration) var(--anim-ease),
      flex-basis var(--anim-duration) var(--anim-ease),
      margin-right var(--anim-duration) var(--anim-ease);
    flex-grow: 0;
    flex-shrink: 0;
    z-index: 1;
  }

  /* --- 2. THE INNER TAB (The Content) --- */
  .tab {
    position: relative;
    height: 100%;
    width: var(--tab-item-w, var(--tab-width-min));
    display: flex;
    align-items: center;
    padding: 0 var(--tab-pad-x);
    box-sizing: border-box;
    transform: translateX(0);
    transition: transform var(--anim-duration) var(--anim-ease);
    cursor: pointer;
    user-select: none;
  }

  /* --- SHAPES & STYLES --- */
  .tab-shape {
    position: absolute;
    top: 0; left: var(--bottom-curve); right: var(--bottom-curve); bottom: 0;
    background: var(--bg-tab-inactive);
    border-radius: var(--top-radius) var(--top-radius) 0 0;
    z-index: -1;
  }

  /* The Feet (Curves) */
  .tab-shape::before, .tab-shape::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: var(--bottom-curve);
    height: var(--bottom-curve);
    opacity: 0;
  }
  .tab-shape::before { left: calc(var(--bottom-curve) * -1); }
  .tab-shape::after { right: calc(var(--bottom-curve) * -1); }

  /* Color States - Active */
  .tab-wrapper.active { z-index: 10; }
  .tab-wrapper.active .tab-shape { background: var(--bg-tab-active); }
  .tab-wrapper.active .tab-shape::before, .tab-wrapper.active .tab-shape::after { opacity: 1; }

  /* Color States - Hover */
  .tab:hover .tab-shape { background: var(--bg-tab-hover); }
  .tab-wrapper.active .tab:hover .tab-shape { background: var(--bg-tab-active); }

  /* Target the feet based on the PARENT .tab hover state */
  .tab:hover .tab-shape::before,
  .tab:hover .tab-shape::after {
    opacity: 1;
  }

  /* Gradients for smooth curves */
  .tab-wrapper.active .tab-shape::before { background: radial-gradient(circle at 0 0, transparent 70%, var(--bg-tab-active) 71%); }
  .tab-wrapper.active .tab-shape::after  { background: radial-gradient(circle at 100% 0, transparent 70%, var(--bg-tab-active) 71%); }

  /* Only apply hover color if the tab is NOT active. */
  .tab-wrapper:not(.active) .tab:hover .tab-shape::before {
    background: radial-gradient(circle at 0 0, transparent 70%, var(--bg-tab-hover) 71%);
  }
  .tab-wrapper:not(.active) .tab:hover .tab-shape::after {
    background: radial-gradient(circle at 100% 0, transparent 70%, var(--bg-tab-hover) 71%);
  }

  /* Separator (Moved to LEFT side to fix neighbor visibility issues) */
  .tab::before {
    content: '';
    position: absolute;
    left: calc(var(--tab-overlap) / 2);
    top: 25%;
    bottom: 25%;
    width: 1px;
    background: var(--tab-separator-color);
    opacity: 1;
    transition: opacity 0.2s;
    z-index: 2; /* Ensure it sits on top */
  }

  /* HIDE Logic */
  .tab-wrapper:first-child .tab::before { opacity: 0; }          /* 1) First tab */
  .tab-wrapper.active .tab::before { opacity: 0; }               /* 2) Active tab */
  .tab-wrapper.active + .tab-wrapper .tab::before { opacity: 0; }/* 3) After active */
  .tab-wrapper:hover .tab::before { opacity: 0; }                /* 4) Hovered tabs */
  .tab-wrapper:hover + .tab-wrapper .tab::before { opacity: 0; } /* 4b) Hover neighbor */

  /* Content */
  .favicon { width: var(--tab-favicon-size); height: var(--tab-favicon-size); border-radius: 50%; background: var(--tab-favicon-bg); margin-right: var(--tab-favicon-gap); flex-shrink: 0; }
  .favicon.is-fetch-pulsing { background: var(--tab-favicon-animated-bg); }
  .tablabels{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
  }
  .tabtitle{
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-inactive);
    font-size: var(--tab-title-font-size);
    line-height: 1.15;
    font-weight: 500;
  }
  .tabsubtitle{
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: color-mix(in srgb, var(--text-inactive) 78%, transparent);
    font-size: 10px;
    line-height: 1.22;
    padding-bottom: 1px;
  }
  .tab-wrapper.active .tabtitle { color: var(--text-active); }
  .tab-wrapper.active .tabsubtitle { color: color-mix(in srgb, var(--text-active) 68%, transparent); }
  
  .close-btn, .add-btn {
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-inactive); flex-shrink: 0;
    line-height: 0;
  }
  .close-btn:hover, .add-btn:hover { background: var(--hover-bg); color: var(--text-active); }
  .close-btn svg, .add-btn svg { display:block; stroke: currentColor; fill: none; }
  .close-btn{ width: var(--tab-btn-size); height: var(--tab-btn-size); }
  .close-btn svg{ width: var(--tab-btn-icon-size); height: var(--tab-btn-icon-size); stroke-width: var(--tab-btn-icon-stroke); }

  .close-btn { opacity: 0; margin-left: var(--tab-close-gap); }
  .tab:hover .close-btn, .tab-wrapper.active .close-btn { opacity: 1; }

  /* Add Button Logic */
  .add-btn {
    margin-left: var(--tab-favicon-gap);
    flex-shrink: 0;
    width: var(--tab-add-size);
    height: var(--tab-add-size);
    margin-bottom: var(--tab-add-offset-y);
  }

  /* Make the plus icon inside larger/bolder */
  .add-btn svg {
    width: var(--tab-add-icon-size);
    height: var(--tab-add-icon-size);
    stroke-width: var(--tab-add-icon-stroke);
  }

  /* --- THE CORE ANIMATION STATES --- */
  .tab-wrapper.closed {
    width: 0px !important;
    flex-basis: 0px !important;
    margin-right: 0px !important;
    pointer-events: none;
  }

  /* The inner slide: Content moves LEFT as drawer closes */
  .tab-wrapper.closed .tab {
    transform: translateX(-100%);
  }

  :root {
      --bg:#ffffff; --fg:#0d111a; --muted:#4b5563; --accent:#2563eb;
      --line:#e5e7eb; --line-dark:#cbd5e1; --thead:#f8fafc; --row:#ffffff; --row-alt:#f9fafb;
      /* Table gridlines (tables only; do not reuse for general UI borders) */
      --tbl-grid-v: #e5e7eb;        /* vertical cell dividers */
      --tbl-grid-h: #e5e7eb;        /* horizontal row dividers */
      --tbl-grid-w: 1px;            /* cell gridline width */
      --tbl-grid-header: #cbd5e1;   /* header divider (thead + section headers) */
      --tbl-grid-header-w: 1px;     /* header divider width */
      --tbl-grid-frozen-boundary: rgba(15,23,42,0.40); /* last-frozen-column divider */
      --tbl-grid-frozen-boundary-w: 2px;               /* last-frozen-column divider width */
      /* Tabs + main header (light theme only) */
      --tab-active-bg:   #e4e9ee;  /* active worksheet tab */
      --tab-inactive-bg: #cdcdcd00;  /* inactive worksheet tabs */
      --main-header-bg:  #e4e9ee;  /* main molecular-grid table header */
      --tab-stats-ribbon-bg: #E4E6EE;
      --tab-stats-ribbon-height: 25px;
      --tab-stats-ribbon-font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
      --tab-stats-ribbon-font-size: 14px;
      --tab-stats-ribbon-font-weight: 300;
      --tab-stats-ribbon-line-height: 1.5;
      --tab-stats-ribbon-label-weight: 600;
      --tab-stats-ribbon-count-weight: 600;
      --tab-stats-ribbon-pad-x: 12px;
      --tab-stats-ribbon-item-gap: 24px;
      --tab-stats-ribbon-label-gap: 18px;
      /* Properties modal category tint (light mode) */
      --props-cat-bg:#e4e9ee;
      --w-sel: 16px;      /* selection checkbox col (narrower) */
      --w-id: 72px;       /* Structure ID col (narrower) */
      --w-smis: 300px;    /* SMILES input col (narrower min) */
      --w-res: 96px;      /* each residue col (narrowed) */
      --w-stp: 90px;      /* each staple col (narrowed) */
      --w-cap: 96px;      /* terminal cap columns (narrowed) */
      /* Molecule structure thumbnail size (tunable) */
      --molecule-thumb-w: 120px;
      --molecule-thumb-h: 70px;
      /* Molecule zoom render size (numbers; pixels will be computed) */
      --molecule-zoom-w: 840;  /* change to tune zoom width */
      --molecule-zoom-h: 280;  /* change to tune zoom height */
      --row-h: 90px;          /* default main-grid row height */
      --row-h-min: 34px;      /* hard minimum allowed row height (row-resize drag clamp) */
  /* Zoom panel sizing variables (vw/vh) */
      --pep-zoom-panel-width-vw: 60; /* 60vw */
      --pep-zoom-body-height-vh: 60; /* 60vh */
       /* highlight colors (light theme) */
       --hl-frozen:  #e9ebff;  /* frozen row color for the light mode*/
       --hl-compare: #e8fbe8;  /* comparison row color for the light mode */
       --hl-selected:#eaf2ff;  /* selected (checked) row color for the light mode */
       --scrollbar-size: 16px;
       --scrollbar-thumb: rgba(31,41,55,.35);
       --analogs-row-h: 96px;   /* Row height in analogs table (match structure thumb) */
       --scrollbar-track: transparent;
       color-scheme: light;
       /* Wedge (solid chiral bond) color for light theme */
      --wedge-color: #000000;

      /* ===== Universal SVG theming (inline RDKit SVG) ===== */
      /* Bonds are always monochrome; label colors come from element vars. */
      --md-bond-color: var(--fg);
      --md-label-color: var(--fg);
      --md-annotation-color: var(--md-label-color);
 
      /* Element label palette knobs (tweak these; `--md-el-*` are the active vars). */
      --md-light-el-N:  #1d4ed8;
      --md-light-el-O:  #dc2626;
      --md-light-el-S:  #f59e0b;
      --md-light-el-P:  #c2410c;
      --md-light-el-F:  #22c55e;
      --md-light-el-Cl: #22c55e;
      --md-light-el-Br: #dc2626;
      --md-light-el-I:  #5b21b6;
      --md-light-el-B:  #047857;
 
      /* Dark palette (previous defaults). */
      --md-dark-el-N:  #2890ef;
      --md-dark-el-O:  #ef4444;
      --md-dark-el-S:  #f59e0b;
      --md-dark-el-P:  #f97316;
      --md-dark-el-F:  #22c55e;
      --md-dark-el-Cl: #22c55e;
      --md-dark-el-Br: #ef4444;
      --md-dark-el-I:  #7c3aed;
      --md-dark-el-B:  #10b981;
 
      /* Active palette (light by default; dark mode remaps below). */
      --md-el-N:  var(--md-light-el-N);
      --md-el-O:  var(--md-light-el-O);
      --md-el-S:  var(--md-light-el-S);
      --md-el-P:  var(--md-light-el-P);
      --md-el-F:  var(--md-light-el-F);
      --md-el-Cl: var(--md-light-el-Cl);
      --md-el-Br: var(--md-light-el-Br);
      --md-el-I:  var(--md-light-el-I);
      --md-el-B:  var(--md-light-el-B);
  }
	
  /* === Theme palettes === */
  /* Light is already defined via :root defaults above. Add helpers used across both. */
  :root{
    /* Structure box backgrounds (customize freely; independent from --panel) */
    --struct-bg-light: #ffffff00;      /* light theme structure background */
    --struct-bg: var(--struct-bg-light);

    --panel: #ffffff;          /* cards, modals, menus */
    --control-bg: #ffffff;     /* inputs/buttons bg */
    --tag-bg: #f3f4f6;         /* neutral tag chip */

    /* Semantic UI colors (used for consistent buttons/toggles across panes) */
    --md-green: var(--settings-active-bg);
    --md-orange: #EA580C;
  }

  /* Dark theme overrides */
  :root[data-theme="dark"]{
    /* Neutral charcoal surfaces (no blue) */
    --bg:#303030;         /* page background */
    --fg:#e6e7e9;         /* text (not pure white) */
    --muted:#a0a6b0;      /* secondary text */

    /* keep a gentle accent; change if you want it warmer/cooler */
    --accent:#7aa2ff;

    /* borders/lines */
    --line:#4f525b; /* table vertical border line color */
    --line-dark:#5f636e; /* table horizontal border line color */

    /* Table gridlines (tables only; do not reuse for general UI borders) */
    --tbl-grid-v: #4f525b;        /* vertical cell dividers */
    --tbl-grid-h: #5f636e;        /* horizontal row dividers */
    --tbl-grid-w: 1px;            /* cell gridline width */
    --tbl-grid-header: #5f636e;   /* header divider (thead + section headers) */
    --tbl-grid-header-w: 1px;     /* header divider width */
    --tbl-grid-frozen-boundary: rgba(255,255,255,0.40); /* last-frozen-column divider */
    --tbl-grid-frozen-boundary-w: 2px;                  /* last-frozen-column divider width */

    /* tables/panels */
    --thead:#65686e; /* generic table header color (other tables) */
    --row:#373a45; /* table second row color */
    --row-alt:#32343d; /* table first row color */

    /* Tabs + main header (dark theme only) */
    --tab-active-bg:   #65686e;  /* active worksheet tab */
    --tab-inactive-bg: #32343d00;  /* inactive worksheet tabs */
    --main-header-bg:  #65686e;  /* main molecular-grid table header */
    --tab-stats-ribbon-bg: #65666E;

    /* Structure box backgrounds (customize freely; independent from --panel) */
    --struct-bg-dark: #2a2c3400;  /* dark theme structure background */
    --struct-bg: var(--struct-bg-dark);

    /* cards, menus, inputs */
    --panel:#2a2c34;
    --control-bg:#24262c00; /* inside of an oval background, e.g. buttons, numeric data cells etc. */

    /* neutral tag/chip background */
    --tag-bg:#2b2f36;

    /* highlight colors (dark theme) */
    --hl-frozen:  #303030;  /* frozen row color in the dark mode */
    --hl-compare: #1b3a2b;  /* comparison row color in the dark mode */
    --hl-selected:#1f2a3a;  /* selected (checked) row color in the dark mode */

    --scrollbar-thumb: rgba(229,231,235,.30);
      --scrollbar-track: transparent;
      color-scheme: dark;
      /* Wedge (solid chiral bond) color for dark theme */
      --wedge-color: #ffffff;

    /* Semantic UI colors (dark) */
    --md-green: var(--settings-active-bg);
    --md-orange: #EA580C;
 
      /* Universal SVG element palette: use dark colors in dark mode. */
      --md-el-N:  var(--md-dark-el-N);
      --md-el-O:  var(--md-dark-el-O);
      --md-el-S:  var(--md-dark-el-S);
      --md-el-P:  var(--md-dark-el-P);
      --md-el-F:  var(--md-dark-el-F);
      --md-el-Cl: var(--md-dark-el-Cl);
      --md-el-Br: var(--md-dark-el-Br);
      --md-el-I:  var(--md-dark-el-I);
      --md-el-B:  var(--md-dark-el-B);
  }

  /* Per-component dark tweaks that arent variableized above */
  :root[data-theme="dark"] .tag { background: var(--tag-bg); border-color: var(--line-dark); color: var(--fg); }
  :root[data-theme="dark"] .tag.ok  { border-color:#16a34a; background:#0a2e17; color:#a7f3d0; }
  :root[data-theme="dark"] .tag.bad { border-color:#ef4444; background:#3f0e0e; color:#fecaca; }

  /* Frozen/compare row highlights in dark (use theme variables) */
  :root[data-theme="dark"] #tbl tbody tr.frozen-row td{ background: var(--hl-frozen) !important; }
  :root[data-theme="dark"] #tbl tbody tr.compare-ref-row td{ background: var(--hl-compare) !important; }

  /* ===== Universal inline SVG theming (backend emits `svg.md-svg` + atom `data-el`) ===== */
  svg.md-svg{ display:block; width:100%; height:100%; }

  /* Bonds: always monochrome (theme-driven). Keep server-provided stroke-widths. */
  svg.md-svg path[style*="stroke:"],
  svg.md-svg line,
  svg.md-svg polyline{
    stroke: var(--md-bond-color) !important;
    stroke-linecap: butt !important;
    stroke-linejoin: round !important;
  }

  /* Solid wedges: fill should match bond color (RDKit uses `fill:#...` for wedges). */
  svg.md-svg path[class^="bond-"][style*="fill:#"],
  svg.md-svg path[class*=" bond-"][style*="fill:#"]{
    fill: var(--md-bond-color) !important;
    stroke: var(--md-bond-color) !important;
  }

  /* Atom labels: default monochrome, with optional element tinting. */
  svg.md-svg path[data-md-atom="1"]{ fill: var(--md-label-color) !important; }
  svg.md-svg path[data-el="N"]{  fill: var(--md-el-N)  !important; }
  svg.md-svg path[data-el="O"]{  fill: var(--md-el-O)  !important; }
  svg.md-svg path[data-el="S"]{  fill: var(--md-el-S)  !important; }
  svg.md-svg path[data-el="P"]{  fill: var(--md-el-P)  !important; }
  svg.md-svg path[data-el="F"]{  fill: var(--md-el-F)  !important; }
  svg.md-svg path[data-el="Cl"]{ fill: var(--md-el-Cl) !important; }
  svg.md-svg path[data-el="Br"]{ fill: var(--md-el-Br) !important; }
  svg.md-svg path[data-el="I"]{  fill: var(--md-el-I)  !important; }
  svg.md-svg path[data-el="B"]{  fill: var(--md-el-B)  !important; }
  svg.md-svg path.CIP_Code{ fill: var(--md-annotation-color) !important; }

  /* Monochrome mode: collapse element tints back to label color. */
  :root.md-mono{
    --md-el-N:  var(--md-label-color);
    --md-el-O:  var(--md-label-color);
    --md-el-S:  var(--md-label-color);
    --md-el-P:  var(--md-label-color);
    --md-el-F:  var(--md-label-color);
    --md-el-Cl: var(--md-label-color);
    --md-el-Br: var(--md-label-color);
    --md-el-I:  var(--md-label-color);
    --md-el-B:  var(--md-label-color);
    --md-annotation-color: var(--md-label-color);
  }

  /* Dark mode: ensure native <select> dropdown panels render dark and readable */
  :root[data-theme="dark"] select { color-scheme: dark; }
  :root[data-theme="dark"] select option,
  :root[data-theme="dark"] optgroup { background: var(--panel); color: var(--fg); }
  :root[data-theme="dark"] select option:disabled { color: var(--muted); }

  :root{
    --rg-thumb: 16px;          /* thumb content size */
    --rg-thumb-border: 2px;    /* visual outline around the thumb */
    --rg-thumb-vis: calc(var(--rg-thumb) + 2*var(--rg-thumb-border)); /* true visual diameter */
    --rg-bar:   8px;           /* gray bar + orange fill height */
    --rg-track-h: 24px;        /* touch area height (even number avoids half-pixel fuzz) */
  }

		html,body{
	  	  margin:0;
	      padding:0;
	      background:var(--bg);
      color:var(--fg);
      font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
      overflow:hidden; /* treat page as fixed app shell; scrolling happens inside #mainGrid/side pane/modals */
  	}
	h1{margin:0 0 8px;font-size:20px}
	textarea,input,select,button{
		  border-radius:8px;border:1px solid var(--line-dark);background:var(--control-bg);;color:var(--fg)
		}
	textarea{width:100%;height:220px;resize:vertical;padding:8px 10px}
	input,select,button{padding:8px 10px}
	button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
	.muted{color:var(--muted)}
	.grid{overflow:auto}