/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* REACTABLE CUSTOM STYLESHEET FOR STATISTIKPORTAL ZUG :::::::::::::::::::::: */
/* Custom styles for reactable tables to match the theme of the application : */
/* Date: 2026-03-17 ::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* Reactable: General table styles */

.Reactable {
    background-color: var(--bs-body-bg);
}

.rt-table {
    border-color: var(--bs-border-color);
}

.rt-td {
    border-top-color: var(--bs-border-color);
}

.rt-th {
    border-bottom-color: var(--bs-border-color);
}

.rt-th-group::after {
    background-color: var(--bs-border-color);
}

.rt-pagination {
    border-top-color: var(--bs-border-color);
}

/* Reactable: Row Striping and Hover in Dark Mode */

.quarto-dark .rt-tr-striped {
    background-color: rgba(255, 255, 255, var(--rt-odd-opacity));
}

.quarto-dark .rt-tr-striped-sticky {
    background-color: rgba(255, 255, 255, var(--rtodd-opacity));
}

.quarto-dark .rt-tr-highlight:hover {
    background-color: rgba(255, 255, 255, var(--rt-hover-opacity));
}

.quarto-dark .rt-tr-highlight-sticky:hover {
    background-color: rgba(255, 255, 255, var(--rt-hover-opacity));
}

/* Reactable: Search input field */

.rt-search {
    background-color: var(--bs-body-bg);
    color: var(--btn-category-color);
    border: 1px solid var(--btn-category-border);
    border-radius: var(--border-radius, 8px);
    font-size: 1rem;
    height: var(--plotly-button-height);
    min-width: 200px;
    max-width: 260px;
}

/* --btn-category-color's dark-mode value dimmed on 2026-07-22 (8e05566)
   when it was remapped from $color-btn-text-high to a new, muted
   $color-btn-text-medium meant for other buttons. Pin these table controls
   back to --btn-text-high (still the original, unchanged near-white) so the
   table keeps last week's look regardless of that change. */
.quarto-dark .rt-search,
.quarto-dark .dropdown-toggle-btn,
.quarto-dark .dropdown-item-btn,
.quarto-dark .reactable-filter-select,
.quarto-dark .reactable-filter-value,
.quarto-dark .rt-filter-label {
    color: var(--btn-text-high);
}

@media (min-width: 577px) {
    /* Reset reactable's bottom margin/alignment in the shared controls row. */
    .rt-search {
        margin-left: auto;
        margin-block: 0;
        align-self: center;
    }
    /* Avoid the baseline space below the inline-flex dropdown button. */
    [id^="dd-wrapper-"] {
        display: flex;
        align-items: center;
    }
}

.rt-search::-webkit-search-cancel-button {
    display: none;
}

.rt-search:active, .rt-search:focus {
    border: 1px solid var(--bs-border-color);
}

/* Reactable: Pagination controls */

.rt-page-jump, .rt-page-size-select {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
}

.rt-page-jump:focus,
.rt-page-jump:active {
    border: 1px solid var(--bs-border-color);
    outline: none;
}

.quarto-dark .rt-page-jump {
    color-scheme: dark;
}

.rt-prev-button, .rt-next-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--btn-category-border);
    border-radius: var(--border-radius, 10px);
    vertical-align: middle;
}

.rt-page-numbers {
    vertical-align: middle;
}

.rt-page-button:not(.rt-prev-button):not(.rt-next-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--border-radius, 10px);
    vertical-align: middle;
}

.rt-prev-button:disabled,
.rt-next-button:disabled {
    opacity: 0.35;
}

/* Reactable Pagination: Next/Previous as SVG arrows, matching the
   product-nav buttons' icons (ICONS['arrow'] / ICONS['arrow-left']).
   NOT sourced from scripts/icons.py — CSS can't import Python, so these
   data-URIs are manual copies. If those icons ever change, update the
   path data below by hand. */

.rt-prev-button::after,
.rt-next-button::after {
    content: '';
    display: inline-block;
    height: 16px;
    width: 16px;
    background-color: var(--accent-color);
}

.rt-next-button::after {
    /* viewBox cropped to the arrow's own bounding box (plus stroke padding)
       instead of the source icon's full 0 0 64 64 canvas — ICONS['arrow']
       leaves a lot of empty margin around the glyph, which otherwise makes
       it render visibly smaller than the prev button's arrow-left icon. */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='6 6 52 52' fill='none' stroke='white' stroke-width='6'%3E%3Cpath d='M9.01058 32.002L53.875 32.002' stroke-miterlimit='10'/%3E%3Cpath d='M36.5684 51L54.9863 32L36.5684 13' stroke-miterlimit='10' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='6 6 52 52' fill='none' stroke='white' stroke-width='6'%3E%3Cpath d='M9.01058 32.002L53.875 32.002' stroke-miterlimit='10'/%3E%3Cpath d='M36.5684 51L54.9863 32L36.5684 13' stroke-miterlimit='10' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center / contain;
}

.rt-prev-button::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 8H1m0 0 6-6M1 8l6 6'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 8H1m0 0 6-6M1 8l6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* reactable's own focus cue is a 4%-black background, invisible in dark
   mode, so tabbing through the pages showed no focus at all. Same inside
   ring as the filter dropdown; prev/next have a border, the numbers don't. */
.rt-page-button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--color-border-focus);
}
.rt-prev-button:focus-visible,
.rt-next-button:focus-visible {
    border-color: var(--color-border-focus);
    box-shadow: inset 0 0 0 2px var(--color-border-focus);
}

.rt-page-button:not(:disabled):hover {
    color: rgb(255, 255, 255);
    background: var(--btn-category-hover-bg);
    border-color: var(--btn-category-hover-bg);
}

.rt-prev-button:not(:disabled):hover::after,
.rt-next-button:not(:disabled):hover::after {
    background-color: rgb(255, 255, 255);
}

/* Reactable: custom category-filter dropdown (desktop). Markup + toggle JS
   are generated inline per-table by the R table helper (portulak/zuggeti),
   not by this repo's own templates — these class names are a fixed contract
   with that generator, so don't rename them here without updating there too.
   Below 576px the generator hides this and shows .reactable-filter-select
   (a plain <select>) instead. */
.dropdown-wrapper {
  position: relative;
}
.dropdown-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  height: var(--plotly-button-height);
  padding: 8px 14px;
  font-size: 1.0rem;
  border: 1px solid var(--btn-category-border);
  border-radius: var(--border-radius, 10px);
  background-color: var(--btn-category-bg);
  color: var(--btn-category-color);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: border-color 0.15s, background-color 0.15s;
  hyphens: none !important;
  max-width: 350px;
  min-width: 200px;
  justify-content: flex-start;
}
.dropdown-toggle-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.dropdown-toggle-btn .rt-filter-label {
    flex-shrink: 0;
}
.dropdown-toggle-btn .chevron-icon {
    margin-left: auto;
}
.dropdown-toggle-btn:hover {
  background-color: var(--btn-category-hover-bg);
  color: var(--btn-category-hover-color);
  border-color: var(--btn-category-hover-border);
}
.dropdown-toggle-btn.active {
  border-color: var(--btn-category-active-border);
}

/* Focus ring drawn inside the border (border + inset shadow, same as the
   listing search box in styles.scss) rather than as an outer outline: the
   plot toolbar row's ancestors clip overflow, which cut an outer ring off. */
.dropdown-toggle-btn:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: inset 0 0 0 2px var(--color-border-focus);
}


/* The R table helper bakes its own thicker (stroke-width 6) chevron path
   inline, already rotated via an inline style to point down — not sourced
   from scripts/icons.py since it's generated outside this repo's templates.
   ::after doesn't reliably render on <svg> elements across browsers, so
   instead hide that inline path and apply the CSS mask directly to the
   <svg class="chevron-icon"> element itself; its parent's existing inline
   rotation still applies, so it stays pointing down for free. */
.chevron-icon {
  flex-shrink: 0;
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: var(--accent-color);
  transition: background-color 0.15s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 64 64' fill='none'%3E%3Cpath stroke='white' stroke-linecap='square' stroke-miterlimit='10' stroke-width='4' d='m23 49 18-18-18-18'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 64 64' fill='none'%3E%3Cpath stroke='white' stroke-linecap='square' stroke-miterlimit='10' stroke-width='4' d='m23 49 18-18-18-18'/%3E%3C/svg%3E") no-repeat center / contain;
}
.chevron-icon path {
  display: none;
}
.dropdown-toggle-btn:hover .chevron-icon {
  background-color: var(--btn-category-hover-color);
}
.topic-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: max(200px, 100%);
  background-color: var(--bs-body-bg);
  border: 1px solid var(--btn-category-border);
  border-radius: var(--border-radius, 10px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 200;
  /* Cap the list height and scroll internally once it exceeds that — without
     this, long option lists have nothing to scroll internally, so any wheel
     motion over the menu falls through and scrolls the page (and the plot
     with it) instead. overscroll-behavior stops that scroll from chaining
     into the page once the internal list itself is fully scrolled. */
  max-height: min(20rem, 60vh);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.dropdown-item-btn {
  padding: 9px 12px;
  font-size: 1.0rem;
  cursor: pointer;
  color: var(--btn-category-color);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.15s;
}
.dropdown-item-btn:hover {
  background-color: var(--btn-category-hover-bg);
  color: var(--btn-category-hover-color);
}

/* keyboard-highlighted option: outline keeps it distinct from hover/selected */
.dropdown-item-btn.active {
  outline: 3px solid var(--btn-category-hover-border);
  outline-offset: -2px;
}
.dropdown-item-btn.active:first-child {
    border-radius: var(--border-radius, 10px) var(--border-radius, 10px) 0 0;
}
.dropdown-item-btn.active:last-child {
    border-radius: 0 0 var(--border-radius, 10px) var(--border-radius, 10px);
}
.dropdown-item-btn.active:only-child {
    border-radius: var(--border-radius, 10px);
}

.dropdown-item-btn.selected {
  font-weight: 600;
}

/* ---- mobile select (label + select share one border) ------ */
.reactable-filter-wrapper {
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  display: inline-flex;
  height: var(--plotly-button-height);
  padding: 8px 32px 8px 14px;
  font-size: 1.0rem;
  border: 1px solid var(--btn-category-border);
  border-radius: var(--border-radius, 8px);
  background-color: var(--btn-category-bg);
  background-image: var(--plotly-select-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 1rem 1rem;
  color: var(--btn-category-color);
  min-width: 200px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

/* Hover colors the whole box, not just the <select> inside it (that left a
   half-filled bar next to the label/chevron), and only on devices that can
   really hover: on touch screens a tap leaves :hover stuck on. */
@media (hover: hover) {
  .reactable-filter-wrapper:hover {
    background-color: var(--btn-category-hover-bg);
    color: var(--btn-category-hover-color);
    border-color: var(--btn-category-hover-border);
  }
  .reactable-filter-wrapper:hover .reactable-filter-select,
  .reactable-filter-wrapper:hover .reactable-filter-value,
  .rt-filter-label {
    color: inherit;
  }
}

.reactable-filter-select option {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Inside ring, same as .dropdown-toggle-btn:focus-visible (an outer
   outline gets clipped by the plot/table containers). :focus-visible, not
   :focus-within, so it shows for keyboard focus only, not after a tap. */
.reactable-filter-wrapper:has(.reactable-filter-select:focus-visible) {
  border-color: var(--color-border-focus);
  box-shadow: inset 0 0 0 2px var(--color-border-focus);
}

.reactable-filter-wrapper label {
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
}

.reactable-filter-select {
  flex: 1;
  padding: 0;
  border: none;
    -webkit-appearance: none;
    appearance: none;
  background: transparent;
  color: var(--btn-category-color);
  font: inherit;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.reactable-filter-wrapper .reactable-filter-select {
    background-image: none;
}

/* assets/js/filter-select.js: the <select> becomes an invisible layer over
   the whole box (iOS paints a dark pressed-state on a visible one) and a
   span shows the value. Without JS the select stays visible as before. */
.reactable-filter-wrapper.has-filter-value {
    position: relative;
}
.reactable-filter-wrapper.has-filter-value .reactable-filter-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.reactable-filter-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Reactable: category-filter <select> and search input span the full width
   on mobile. table_zg.R's own generated CSS already sets #search-<id> to
   width:100% below 576px, but .rt-search's unconditional max-width:260px
   (above) still clamps it — width and max-width are independent properties,
   so the id rule's higher specificity doesn't help here. The select's
   wrapper id is randomised per table instance, so it's matched by id-prefix
   rather than an exact id; !important is needed on its display because
   table_zg.R's generated <style> targets it with an id selector (higher
   specificity than ours). */
@media (max-width: 576px) {
    [id^="select-wrapper-"] {
        display: flex !important;
        width: 100%;
    }
    .reactable-filter-wrapper {
        display: flex;
        width: 100%;
        min-width: 0;
    }
    .reactable-filter-select {
        width: auto;
        min-width: 0;
    }
    .rt-search {
        max-width: none;
    }
}

/* Reactable: Smaller font size on mobile */

@media (max-width: 576px) {
    .Reactable {
        font-size: small;
    }
}

/* Reactable: Wider table — breaks out of the 900px body-content column to
   match the homepage/navbar width (1440px), using the same negative-margin
   technique as the topic-page listing widget in styles.scss.
   Only applied on desktop (≥950px) where the fixed-width grid is active. */
@media (min-width: 950px) {
    .wider-table {
        --content-col: min(900px, calc(100vw - 6rem));
        --wide-col:    min(1440px, calc(100vw - 13rem));
        --wider-width: max(var(--content-col), var(--wide-col));
        width: var(--wider-width);
        margin-left:  calc((var(--content-col) - var(--wider-width)) / 2);
        margin-right: calc((var(--content-col) - var(--wider-width)) / 2);
    }
}