/* -----------------------------------------------------------------------
   Sidebar: bold section labels (e.g. "Examples") and indent child links
   ----------------------------------------------------------------------- */

/* Bold the top-level section labels in the left sidebar */
.md-nav--primary .md-nav__item--section > label.md-nav__link,
.md-nav--primary .md-nav__item--section > .md-nav__link:not(a) {
  font-weight: 700;
}

/* Indent the links that live inside a sidebar section (level 1) */
.md-nav[data-md-level="1"] .md-nav__item > a.md-nav__link {
  padding-left: 1.4rem;
}

/* -----------------------------------------------------------------------
   Table styling — applied to pandas DataFrame HTML tables produced by
   nbconvert.  These tables carry class="dataframe" and a border="1"
   attribute; the rules below replace the plain black-border look with a
   clean, Bootstrap-inspired style that respects the Material theme palette.
   ----------------------------------------------------------------------- */

/* Core table reset — display:block + overflow-x:auto makes wide tables
   scroll horizontally within the content column instead of overflowing
   into the right-hand table-of-contents sidebar. */
.md-content table.dataframe {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  border-spacing: 0;
  width: max-content;
  max-width: 100%;
  margin: 1em 0;
  font-size: 0.85em;
  line-height: 1.4;
  /* Suppress the HTML border="1" attribute */
  border: none;
}

/* Column header row */
.md-content table.dataframe thead tr {
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  border-bottom: 2px solid var(--md-primary-fg-color--dark, var(--md-primary-fg-color));
}

.md-content table.dataframe thead th {
  padding: 0.55em 0.85em;
  font-weight: 600;
  white-space: nowrap;
  /* Override the pandas inline scoped-style that right-aligns headers */
  text-align: left !important;
  border: none !important;
}

/* Body cells */
.md-content table.dataframe tbody td,
.md-content table.dataframe tbody th {
  padding: 0.4em 0.85em;
  border: none !important;
  border-bottom: 1px solid var(--md-default-fg-color--lightest) !important;
  vertical-align: top;
}

/* Zebra striping for readability */
.md-content table.dataframe tbody tr:nth-child(even) {
  background-color: var(--md-code-bg-color);
}

/* Subtle hover highlight (fallback for browsers without color-mix support) */
.md-content table.dataframe tbody tr:hover {
  background-color: rgba(0, 120, 212, 0.08);
  background-color: color-mix(in srgb, var(--md-accent-fg-color) 8%, transparent);
}

/* Bottom border on the last row */
.md-content table.dataframe tbody tr:last-child td,
.md-content table.dataframe tbody tr:last-child th {
  border-bottom: 2px solid var(--md-primary-fg-color) !important;
}

/* -----------------------------------------------------------------------
   xarray Dataset rendering in MkDocs documentation

   The xarray HTML repr embeds its own <style> block with rules designed
   for Jupyter notebooks.  The MkDocs Material theme's higher-specificity
   CSS rules for <ul>, <li>, and <pre> elements interfere with xarray's
   layout in two ways:

   1. Visibility: Material's <pre> rules override xarray's
      "display: none" on .xr-text-repr-fallback, causing both the
      plain-text fallback and the interactive HTML repr to appear at once.

   2. Grid layout: Material's ".md-typeset ul:not([hidden]) { display:
      flow-root }" has higher specificity than xarray's ".xr-sections
      { display: grid }" and ".xr-var-list { display: contents }", so
      the variable table collapses into a stacked single-column list.
      Material also adds unwanted left margins to <ul> elements.

   The rules below restore the intended Jupyter-notebook appearance
   within the MkDocs content area.
   ----------------------------------------------------------------------- */

/* 1. Hide the plain-text fallback; show only the interactive HTML repr. */
.md-content .xr-text-repr-fallback {
  display: none !important;
}

/* 2. Ensure the interactive xarray HTML repr is always visible. */
.md-content .xr-wrap {
  display: block !important;
}

/* 3. Restore the CSS Grid layout for the top-level sections list.
      Material's ".md-typeset ul:not([hidden]) { display: flow-root }"
      overrides xarray's "display: grid", collapsing the 8-column
      variable table into a single stacked list.  We also clear the
      unwanted left margin that Material adds to <ul> elements. */
.md-content .xr-sections {
  display: grid !important;
  margin: 0 !important;
}

/* 4. Restore "display: contents" on the variable list <ul> so that its
      children become direct grid items of the .xr-sections container.
      Material overrides this to "display: flow-root" as well. */
.md-content .xr-var-list {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 5. Remove the unwanted left margin that Material adds to nested <ul>
      elements inside the xarray widget (e.g. .xr-dim-list). */
.md-content .xr-wrap ul {
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 6. MkDocs Material dark-mode support for xarray color variables.
      xarray's embedded CSS resolves its --xr-* variables from Jupyter's
      --jp-* variables (absent in MkDocs) with fallbacks intended for the
      pydata-sphinx-theme (--pst-* variables, also absent in MkDocs).
      The rules below map those variables to the nearest Material
      equivalents so the xarray widget looks correct in light and dark mode. */
.md-content {
  --xr-font-color0: var(--md-default-fg-color);
  --xr-font-color2: var(--md-default-fg-color--light);
  --xr-font-color3: var(--md-default-fg-color--lighter);
  --xr-border-color: var(--md-default-fg-color--lightest);
  --xr-disabled-color: var(--md-default-fg-color--lighter);
  --xr-background-color: var(--md-default-bg-color);
  --xr-background-color-row-even: var(--md-default-bg-color);
  --xr-background-color-row-odd: var(--md-code-bg-color);
}