/* Materials Explorer (/materials) — module CSS (MASTER §4.8: every rule scoped under the page class).
 *
 * Two parts:
 *   1. geometry (below): measured on the original explorer (docs tutorial screenshots, TANGO
 *      materials_explorer__01/__02, 1440 CSS px viewport) and compared with REA captures:
 *      band top -> search field top 56px, field 50px, field -> periodic table 12px, table box 750x396px,
 *      table box (or field, when the table is hidden) -> band bottom 24px, band -> Filters panel 24px.
 *   2. SPREE Materials Hub theme (end of file): the UNSW colour tokens of docs/BRAND.md §2 applied to the
 *      SearchUI parts that 10-mp-overrides.css (core, global) does not reach.
 */

/* Search field is 960px wide and centred in the grey band at every desktop width (TANGO __01: x 266-1225).
 * Bulma's widescreen/fullhd `.container:not(...):not(...)` rules would otherwise widen it to 1152/1344px. */
.mp-page-materials-explorer .mp-search-bar > .container {
  max-width: 960px;
}

/* 24px between the table box (or the field) and the bottom of the band (TANGO __01: 637-660;
 * pourbaix__06: 281-304). SearchUI gives the input a 1rem bottom margin; the band carries the gap. */
.mp-page-materials-explorer .mp-search-bar {
  padding-bottom: 1.5rem;
}
.mp-page-materials-explorer .mp-search-bar .mpc-materials-input {
  margin-bottom: 0;
}

/* CSS-MP's responsive rules for the explorer target the old `.materials-input` class; the 0.5.x
 * bundle renders `.mpc-materials-input`. Same behaviour at <=768px: hide the "Materials" addon. */
@media screen and (max-width: 768px) {
  .mp-page-materials-explorer .search-ui .mpc-materials-input .field > .control:first-child:not(.is-expanded) {
    display: none;
  }
}

/* Bulma "small" sizes. In the real site's theme they render at about .85rem (13.6px), not Bulma 0.9.1's .75rem.
 * Measured at 2x and given in CSS px, replica value in brackets:
 *   TANGO materials_explorer__02: pill "× Chemical System: Li-Fe-P-O" is 234×34 [210×30];
 *     "Showing 1-15" is 82.5 wide [74.7]; the "1 active" tag is 67×27 [61×24].
 *   TANGO __01: the "Only Elements" tab is 122×35 [110×32].
 *   ASSETS/molecule_explorer_2.png: "Jump to" text is 50 wide [44]; Previous is 94×33 [85×30]; page link is 34×33 [30×30].
 *   ASSETS/Filter_1.png: slider number inputs are 33 tall [30].
 * Normal-size text (table cells at 13px, column headers at 12px, group names, titles) matches exactly. Explicit
 * .85rem rules (the PT help box) already agree, so only the Bulma size-7/small classes differ. */
.mp-page-materials-explorer .mpc-search-ui .button.is-small,
.mp-page-materials-explorer .mpc-search-ui .input.is-small,
.mp-page-materials-explorer .mpc-search-ui .select.is-small,
.mp-page-materials-explorer .mpc-search-ui .pagination.is-small,
.mp-page-materials-explorer .mpc-search-ui .tabs.is-small,
.mp-page-materials-explorer .mpc-search-ui .subtitle.is-7,
.mp-page-materials-explorer .mpc-search-ui .tag:not(body):not(.is-medium):not(.is-large) {
  font-size: .85rem;
}
.mp-page-materials-explorer .mpc-search-ui .is-size-7 {
  font-size: .85rem !important;
}
/* Keep CSS-MP's touch-size paginator (`.search-ui .pagination.is-small{font-size:1rem}` at <=768px). */
@media screen and (max-width: 768px) {
  .mp-page-materials-explorer .mpc-search-ui.search-ui .pagination.is-small {
    font-size: 1rem;
  }
}

/* Slider number boxes: make room for 5-digit values such as the Volume max "20000".
 * At .85rem, Bulma's padding (calc(.75em - 1px) = 9.2px on each side) plus the space Chrome reserves for
 * the number spin button leaves too little room, so "20000" was clipped to "2000C" (clientWidth 73 < scrollWidth 75).
 * The real boxes are 74x33 with the text 10-11px from the left border (ASSETS/Filter_1.png, Filter_2.png:
 * "-7000", "-8000" and "5000" fit with room to spare). Keep the width, the height and the left inset, and
 * shrink only the right padding next to the spin button. */
.mp-page-materials-explorer .mpc-search-ui .mpc-range-slider .input.is-small[type="number"] {
  padding-right: .25em;
}

/* ======================================================================================================
 * SPREE Materials Hub theme (docs/BRAND.md §2). Core (10-mp-overrides.css) already themes the shell and
 * the global Bulma/SearchUI states: yellow primary "Search" button and "Only Elements" mode pill, yellow
 * three-state "Yes/No" buttons, blue links, pagination current page, active filter-group border, focus
 * rings and checkbox accent. The rules below cover the explorer parts it does not reach, mostly
 * dash-mp-components styles injected at runtime (stock #3273DC / #DBDBDB / #4A4A4A / #CCC values).
 * Old -> new: #4A4A4A / #363636 text -> --hub-black; #DBDBDB / #CCC / #EEE lines -> --hub-border;
 * #F5F5F5 / #F3F3F3 fills -> --hub-bg; #7A7A7A / #B5B5B5 muted text -> --hub-grey; #3273DC accents -> --hub-link.
 * Contrast (WCAG AA): no yellow text or thin yellow lines anywhere on this light page; yellow is only a
 * background under #181716 text. The periodic-table family colours are scientific and stay unchanged.
 * ====================================================================================================== */

/* ---- search band: the materials input */
.mp-page-materials-explorer .mpc-materials-input .input,
.mp-page-materials-explorer .mpc-search-ui .input {
  color: var(--hub-black, #181716);
}
/* "Search" while a request runs: Bulma draws a WHITE spinner (thin white arcs on yellow, about 1.3:1);
 * on the yellow primary button it must be black like the label. */
.mp-page-materials-explorer .mpc-materials-input .button.is-primary.is-loading::after {
  border-color: transparent transparent var(--hub-black, #181716) var(--hub-black, #181716) !important;
}
/* "Materials" addon */
.mp-page-materials-explorer .mpc-materials-input .button.is-static {
  background-color: var(--hub-bg, #F2F2F2);
  border-color: var(--hub-border, #C8C8C8);
  color: var(--hub-grey, #737373);
}
/* "?" examples button: Bulma .has-text-grey-light (#B5B5B5, 2:1 on white) -> muted grey that passes AA */
.mp-page-materials-explorer .mpc-materials-input .input-help-button.has-text-grey-light {
  color: var(--hub-grey, #737373) !important;
}
.mp-page-materials-explorer .mpc-materials-input .input-help-button.has-text-grey-light:hover {
  color: var(--hub-black, #181716) !important;
}
.mp-page-materials-explorer .mpc-materials-input .input-help-button:hover,
.mp-page-materials-explorer .mpc-materials-input .input-help-button:focus {
  border-color: var(--hub-border, #C8C8C8);
}
.mp-page-materials-explorer .mpc-materials-input .control [data-tooltip]:hover {
  border-left-color: var(--hub-grey, #737373);
}
/* periodic-table toggle: a black glyph on white (BRAND: icons on light backgrounds are #181716; the global
 * `i.is-active` rule would make it link blue). While the table is shown the button reads as pressed. */
.mp-page-materials-explorer .mpc-materials-input [data-testid="materials-input-toggle-button"] > i,
.mp-page-materials-explorer .mpc-materials-input [data-testid="materials-input-toggle-button"] > i.is-active {
  color: var(--hub-black, #181716);
}
.mp-page-materials-explorer .mpc-materials-input [data-testid="materials-input-toggle-button"]:has(> i.is-active) {
  background-color: var(--hub-bg, #F2F2F2);
}
/* autocomplete and examples menus under the field */
.mp-page-materials-explorer .mpc-materials-input .autocomplete,
.mp-page-materials-explorer .mpc-materials-input .input-help-menu {
  border-color: var(--hub-border, #C8C8C8);
  color: var(--hub-black, #181716);
}
.mp-page-materials-explorer .mpc-materials-input .autocomplete .dropdown-item {
  color: var(--hub-black, #181716);
}
.mp-page-materials-explorer .mpc-materials-input .autocomplete-label {
  color: var(--hub-grey, #737373);
}
.mp-page-materials-explorer .mpc-materials-input .input-help-menu .tag {
  background-color: var(--hub-bg, #F2F2F2);
}

/* ---- periodic table (family colours unchanged) */
.mp-page-materials-explorer .mpc-materials-input .table-legend-container.box {
  border-color: var(--hub-border, #C8C8C8);
  color: var(--hub-black, #181716);
}
.mp-page-materials-explorer .mpc-materials-input .mat-element {
  color: var(--hub-black, #181716);
}
/* selected elements: a crisp black frame instead of 25% black */
.mp-page-materials-explorer .mpc-materials-input .mat-element.enabled {
  border-color: var(--hub-black, #181716);
}
/* mode pill: inactive halves get the hub border; the active half stays yellow with black text (core) */
.mp-page-materials-explorer .mpc-pt-mode-switcher .tabs.is-toggle li:not(.is-active) a {
  border-color: var(--hub-border, #C8C8C8);
  color: var(--hub-black, #181716);
}
.mp-page-materials-explorer .mpc-pt-mode-switcher .tabs.is-toggle li:not(.is-active) a:hover {
  background-color: var(--hub-bg-light, #F9F9F9);
  border-color: var(--hub-grey, #737373);
}
/* wildcard key, formula keypad and the help text box */
.mp-page-materials-explorer .mpc-materials-input .second-span button,
.mp-page-materials-explorer .mpc-materials-input .mpc-pt-mode-content .pt-description > * {
  border-color: var(--hub-border, #C8C8C8);
}

/* ---- filters panel */
.mp-page-materials-explorer .mpc-search-ui .panel-block {
  border-bottom-color: var(--hub-bg, #F2F2F2);
  color: var(--hub-black, #181716);
}
.mp-page-materials-explorer .mpc-search-ui .panel-block-title > .button:hover {
  color: var(--hub-black, #181716) !important;
}
/* "N active" count next to a group name: an active marker, so yellow with black text like the other
 * active pills. The group name around it is drawn at 70% opacity; black on yellow keeps AA there
 * (white on the faded link blue did not: about 3.3:1). */
.mp-page-materials-explorer .mpc-search-ui .panel-block-title .tag.is-link {
  background-color: var(--hub-yellow, #FFDC00);
  color: var(--hub-black, #181716);
  font-weight: 600;
}
.mp-page-materials-explorer .mpc-search-ui .mpc-filter-label,
.mp-page-materials-explorer .mpc-search-ui .checkbox,
.mp-page-materials-explorer .mpc-search-ui .checkbox:hover {
  color: var(--hub-black, #181716);
}

/* range sliders. dash-mp-components paints the track as an INLINE gradient
 * (#CCC | #3273DC selected range | #CCC), so a stylesheet cannot swap the colour stops without losing the
 * range. Instead an overlay inherits that same gradient (`background: inherit`) and recolours it with a
 * filter fitted in sRGB: #3273DC -> #3F61C4 (--hub-link) and #CCC -> #C8C8C8 (--hub-border), exactly to the
 * unit. The overlay matches the 5px inner track (.slider-track, transform: scale(1), is its containing
 * block), paints under the thumbs and ticks, and takes no pointer events, so dragging is unchanged. */
.mp-page-materials-explorer .mpc-range-slider .slider-track-inner::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 5px;
  margin-top: -2.5px;
  background: inherit;
  filter: hue-rotate(9deg) saturate(.77) brightness(.93) contrast(1.17);
  pointer-events: none;
}
.mp-page-materials-explorer .mpc-range-slider .slider-tick-mark {
  background-color: var(--hub-border, #C8C8C8) !important; /* inline #CCC */
}
.mp-page-materials-explorer .mpc-range-slider .button.is-slider > .inner-slider-button {
  background-color: var(--hub-border, #C8C8C8);
}
.mp-page-materials-explorer .mpc-range-slider .button.is-slider.is-dragged > .inner-slider-button {
  background-color: var(--hub-link, #3F61C4);
}

/* react-select (Spacegroup Symbol / Number, Crystal System, Magnetic Ordering). Emotion classes are single
 * class selectors, so these page-scoped rules win. */
.mp-page-materials-explorer .mpc-search-ui .react-select__control {
  border-color: var(--hub-border, #C8C8C8);
}
.mp-page-materials-explorer .mpc-search-ui .react-select__control:hover {
  border-color: var(--hub-grey, #737373);
}
.mp-page-materials-explorer .mpc-search-ui .react-select__control--is-focused,
.mp-page-materials-explorer .mpc-search-ui .react-select__control--is-focused:hover {
  border-color: var(--hub-link, #3F61C4);
  box-shadow: 0 0 0 1px var(--hub-link, #3F61C4);
}
.mp-page-materials-explorer .mpc-search-ui .react-select__single-value,
.mp-page-materials-explorer .mpc-search-ui .react-select__input-container,
.mp-page-materials-explorer .mpc-search-ui .react-select__option {
  color: var(--hub-black, #181716);
}
.mp-page-materials-explorer .mpc-search-ui .react-select__placeholder {
  color: var(--hub-grey, #737373);
}
.mp-page-materials-explorer .mpc-search-ui .react-select__indicator {
  color: var(--hub-grey, #737373);
}
.mp-page-materials-explorer .mpc-search-ui .react-select__indicator:hover {
  color: var(--hub-black, #181716);
}
.mp-page-materials-explorer .mpc-search-ui .react-select__indicator-separator {
  background-color: var(--hub-border, #C8C8C8);
}
.mp-page-materials-explorer .mpc-search-ui .react-select__option--is-focused,
.mp-page-materials-explorer .mpc-search-ui .react-select__option:not(.react-select__option--is-selected):hover {
  background-color: var(--hub-blue-tint, #EDF0F9); /* stock: #DEEBFF (focused), #F5F5F5 (CSS-MP hover) */
  color: var(--hub-black, #181716);
}
.mp-page-materials-explorer .mpc-search-ui .react-select__option:active {
  background-color: var(--hub-blue-tint-strong, #E2E7F6);
}
.mp-page-materials-explorer .mpc-search-ui .react-select__option--is-selected {
  background-color: var(--hub-link, #3F61C4);
  color: #FFFFFF;
}
.mp-page-materials-explorer .mpc-search-ui .react-select__multi-value {
  background-color: var(--hub-blue-tint-strong, #E2E7F6);
}
.mp-page-materials-explorer .mpc-search-ui .react-select__multi-value__label {
  color: var(--hub-black, #181716);
}

/* ---- results header: count, active-filter chips, Columns menu */
.mp-page-materials-explorer .mpc-search-ui .mpc-search-ui-data-header,
.mp-page-materials-explorer .mpc-search-ui .mpc-search-ui-data-header .subtitle {
  color: var(--hub-black, #181716);
}
.mp-page-materials-explorer .mpc-search-ui .mpc-active-filter-button .button {
  background-color: #FFFFFF;
  border-color: var(--hub-border, #C8C8C8);
  color: var(--hub-black, #181716);
}
.mp-page-materials-explorer .mpc-search-ui .mpc-active-filter-button .button:hover,
.mp-page-materials-explorer .mpc-search-ui .mpc-active-filter-button .button:focus {
  background-color: var(--hub-blue-tint, #EDF0F9);
  border-color: var(--hub-link, #3F61C4);
  color: var(--hub-black, #181716);
}
.mp-page-materials-explorer .mpc-search-ui .dropdown-content,
.mp-page-materials-explorer .mpc-search-ui .dropdown-item {
  color: var(--hub-black, #181716);
}

/* ---- results table and paginator */
.mp-page-materials-explorer .mpc-search-ui .rdt_TableHeadRow,
.mp-page-materials-explorer .mpc-search-ui .rdt_TableRow {
  color: var(--hub-black, #181716);
}
.mp-page-materials-explorer .mpc-search-ui .rdt_TableRow:hover {
  background-color: var(--hub-bg-light, #F9F9F9);
}
.mp-page-materials-explorer .mpc-search-ui .pagination-link,
.mp-page-materials-explorer .mpc-search-ui .pagination-previous,
.mp-page-materials-explorer .mpc-search-ui .pagination-next {
  border-color: var(--hub-border, #C8C8C8);
  color: var(--hub-black, #181716);
}
.mp-page-materials-explorer .mpc-search-ui .pagination-link:hover,
.mp-page-materials-explorer .mpc-search-ui .pagination-previous:hover,
.mp-page-materials-explorer .mpc-search-ui .pagination-next:hover {
  border-color: var(--hub-grey, #737373);
  color: var(--hub-black, #181716);
}
.mp-page-materials-explorer .mpc-search-ui .pagination-link.is-current {
  background-color: var(--hub-link, #3F61C4);
  border-color: var(--hub-link, #3F61C4);
  color: #FFFFFF;
}
.mp-page-materials-explorer .mpc-search-ui .pagination-previous[disabled],
.mp-page-materials-explorer .mpc-search-ui .pagination-next[disabled] {
  background-color: var(--hub-bg, #F2F2F2);
  border-color: var(--hub-border, #C8C8C8);
  color: var(--hub-grey, #737373);
}
.mp-page-materials-explorer .mpc-search-ui .pagination-ellipsis {
  color: var(--hub-grey, #737373);
}