/* Shared per-column table filter widgets -- see js/gdp_table_filters.js for
   the matching behavior. Ported from network/new_poly_target_results.php's
   Drug Deep-Dive filter UI so every analysis results page can share one
   copy instead of re-pasting the same ~250 lines of CSS+JS each time.

   Uses this site's existing --main-color/--light-bg/--border-color custom
   properties (defined identically across the enrichment/network pages), with
   inline fallbacks for --secondary-text/--white/--shadow-lg, which not
   every page defines. */

/* right:26px, not the header's own edge -- the base DataTables header style
   (table.dataTable thead th) already reserves the right-hand ~10-23px for
   its own sort caret (.sorting:after), so a filter icon at the header's
   edge would sit directly on top of it. */
.gdp-catfilter-trigger {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  cursor: pointer; color: var(--secondary-text, #64748b); font-size: 12px; padding: 4px;
}
.gdp-catfilter-trigger:hover { color: var(--main-color, #7C3AED); }

/* position:fixed (viewport-relative), appended to <body> -- not absolute
   inside the table's own container -- because several of these pages wrap
   their results table in a container with overflow:hidden for rounded
   corners; an absolutely-positioned menu there gets clipped once the table
   shrinks (e.g. after clearing every checkbox drops it to "no matching
   records"), including the very scrollbar/rows needed to fix it. */
.gdp-catfilter-menu {
  display: none; position: fixed; z-index: 1000;
  background: var(--white, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px;
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.10)); padding: 8px 0; min-width: 220px; max-height: 280px; overflow-y: auto;
}
.gdp-catfilter-menu.open { display: block; }
.gdp-catfilter-item { display: flex; align-items: center; gap: 8px; padding: 5px 14px; font-size: 13px; font-weight: 400; cursor: pointer; }
.gdp-catfilter-item:hover { background: var(--light-bg, #F3F8F5); }
/* Single-select menus rendered as plain <a href> links (full-page-reload
   pages, e.g. protein.php) mark the currently-active choice this way, since
   there's no checkbox state to reflect it otherwise. */
a.gdp-catfilter-item { text-decoration: none; color: inherit; }
a.gdp-catfilter-item.active { background: var(--light-bg, #F3F8F5); color: var(--main-color, #7C3AED); font-weight: 600; }
.gdp-catfilter-count { color: var(--secondary-text, #64748b); font-size: 0.85em; margin-left: auto; }

/* A 0-count option (e.g. this disease has no "Causal" association at all) --
   greyed out and unclickable instead of silently leading to a "No genes
   match" empty state after picking it. */
.gdp-catfilter-item.disabled { color: var(--secondary-text, #64748b); opacity: .55; cursor: not-allowed; }
.gdp-catfilter-item.disabled:hover { background: none; }
.gdp-catfilter-actions { display: flex; gap: 8px; padding: 4px 14px 8px; border-bottom: 1px solid var(--border-color, #e2e8f0); margin-bottom: 4px; }
.gdp-catfilter-actions button {
  background: none; border: none; color: var(--main-color, #7C3AED); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;
}
.gdp-catfilter-actions button:hover { text-decoration: underline; }

/* Search box at the top of a searchable menu (e.g. a gene-symbol lookup
   backed by a remote AJAX endpoint rather than a fixed local value list). */
.gdp-catfilter-search-wrap { padding: 4px 14px 8px; }
.gdp-catfilter-search {
  width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 13px;
  border: 1px solid var(--border-color, #e2e8f0); border-radius: 6px;
}
.gdp-catfilter-search:focus { outline: none; border-color: var(--main-color, #7C3AED); }
.gdp-catfilter-hint { padding: 5px 14px; font-size: 12px; color: var(--secondary-text, #64748b); }

/* Shared "Download" button + scope x format menu (Selected / This Page /
   All Matching, each with TSV/CSV/PDF links) -- first built for
   gene_curated.php, now reused by disease.php/kegg_pathway.php/protein.php/
   snp.php so every browse page offers the same three download scopes
   instead of each inventing its own. Deliberately its own menu component
   (not .gdp-catfilter-menu above): that one is position:fixed for the big
   scrollable filter-value lists, where this is a small fixed-content menu
   that should hug its trigger button instead. */
.dl-wrap { position: relative; display: inline-block; }
.gdp-download-menu {
  /* right:0 (not left:0) -- this button is often the rightmost item in its
     toolbar row (kegg_pathway.php/reactome_pathway.php especially), where a
     left-anchored menu would overflow past the viewport's right edge.
     Anchoring to the button's right edge instead keeps it on-screen
     regardless of where the button sits. */
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  background: var(--white, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px;
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.10)); padding: 6px 0; min-width: 300px; width: max-content; max-width: min(90vw, 360px);
}
.gdp-download-menu.open { display: block; }
.gdp-download-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 6px 14px; font-size: 13px; white-space: nowrap; }
.gdp-download-row:hover { background: var(--light-bg, #F3F8F5); }
.gdp-download-scope-label { color: var(--text-color, #1e293b); }
.gdp-download-format-links { white-space: nowrap; }
.gdp-download-format-links a { margin-left: 8px; color: var(--main-color, #7C3AED); text-decoration: none; font-size: 12px; font-weight: 600; }
.gdp-download-format-links a:hover { text-decoration: underline; }
.gdp-download-format-links.disabled a { color: var(--secondary-text, #64748b); pointer-events: none; cursor: not-allowed; text-decoration: none; }
.btn-download-selected { background: var(--main-color, #7C3AED); color: #fff; padding: 5px 10px; font-size: 12px; border-radius: 3px; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-weight: 500; height: 36px; padding: 0 16px; box-sizing: border-box; }
.btn-download-selected:hover { opacity: .92; }