/* Rating distribution popover/modal + mylist statistics (AnimeGO markup) */

.rating-statistics-popover {
  --bs-popover-max-width: 22rem;
  --bs-popover-border-radius: 0.75rem;
  max-width: var(--bs-popover-max-width);
  width: max-content;
  min-width: 16rem;
  z-index: 1080;
  box-shadow: var(--bs-popover-box-shadow, 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1));
}

.rating-statistics-popover .popover-body {
  padding: 0.85rem 1rem;
}

.rating-statistics-popover .popover-arrow {
  width: var(--bs-popover-arrow-width, 1rem);
  height: var(--bs-popover-arrow-height, 0.5rem);
}

.rating-statistics-popover .popover-arrow::before,
.rating-statistics-popover .popover-arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0 calc(var(--bs-popover-arrow-width, 1rem) * 0.5) var(--bs-popover-arrow-height, 0.5rem);
}

.rating-statistics-popover .popover-arrow::before {
  bottom: 0;
  border-bottom-color: var(--bs-popover-border-color, var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175)));
}

.rating-statistics-popover .popover-arrow::after {
  bottom: calc(-1 * var(--bs-popover-border-width, 1px));
  border-bottom-color: var(--bs-popover-bg, var(--bs-body-bg, #fff));
}

/* Mobile: rating stats as centered modal (same pattern as mylist statistics). */
.rating-statistics-modal {
  z-index: 1055;
}

.rating-statistics-modal .modal-dialog {
  margin: 1rem;
  max-width: 22rem;
}

.rating-statistics-modal .modal-content {
  border: none;
}

.rating-statistics-modal .modal-body .popover-fill > .rating-statistics:first-child {
  display: none;
}

.rating-statistics-modal .rating-statistics {
  padding: 0;
}

.rating-statistics h5 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  line-height: 1.3;
}

.rating-statistics__label {
  min-width: 1.25rem;
  line-height: 1.25rem;
}

.rating-statistics__bar,
.mylist-statistics__bar {
  min-height: 1.25rem;
  box-sizing: border-box;
}

.rating-statistics__percent {
  min-width: 5.3rem;
  line-height: 1.15;
  font-size: 0.875rem;
}

.mylist-statistics__label {
  min-width: 7.5rem;
}

.mylist-statistics__percent {
  min-width: 2.5rem;
  line-height: 1.25rem;
}

/* Dark mode: deep red bars (reference desktop rating chart). */
[data-bs-theme=dark] .rating-statistics {
  --bs-rating_bar-color: rgba(180, 45, 45, 0.92);
}

[data-bs-theme=dark] .mylist-statistics {
  --bs-mylist_bar-color: rgba(180, 45, 45, 0.92);
}

[data-bs-theme=dark] .rating-statistics__bar,
[data-bs-theme=dark] .mylist-statistics__bar {
  background-color: var(--bs-rating_bar-color, rgba(180, 45, 45, 0.92)) !important;
}

[data-bs-theme=dark] .mylist-statistics__bar {
  background-color: var(--bs-mylist_bar-color, rgba(180, 45, 45, 0.92)) !important;
}

@media (min-width: 992px) {
  .bottom-nav {
    display: none !important;
  }
}

/* Neutralize "active" accents (no primary/link red on controls). */
.bn-item.active {
  color: var(--bs-body-color, #dee2e6) !important;
}

.bn-item .bn-icon.icon-link,
.bn-item .icon-link {
  text-decoration: none !important;
  background-image: none !important;
}

.bn-item.active .bn-icon,
.bn-item.active .bn-label {
  color: inherit;
}

.sorter .btn.btn-link {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-active-color: var(--bs-body-color);
  color: var(--bs-body-color) !important;
  text-decoration: none !important;
}

.sorter .btn.btn-link:hover,
.sorter .btn.btn-link:focus,
.sorter .btn.btn-link:active {
  color: var(--bs-body-color) !important;
  text-decoration: none !important;
}

.sorter .view-item {
  color: var(--bs-secondary-color, #adb5bd);
}

.sorter .view-item.active,
.sorter .view-item:hover {
  color: var(--bs-body-color, #dee2e6) !important;
}

.sorter .dropdown-item.active,
.sorter .dropdown-item:active {
  background-color: var(--bs-tertiary-bg, #2b3035) !important;
  color: var(--bs-body-color, #dee2e6) !important;
}

/* Catalog empty state — must span full grid width (avoid 1-col vertical wrap). */
.catalog-empty {
  width: 100%;
  min-height: 12rem;
  grid-column: 1 / -1;
}

.catalog-empty__title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--bs-secondary-color, #6c757d);
  white-space: normal;
  word-break: normal;
  max-width: 22rem;
}

.catalog-empty__hint {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  line-height: 1.4;
  max-width: 22rem;
}

/* Anime page: one screenshot frame on mobile; extras stay in lightbox DOM. */
@media (max-width: 575.98px) {
  .screenshots .screenshots__item--extra {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .ani-list__item-picture,
  .ani-grid2__item-picture {
    width: 96px;
  }
}