/* =============================================================================
   OmicsBridge wiki - extra styling
   File: docs/css/extra.css
   Purpose: Small visual tweaks on top of the default mkdocs-material theme.
   Wired in via `extra_css` in mkdocs.yml.
   ============================================================================= */

/* --- Tabbed content blocks (pymdownx.tabbed) ---------------------------------
   By default, Material's tab groups only have a thin 1px border, which can
   read as "just some buttons" rather than a distinct enclosed box. This makes
   the whole tab group clearly read as one unit: a visible border, rounded
   corners, and a faint background tint behind the tab content. Uses Material's
   theme-aware CSS variables so it still looks right in dark mode. */
.tabbed-set {
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 8px;
  margin: 1.25em 0;
  overflow: hidden;
}

.tabbed-set > .tabbed-labels {
  background-color: #1c54b2; /* blue header strip for the tab labels */
  border-bottom: 1px solid #14408a;
}

/* Force every tab label - active or inactive, hover or not - to stay white
   against the blue strip. !important overrides Material's own default label
   colour, which otherwise wins regardless of selector position since it's
   part of the compiled theme stylesheet. */
.tabbed-set > .tabbed-labels > label,
.tabbed-set > .tabbed-labels > label:hover,
.tabbed-set > .tabbed-labels > label:focus {
  color: #ffffff !important;
  opacity: 0.75;
}

/* Active tab: a solid white background "pill" behind just that label, with
   the label text switching to the same blue as the strip - a much clearer
   signal than a colour/underline change alone. Pairs each <input>'s position
   with its <label>'s position (the inputs come before .tabbed-labels in the
   DOM, so ":checked + label" doesn't work - this sibling-combinator + nth-
   child pairing is the standard workaround). Covers up to 8 tabs, well
   beyond the 4 needed for Database's A-D. !important guards against
   Material's own active-tab rule winning the cascade, as happened before. */
.tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1),
.tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2),
.tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3),
.tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > label:nth-child(4),
.tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > label:nth-child(5),
.tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > label:nth-child(6),
.tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > label:nth-child(7),
.tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > label:nth-child(8) {
  background-color: #ffffff !important;
  color: #1c54b2 !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  border-radius: 6px 6px 0 0;
}

.tabbed-set > .tabbed-content {
  padding: 1em 1.2em;
  background-color: var(--md-default-bg-color);
}

/* --- Markdown tables -----------------------------------------------------
   Applies site-wide, to every table (e.g. the field tables in Database.md),
   so tables and tabs read as one consistent design system rather than
   different colours in different places. */
.md-typeset table:not([class]) thead th {
  background-color: #1c54b2;
  color: #ffffff !important;
}

/* --- Function Reference table (Function_Reference.md) ---------------------
   This table has 9 columns including several long free-text ones, so the
   default Material table (nowrap cells inside a horizontally-scrolling
   wrapper) forced readers to scroll sideways to read it. Two changes fix
   that:
   1. Widen the content column just on this page ( `:has()` scopes it to
      pages containing `.func-ref-wrap`, so no other page is affected).
   2. Force the table itself to a fixed layout with explicit per-column
      percentage widths (set via <colgroup> in the page) and wrap long text
      instead of growing the column - so the table now fits the viewport
      and grows taller (more rows visible via normal vertical scroll)
      rather than wider. */
.md-content:has(.func-ref-wrap) .md-content__inner {
  max-width: none;
}
/* .md-grid is an ANCESTOR of .md-content (not a descendant), so it needs
   its own :has() check against the table wrapper rather than being nested
   under the .md-content selector above. This is what actually frees up
   the ~1220px page cap so the flex-grow:1 content column can use the
   extra room instead of staying pinned to its default share. */
.md-grid:has(.func-ref-wrap) {
  max-width: 100%;
}

.func-ref-wrap {
  overflow-x: auto; /* safety net only - fixed layout below should avoid needing it */
}

.func-ref-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.func-ref-table th,
.func-ref-table td {
  padding: 0.5em 0.6em;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: break-word;
  border: 1px solid var(--md-default-fg-color--lightest);
}

.func-ref-table thead th {
  background-color: #1c54b2;
  color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* The "#" column only needs room for a 1-2 digit number - shrink it and
   centre the value so it doesn't take a full text column's worth of width
   the way the other, prose-heavy columns need. */
.func-ref-table td.col-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--md-default-fg-color--light);
}

/* Light, colour-coded rows by Section - one pastel per Section so readers
   can visually group rows belonging to the same app section while
   scrolling, without the colours being strong enough to fight with the
   text itself. Dark text is kept throughout since these are light tints. */
.func-ref-table tbody tr.sec-1 { background-color: #eaf3ff; } /* Database and Data Upload - light blue */
.func-ref-table tbody tr.sec-2 { background-color: #eaf9ef; } /* Count & Comparison Data Overview - light green */
.func-ref-table tbody tr.sec-3 { background-color: #fff8e1; } /* Compare Across Datasets - light amber */
.func-ref-table tbody tr.sec-4 { background-color: #f3ebfa; } /* Integrate Two Datasets - light purple */
.func-ref-table tbody tr.sec-5 { background-color: #ffecee; } /* Clinical Data Analysis - light pink */
.func-ref-table tbody tr.sec-6 { background-color: #e3f8f7; } /* scRNAseq Analysis - light teal */
.func-ref-table tbody tr.sec-7 { background-color: #fff0e3; } /* Epigenome Visualisation - light orange */
.func-ref-table tbody tr.sec-8 { background-color: #eef0f2; } /* Custom Gene Sets - light grey */
.func-ref-table tbody tr.sec-9 { background-color: #edeeff; } /* Tools - light indigo */