/* ABOUTME: Portal-wide CSS tweaks layered on top of the DaisyUI CDN stylesheet. */
/* ABOUTME: Keeps the ASRank collapse-arrow chevron painted on huge relationship tables. */

/*
 * A collapsed ASRank relationship section keeps all its rows in the DOM (so the
 * region filter and column sort can still see them), but laying out thousands of
 * collapsed rows wastes layout work on initial load. content-visibility:hidden
 * drops the collapsed subtree from rendering while leaving it in the DOM; the
 * rule lifts as soon as the section's checkbox is checked (expanded).
 */
.asrank-rel-section .collapse:not(:has(> input:checked)) > .collapse-content {
  content-visibility: hidden;
}

/*
 * Chevron paint glitch: DaisyUI draws the collapse arrow as a ::after on the
 * .collapse-title, but the title lives inside .collapse, which sets
 * overflow:hidden. When an expanded section has thousands of rows that clipped
 * box is enormous (hundreds of thousands of px tall) and the browser skips
 * painting the in-title arrow. We can't drop overflow:hidden — it's what clips
 * the table to the card's rounded corners. Instead, suppress DaisyUI's arrow and
 * draw our own on .asrank-rel-section, which sits outside the clip and always
 * paints regardless of section size.
 */
.asrank-rel-section .collapse-arrow > .collapse-title::after {
  content: none;
}

.asrank-rel-section {
  position: relative;
}

.asrank-rel-section:has(> .collapse.collapse-arrow)::after {
  content: "";
  position: absolute;
  top: 1.9rem;
  right: 1.4rem;
  height: 0.5rem;
  width: 0.5rem;
  box-shadow: 2px 2px;
  transform: translateY(-100%) rotate(45deg);
  transform-origin: 75% 75%;
  transition: transform 0.2s ease-out;
  pointer-events: none;
}

.asrank-rel-section:has(> .collapse > input:checked)::after {
  transform: translateY(-100%) rotate(225deg);
}