/**
 * Drug Target Table — styles ported from Drug_Targets_v5.html.
 *
 * Every rule is scoped under .sdt-wrap so nothing leaks into the surrounding Elementor page. Only the
 * rules the table / filters / chips / pagination / selection bar / modal use are included; v5 page
 * chrome and its global `*`/`body` reset are left out.
 *
 * FONTS: no `font-family` is set here on purpose — the table and popup inherit the website's global
 * fonts (the v5 mockup's Lora/Roboto/Lato were AI-added and are intentionally dropped). Only sizes,
 * weights, spacing etc. are styled.
 */

/* Brand tokens — kept on the wrapper (not :root) so they don't affect the rest of the page. */
.sdt-wrap {
  --dls-purple:      #3C1053;
  --dls-purple-mid:  #3d264f;
  --dls-orange:      #FF7500;
  --dls-orange-warm: #fd7521;
  --dls-black:       #000000;
  --dls-body:        #333333;
  --dls-gray:        #54595F;
  --dls-light:       #f7f7f7;
  --dls-border:      #e0e0e0;
  --dls-white:       #ffffff;
  --max-w:           1200px;
  font-size: 16px;
  color: var(--dls-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.sdt-wrap, .sdt-wrap *, .sdt-wrap *::before, .sdt-wrap *::after { box-sizing: border-box; }

/* Theme insulation: the site theme sets a direct line-height (~1.5) on td/th/spans that overrides the
   1.7 the v5 mockup inherits from its body. Re-assert 1.7 on the table cells and badges so the row
   and badge heights match the mockup exactly. !important because the theme rule is a direct element
   hit; scoped to .sdt-wrap so it affects only this table. */
.sdt-wrap tbody td,
.sdt-wrap thead th,
.sdt-wrap .tag-base { font-family: "Lato", Sans-serif; border:none; line-height: 1.7 !important; }

/* Theme insulation: the site theme adds zebra striping (nth-child background) to table rows. The v5
   mockup has plain rows — a background appears only on hover (and for selected rows). Force rows
   transparent and re-assert the hover/selected backgrounds (all !important to beat the theme + the
   transparent base). */
.sdt-wrap tbody tr td { background-color: transparent !important; }
.sdt-wrap tbody tr:not(.row-selected):hover td { background-color: #fafafa !important; }
.sdt-wrap tbody tr.row-selected td { background-color: #f5f0fa !important; }

/* ===== BADGES (rendered per term in the table cells) ===== */
.sdt-wrap .tag-base { display:inline-block; font-size:9px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:3px 9px; border-radius:3px; white-space:nowrap; margin:0 3px 3px 0; }
.sdt-wrap .tag-class { background:#f0e8f8; color:#5a1f7a; }
.sdt-wrap .tag-mod { background:#e9f3ee; color:#0a5c3e; }
.sdt-wrap .tag-plat { background:#fdeede; color:#a85400; }

/* ===== CHIP "SHOW MORE" TOGGLE ===== */
.sdt-wrap .chip-more { display:none !important; }
.sdt-wrap .expanded .chip-more { display:inline-flex !important; }
.sdt-wrap .chip.chip-toggle { gap:6px; background:#faf6ff !important; color:#5a1f7a !important; border:1.5px dashed #9b6fc4 !important; }
.sdt-wrap .chip.chip-toggle:hover { background:#efe7fb !important; }
.sdt-wrap .chip.chip-toggle .cv { display:inline-block; transition:transform .2s; }
.sdt-wrap .expanded .chip.chip-toggle .cv { transform:rotate(180deg); }

/* ===== PLATFORM DOTS + MODALITY TEXT =====
   Platform values render as a small color square ("dot") + plain label, not a colored pill — and Drug
   Modality has no column of its own; its values show as a second, comma-separated plain-text line
   underneath the platform dots, inside the same "Platforms & Indications" cell. */
.sdt-wrap .plat-dots { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:4px; }
.sdt-wrap .plat-dot-item { display:inline-flex; align-items:center; gap:5px; }
.sdt-wrap .pdot { width:9px; height:9px; border-radius:2px; flex-shrink:0; display:inline-block; }
.sdt-wrap .plat-dot-label { font-size:10px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase; color:var(--dls-gray); white-space:nowrap; }
.sdt-wrap .plat-modality-text { font-size:12px; color:#555; line-height:1.5; }

/* ===== PAGINATION ===== */
.sdt-wrap .pagination { display:flex; gap:6px; justify-content:center; align-items:center; margin:26px 0 4px; flex-wrap:wrap; }
.sdt-wrap .pg-btn { min-width:38px; height:38px; padding:0 12px; border:1px solid var(--dls-border); background:#fff; color:var(--dls-purple-mid); font-size:14px; font-weight:700; border-radius:5px; cursor:pointer; }
.sdt-wrap .pg-btn:hover:not(:disabled) { border-color:var(--dls-purple-mid); background:var(--dls-light); }
.sdt-wrap .pg-btn.active { background:var(--dls-purple-mid); color:#fff; border-color:var(--dls-purple-mid); }
.sdt-wrap .pg-btn:disabled { opacity:.4; cursor:default; }
.sdt-wrap .pg-nav { font-weight:400; }

/* ===== BUTTON (empty-state CTA) ===== */
.sdt-wrap .btn-dls { display:inline-flex; align-items:center; gap:7px; background:var(--dls-purple-mid); color:white; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; text-decoration:none; padding:10px 22px; border-radius:4px; border:none; cursor:pointer; transition:background 0.2s; white-space:nowrap; }
.sdt-wrap .btn-dls:hover { background:var(--dls-purple); }
.sdt-wrap .btn-hover-orange:hover { background:var(--dls-orange); }

/* ===== DISCLAIMER ===== */
.sdt-wrap .disclaimer { background:#fffbf5; border:1px solid #ffe8c8; border-radius:6px; padding:12px 16px; margin-bottom:12px; display:flex; align-items:center; gap:12px; }
.sdt-wrap .disclaimer svg { color:var(--dls-orange); flex-shrink:0; margin-top:1px; display:block; }
.sdt-wrap .disclaimer p { font-family: 'Lato', sans-serif;font-size:13px; color:#6b4c1a; line-height:1.6; margin-bottom: 0px; }
.sdt-wrap .disclaimer strong { color:#4a3000; font-weight:700; }
.sdt-wrap .disclaimer a { color:var(--dls-orange); font-weight:700; text-decoration:none; }
.sdt-wrap .disclaimer a:hover { text-decoration:underline; }

/* ===== TABLE SECTION ===== */
.sdt-wrap .table-section { padding: 10px 0px 72px; background:var(--dls-white); }
.sdt-wrap .table-inner { max-width:var(--max-w); margin:0 auto; }
.sdt-wrap .table-head { margin-bottom:22px; }
.sdt-wrap .table-title { font-size:28px; font-weight:500; color:var(--dls-black); line-height:1.25; margin-bottom:8px; }
.sdt-wrap .table-subtitle { font-size:15px; color:#555; line-height:1.7; max-width:720px; }

/* ===== FILTER BAR ===== */
.sdt-wrap .filter-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.sdt-wrap .filter-row:first-child { margin-bottom:8px; }
.sdt-wrap .filter-lbl { font-family: "Lato", Sans-serif;font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--dls-gray); flex-shrink:0; min-width:72px; }
.sdt-wrap .search-wrap { flex:1; min-width:220px; max-width:480px; display:flex; align-items:center; gap:8px; background:white; border:1px solid #ccc; border-radius:4px; padding:0 12px; height:36px; transition:border-color 0.18s; }
.sdt-wrap .search-wrap:focus-within { border-color:var(--dls-purple-mid); }
.sdt-wrap .search-wrap svg { color:#aaa; width:14px; height:14px; flex-shrink:0; }
.sdt-wrap .search-wrap input { font-family: 'Lato', sans-serif;padding-left: 0px;padding-right: 0px;flex:1; min-width:0; border:none; outline:none; font-size:13px; color:#333; background:transparent; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.sdt-wrap .chip { height:30px; padding:0 12px; display:inline-flex; align-items:center; background:white; border:1px solid #ccc; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:var(--dls-gray); cursor:pointer; border-radius:3px; transition:all 0.15s; white-space:nowrap; }
.sdt-wrap .chip:hover { border-color:var(--dls-purple-mid); color:var(--dls-purple-mid); background:#f5f0fa; }
.sdt-wrap .chip.active { background:var(--dls-purple-mid); border-color:var(--dls-purple-mid); color:white; }

.sdt-wrap .table-meta { font-family: 'Lato', sans-serif; font-size:12px; color:var(--dls-gray); margin-bottom:12px; }
.sdt-wrap .table-meta strong { font-family: 'Lato', sans-serif; color:var(--dls-purple-mid); font-weight:700; }

/* ===== THE TABLE ===== */
.sdt-wrap .table-wrap { background:white; border:1px solid var(--dls-border); border-radius:6px; overflow-x:auto; }
.sdt-wrap table { width:100%; border-collapse:collapse; table-layout:fixed; }
.sdt-wrap thead th { font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--dls-gray); padding:11px 16px; border-bottom:2px solid var(--dls-border); text-align:left; background:var(--dls-light); }
.sdt-wrap tbody td { padding:12px 16px; border-bottom:1px solid var(--dls-border); vertical-align:top; font-size:14px; }
.sdt-wrap tbody tr:last-child td { border-bottom:none; }
.sdt-wrap tbody tr { transition:background 0.12s; cursor:pointer; }

.sdt-wrap col.col-check { width:50px; }
.sdt-wrap col.col-target { width:26%; }
.sdt-wrap col.col-cat { width:16%; }
.sdt-wrap col.col-plats { width:auto; }

.sdt-wrap .target-name { font-family: "Lato", Sans-serif; font-size:17px; font-weight:600; color:var(--dls-purple-mid); line-height:1.2; }

.sdt-wrap input[type=checkbox] { width:15px; height:15px; accent-color:var(--dls-purple-mid); cursor:pointer; }

/* Cells are top-aligned (see tbody td) so multi-line tag groups and the stacked collapse details line up
   with the row's Biomarker/Target label. The checkbox is a single small control, so nudge its cell down
   a few px to sit against the target-name's first text line rather than pinned hard to the cell top. */
.sdt-wrap .col-check-cell { padding-top:15px; }

/* Per-row stacked details for the collapsed data columns — hidden until JS collapses the table, then
   shown (no click needed) stacked inside the Biomarker/Target cell so the table isn't broken. */
.sdt-wrap .dt-detail { display:none; margin-top:10px; }
.sdt-wrap .dt-detail-label { display:block; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--dls-gray); margin-bottom:5px; }

/* ===== EMPTY STATE ===== */
.sdt-wrap .table-empty { display:none; text-align:center; padding:56px 24px; color:var(--dls-gray); font-size:14px; }
.sdt-wrap .empty-lead { font-size:22px; font-weight:500; color:var(--dls-black); margin-bottom:8px; }
.sdt-wrap .empty-sub { font-size:14px; color:#555; max-width:440px; margin:0 auto 22px; line-height:1.6; }
.sdt-wrap .empty-cta { margin-bottom:16px; }
.sdt-wrap .empty-clear { color:var(--dls-gray); text-decoration:underline; font-size:13px; font-weight:400; }
.sdt-wrap .empty-clear:hover { color:var(--dls-purple-mid); }

/* ===== STICKY SELECTION BAR =====
   NOT CSS position:sticky — this site's theme sets `overflow: hidden auto` on BOTH <html> AND <body>,
   which leaves the browser unable to resolve position:sticky's "nearest scrolling ancestor", so it never
   engages. Instead the JS manually pins/unpins the bar with position:fixed (`.pinned` below) — fixed
   positioning anchors to the true viewport regardless of any ancestor's overflow. See
   updateSelbarPin()/collectStickyHeaders() in drug-target-table.js. */
.sdt-wrap .sel-bar { z-index:200; background:var(--dls-purple-mid); padding:12px 18px; margin-bottom:12px; border-radius:6px; display:none; align-items:center; gap:14px; box-shadow:0 6px 22px rgba(60,16,83,0.28); }
.sdt-wrap .sel-bar.visible { display:flex; }
.sdt-wrap .sel-bar.pinned { position:fixed; transition:top 0.3s ease; }
.sdt-wrap .sel-bar-lead { display:flex; align-items:center; gap:12px; flex:1; overflow:hidden; }
.sdt-wrap .sel-tags { display:flex; gap:6px; flex-wrap:wrap; align-items:center; overflow:hidden; }
.sdt-wrap .sel-tag { font-family: 'Lato', sans-serif; background:rgba(255,255,255,0.15); font-size:12px; font-weight:700; letter-spacing:0.3px; padding:4px 10px; border-radius:3px; color:white; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.sdt-wrap .sel-tag-rm { background:none; border:none; color:rgba(255,255,255,0.55); cursor:pointer; padding:0; font-size:16px; line-height:1; }
.sdt-wrap .sel-tag-rm:hover { color:white; }
.sdt-wrap .sel-count { font-family: 'Lato', sans-serif; font-size:12px; color:rgba(255,255,255,0.55); white-space:nowrap; flex-shrink:0; }
.sdt-wrap .sel-clear-btn { font-size:12px; color:rgba(255,255,255,0.5); background:none; border:none; cursor:pointer; text-decoration:underline; white-space:nowrap; flex-shrink:0; }
.sdt-wrap .sel-clear-btn:hover { color:rgba(255,255,255,0.85); }
.sdt-wrap .sel-cta { background:var(--dls-orange); color:white; border:none; border-radius:4px; padding:10px 22px; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background 0.18s; }
.sdt-wrap .sel-cta:hover { background:#e06700; }

/* ===== MODAL =====
   Top-anchored sheet, not vertically centered. The OVERLAY is the scroll container (not the modal box)
   — the modal itself has no max-height/internal overflow, so it can grow past one viewport and the
   whole thing (header included) scrolls together, rather than a small centered window onto a
   separately-scrolling inner box. The background page stays locked (JS sets body.style.overflow='hidden'
   while open); only the popup itself scrolls. Scrollbar chrome is hidden on the overlay
   (scrollbar-width/-ms-overflow-style/::-webkit-scrollbar below) while scrolling itself (mouse wheel /
   touch / keyboard) keeps working normally — only the visible track+thumb is suppressed. */
.sdt-wrap .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; align-items:flex-start; justify-content:center; padding:20px; backdrop-filter:blur(3px); overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
.sdt-wrap .modal-overlay::-webkit-scrollbar { display:none; }
.sdt-wrap .modal-overlay.open { display:flex; }
.sdt-wrap .modal { background:white; max-width:640px; width:100%; margin-top:15px; border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,0.25); animation:sdt-fadeUp 0.22s ease; }
@keyframes sdt-fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.sdt-wrap .modal-head { background:var(--dls-purple-mid); color:white; padding:28px 30px 24px; position:relative; }
.sdt-wrap .modal-eyebrow { font-family: "Lora", Sans-serif; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--dls-orange); font-weight:700; margin-bottom:8px; }
.sdt-wrap .modal-title { font-family: "Lora", Sans-serif; font-size:20px; font-weight:400; line-height:1.3; margin-bottom:5px; }
.sdt-wrap .modal-sub { font-family: "Lato", Sans-serif; font-size:12px; color:rgba(255,255,255,0.55); }
.sdt-wrap .modal-close { position:absolute; top:16px; right:16px; background:rgba(255,255,255,0.15); border:none; color:white; width:28px; height:28px; border-radius:3px; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; }
.sdt-wrap .modal-close:hover { background:rgba(255,255,255,0.25); }
.sdt-wrap .modal-body { padding:28px 30px; }
.sdt-wrap .modal-sect { font-family: "Lato", Sans-serif; font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--dls-purple-mid); margin-bottom:8px; margin-top:20px; }
.sdt-wrap .modal-sect:first-child { margin-top:0; }
.sdt-wrap .modal-body p { font-size:14px; color:#555; line-height:1.72; margin-bottom:8px; font-weight:300; }
/* Pardot form iframe — src is set/replaced entirely by JS (never on page load); .modal-iframe-loading
   covers the iframe until the fresh navigation's `load` event fires, so re-opening the popup with an
   updated selection never shows a flash of the previous form. */
/* Default iframe heights — a fallback shown until JS applies a real synced height from Pardot (see
   assets/pardot-autoheight.js). Different per breakpoint because the iframe renders at a different
   width at each: the modal caps at 640px wide, so >=680px viewport keeps the iframe a steady ~580px
   wide (1150px default, with headroom for a validation error growing the form); below 680px the modal
   narrows with the viewport, the iframe gets much narrower, and its text wraps more (1280px default).
   JS clears any inline height on each reload so these values show first, then overrides them the
   moment a real height-sync message arrives, regardless of viewport. */
.sdt-wrap .modal-iframe-wrap { position:relative; margin-top:4px; min-height:1150px; }
.sdt-wrap .modal-iframe-wrap iframe { width:100%; height:1150px; border:none; display:block; }
@media (max-width: 680px) {
	.sdt-wrap .modal-iframe-wrap { min-height:1280px; }
	.sdt-wrap .modal-iframe-wrap iframe { height:1280px; }
}
.sdt-wrap .modal-iframe-loading {
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px;
	background:#fff; font-size:13px; color:var(--dls-gray); transition:opacity 0.15s ease;
}
.sdt-wrap .modal-iframe-loading::before {
	content:''; width:16px; height:16px; border-radius:50%;
	border:2px solid var(--dls-border); border-top-color:var(--dls-purple-mid);
	animation:sdt-spin 0.8s linear infinite;
}
.sdt-wrap .modal-iframe-loading.hidden { opacity:0; pointer-events:none; }
@keyframes sdt-spin { to { transform:rotate(360deg); } }
.sdt-wrap table caption+thead tr:first-child td,
.sdt-wrap table caption+thead tr:first-child th,
.sdt-wrap table colgroup+thead tr:first-child td,
.sdt-wrap table colgroup+thead tr:first-child th,
.sdt-wrap table thead:first-child tr:first-child td,
.sdt-wrap table thead:first-child tr:first-child th {
  border-block-start: none;
}
/* Platform / target badges inside the modal */
.sdt-wrap .pbadge { font-family: 'Lato', sans-serif; font-size:10px; font-weight:700; letter-spacing:0.5px; padding:2px 7px; border-radius:2px; text-transform:uppercase; }

/* ===== RESPONSIVE ===== */
@media (max-width: 960px) {
  .sdt-wrap .sel-bar { padding:12px 14px; flex-wrap:wrap; }
  .sdt-wrap .sel-bar-lead { flex:1 1 100%; flex-wrap:wrap; overflow:visible; order:1; }
  .sdt-wrap .sel-tags { overflow:visible; }
  .sdt-wrap .sel-clear-btn { order:2; }
  .sdt-wrap .sel-cta { order:3; margin-left:auto; }
}

/* ===== COLUMN COLLAPSE (all-or-nothing) =====
   When the full multi-column table doesn't fit, JS adds .dt-responsive AND both .dt-hide-* classes
   together — the two data columns (Category, Platforms & Indications — Drug Modality has no column of
   its own, it's a second line inside Platforms & Indications) collapse as a group, not one at a time.
   Their cells are removed and the values shown stacked, top-aligned, inside the Biomarker/Target cell
   (no expander). Above that width, all columns show in the fixed mockup layout. */
.sdt-wrap.dt-responsive table { table-layout:auto; }
.sdt-wrap.dt-responsive col { width:auto; }
.sdt-wrap.dt-responsive .col-check-th,
.sdt-wrap.dt-responsive .col-check-cell { width:1%; white-space:nowrap; }
.sdt-wrap.dt-responsive .col-target-th, .sdt-wrap.dt-responsive .col-target-cell { min-width:150px; }
.sdt-wrap.dt-responsive .col-cat-th,  .sdt-wrap.dt-responsive .col-cat-cell  { min-width:150px; }
.sdt-wrap.dt-responsive .col-plat-th, .sdt-wrap.dt-responsive .col-plat-cell { min-width:180px; }

.sdt-wrap.dt-hide-cat  .col-cat-th,  .sdt-wrap.dt-hide-cat  .col-cat-cell  { display:none; }
.sdt-wrap.dt-hide-cat  .dt-detail-cat  { display:block; }
.sdt-wrap.dt-hide-plat .col-plat-th, .sdt-wrap.dt-hide-plat .col-plat-cell { display:none; }
.sdt-wrap.dt-hide-plat .dt-detail-plat { display:block; }

/* Hardened tab/chip layout to prevent chips touching or overlapping at tablet widths. Scoped to
   .sdt-wrap like every other rule in this file — `.filter-row` is a generic class name and these
   rules must never reach a .filter-row belonging to the theme, Elementor, or another plugin. */
.sdt-wrap .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 10px;
  overflow: visible;
  position: static;
}

.sdt-wrap .filter-row .chip {
  position: static;   /* guards against any absolute/transform positioning */
  flex: 0 0 auto;     /* don't grow or shrink — keep natural width */
  white-space: nowrap;
  margin: 0;
}

/* Extra breathing room specifically in the iPad portrait/landscape range */
@media (min-width: 768px) and (max-width: 1194px) {
  .sdt-wrap .filter-row {
    gap: 10px;
    row-gap: 12px;
  }
  .sdt-wrap .filter-row .chip {
    padding: 8px 14px;
  }
}