/* Sklearn-Wrap — Material Design color token overrides.
 *
 * Shared color palette for all stateful-y packages.
 * See: https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#custom-colors
 */

/* Light theme */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #8b5cf6;
  --md-primary-fg-color--light: #a78bfa;
  --md-primary-fg-color--dark: #7c3aed;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
  --md-accent-fg-color: #136f63;
  --md-accent-fg-color--transparent: #136f631a;
  --md-typeset-a-color: #8b5cf6;
  --md-default-fg-color: #1f2937;
  --md-default-fg-color--light: #374151;
  --md-default-fg-color--lighter: #6b7280;
  --md-default-fg-color--lightest: #9ca3af;
  --md-default-bg-color: #ffffff;
  --md-default-bg-color--light: #f9fafb;
  --md-default-bg-color--lighter: #f3f4f6;
  --md-default-bg-color--lightest: #e5e7eb;
}

/* Dark theme */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #136f63;
  --md-primary-fg-color--light: #1a8f80;
  --md-primary-fg-color--dark: #0e5a50;
  --md-primary-bg-color: #050505;
  --md-primary-bg-color--light: #050505b3;
  --md-accent-fg-color: #a78bfa;
  --md-accent-fg-color--transparent: #a78bfa1a;
  --md-typeset-a-color: #a78bfa;
  --md-default-fg-color: #ffffff;
  --md-default-fg-color--light: #e5e7eb;
  --md-default-fg-color--lighter: #9ca3af;
  --md-default-fg-color--lightest: #6b7280;
  --md-default-bg-color: #050505;
  --md-default-bg-color--light: #0a0a0a;
  --md-default-bg-color--lighter: #111111;
  --md-default-bg-color--lightest: #1a1a1a;
}

/* ==========================================================================
   API Reference: DataTables — Material for MkDocs integration
   ========================================================================== */

/*
 * These overrides make the DataTables-powered API table look identical to
 * Material for MkDocs native markdown tables (`.md-typeset table:not([class])`).
 *
 * Material's key design tokens used here:
 *   --md-typeset-table-color          border & separator colour
 *   --md-typeset-table-color--light   hover row tint
 *   --md-default-bg-color             surface colour
 *   --md-default-fg-color             text colour
 *   --md-default-fg-color--light      secondary text
 *   --md-default-fg-color--lighter    hint text / hover icons
 *   --md-typeset-a-color              link colour (== primary)
 *   --md-accent-fg-color              accent colour (indigo, always readable)
 *   --md-accent-fg-color--transparent accent with alpha (hover tints)
 */

/* ---- Wrapper (mirrors .md-typeset__table padding) ---- */
.api-table-wrapper {
  display: inline-block;
  max-width: 100%;
  width: 100%;
  padding: 0 0.8rem;
  margin-bottom: 0.5em;
}

/* ---- DataTables chrome ---- */
.dt-container {
  font-family: var(--md-text-font-family, inherit);
  font-size: 0.64rem;                      /* matches Material table font-size */
}

/* Controls row: search + length selector */
.api-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0 0.75rem;
}

/* Footer row: info + pagination */
.api-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0 0;
}

/* ---- Search input (mirrors Material .md-search__input) ----
   div.dt-container prefix beats stock DataTables input styles. */
div.dt-container .dt-search {
  display: flex;
  align-items: center;
}

div.dt-container .dt-search label {
  display: none;
}

div.dt-container .dt-search input {
  min-width: 14rem;
  height: 1.8rem;
  padding: 0 0.6rem;
  font-size: 0.7rem;
  font-family: var(--md-text-font-family, inherit);
  border: none;
  border-bottom: 0.1rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.1rem 0.1rem 0 0;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  box-shadow: var(--md-shadow-z1);
  outline: none;
  transition: border 0.25s, box-shadow 0.25s;
}

div.dt-container .dt-search input::placeholder {
  color: var(--md-default-fg-color--light);
  text-overflow: ellipsis;
}

div.dt-container .dt-search input:focus,
div.dt-container .dt-search input:hover {
  border-bottom-color: var(--md-accent-fg-color);
  box-shadow: var(--md-shadow-z2);
}

/* ---- Length selector ---- */
div.dt-container .dt-length {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.64rem;
  color: var(--md-default-fg-color--light);
}

div.dt-container .dt-length select {
  height: 1.8rem;
  padding: 0 0.4rem;
  border: none;
  border-bottom: 0.1rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.1rem 0.1rem 0 0;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font-size: 0.72rem;
  font-family: var(--md-text-font-family, inherit);
  box-shadow: var(--md-shadow-z1);
  cursor: pointer;
  outline: none;
  transition: border 0.25s, box-shadow 0.25s;
}

div.dt-container .dt-length select:focus,
div.dt-container .dt-length select:hover {
  border-bottom-color: var(--md-accent-fg-color);
  box-shadow: var(--md-shadow-z2);
}

/* ---- Table (mirroring .md-typeset table:not([class])) ---- */
table.dataTable {
  border-collapse: collapse !important;
  border: 0.05rem solid var(--md-typeset-table-color) !important;
  border-radius: 0.1rem;
  width: 100% !important;
  background-color: var(--md-default-bg-color);
}

/* Header cells */
table.dataTable thead th {
  background: transparent;
  color: var(--md-default-fg-color);
  font-weight: 700;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  min-width: 5rem;
  padding: 0.9375em 1.25em;
  border-bottom: 0.05rem solid var(--md-typeset-table-color);
  vertical-align: top;
  text-align: left;
  white-space: nowrap;
}

table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc,
table.dataTable thead th.dt-ordering-asc,
table.dataTable thead th.dt-ordering-desc {
  cursor: pointer;
}

/* Body cells (matches Material's td border-top pattern) */
table.dataTable tbody td {
  padding: 0.9375em 1.25em;
  border-top: 0.05rem solid var(--md-typeset-table-color);
  vertical-align: top;
  line-height: 1.6;
}

/* Hover row (exact Material hover: tint + inset box-shadow) */
table.dataTable tbody tr {
  transition: background-color 125ms;
}

table.dataTable tbody tr:hover {
  background-color: var(--md-typeset-table-color--light) !important;
  box-shadow: 0 0.05rem 0 var(--md-default-bg-color) inset;
}

/* Name column */
table.dataTable tbody td:first-child a {
  color: var(--md-primary-fg-color);
  text-decoration: none;
  word-break: normal;
  transition: color 0.15s;
}

table.dataTable tbody td:first-child a:hover {
  color: var(--md-accent-fg-color);
  text-decoration: underline;
}

/* Module column */
table.dataTable tbody td:nth-child(3) a {
  color: var(--md-default-fg-color--light);
  text-decoration: none;
  font-size: 0.85em;
}

table.dataTable tbody td:nth-child(3) a:hover {
  color: var(--md-typeset-a-color);
}

/* Description column - secondary text colour */
table.dataTable tbody td:nth-child(4) {
  color: var(--md-default-fg-color--light);
}

/* ---- Type badges ---- */
.api-badge {
  display: inline-block;
  padding: 0.15em 0.55em;
  border-radius: 10rem;
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}

.api-badge--class {
  background: color-mix(in srgb, #448aff 14%, transparent);
  color: #448aff;
}

.api-badge--function {
  background: color-mix(in srgb, #00897b 14%, transparent);
  color: #00897b;
}

/* ---- Pagination ----
   Uses div.dt-container prefix to beat stock DataTables specificity.
   Active page uses --md-accent-fg-color (always readable, unlike
   --md-primary-fg-color which is #000 when primary: black).            */
div.dt-container .dt-paging {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

div.dt-container .dt-paging .dt-paging-button {
  min-width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.05rem solid var(--md-typeset-table-color) !important;
  border-radius: 0.1rem !important;
  padding: 0 0.35rem !important;
  background: var(--md-default-bg-color) !important;
  color: var(--md-default-fg-color) !important;
  font-size: 0.55rem !important;
  font-family: var(--md-text-font-family, inherit) !important;
  cursor: pointer;
  transition: color 125ms, background-color 125ms, border-color 125ms;
}

div.dt-container .dt-paging .dt-paging-button:hover:not(.current):not(.disabled) {
  background-color: var(--md-accent-fg-color--transparent) !important;
  border-color: var(--md-accent-fg-color) !important;
  color: var(--md-accent-fg-color) !important;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
  background-color: var(--md-accent-fg-color) !important;
  border-color: var(--md-accent-fg-color) !important;
  color: var(--md-accent-bg-color, #fff) !important;
  font-weight: 700;
}

div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active {
  opacity: 0.35;
  cursor: default;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ---- Info text ---- */
.dt-info {
  color: var(--md-default-fg-color--light);
  font-size: inherit;
}

/* ---- Dark mode (slate) refinements ---- */
[data-md-color-scheme="slate"] .api-badge--class {
  background: color-mix(in srgb, #82b1ff 16%, transparent);
  color: #82b1ff;
}

[data-md-color-scheme="slate"] .api-badge--function {
  background: color-mix(in srgb, #4db6ac 16%, transparent);
  color: #4db6ac;
}

/* ==========================================================================
   API Reference: Source Code — collapsible block + GitHub link
   ========================================================================== */

.github-source-link {
  margin: 0.5em 0 0.75em;
}

.github-source-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--md-default-fg-color--light);
  text-decoration: none;
  transition: color 0.15s;
}

.github-source-link a::before {
  /* GitHub octicon — inline SVG encoded */
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
}

.github-source-link a:hover {
  color: var(--md-accent-fg-color);
}

/* Override Material h5 styling for API doc section headings */
h5.doc-section-heading {
  text-transform: none;
  font-size: 1em;
  color: var(--md-default-fg-color);
}

/* Collapsible source code details */
.source-code-details {
  margin: 0.5em 0 1em;
  border: 0.05rem solid var(--md-typeset-table-color);
  border-radius: 0.2rem;
}

.source-code-details > summary {
  display: block;
  padding: 0.5em 0.8em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--md-default-fg-color--light);
  background: var(--md-default-bg-color--lighter);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s, background-color 0.15s;
  list-style: none;
}

.source-code-details > summary::before {
  content: "\25B6\FE0E";   /* right-pointing triangle */
  display: inline-block;
  margin-right: 0.4em;
  transition: transform 0.2s;
}

.source-code-details[open] > summary::before {
  transform: rotate(90deg);
}

.source-code-details > summary::-webkit-details-marker {
  display: none;
}

.source-code-details > summary:hover {
  color: var(--md-accent-fg-color);
  background: var(--md-default-bg-color--lightest);
}

.source-code-details pre {
  margin: 0 !important;
  border-radius: 0 0 0.2rem 0.2rem;
}