/* CSS Helper Classes and Utilities */

/* Pagination Styles */
.pagination a {
  cursor: pointer;
}

.pagination .page-item.active .page-link,
.pagination .active > .page-link,
.active > .page-link,
.page-link.active {
  z-index: 3;
  color: rgb(var(--color-canvas)) !important;
  background-color: rgb(var(--color-primary)) !important;
  border-color: rgb(var(--color-primary)) !important;
  border-top-color: rgb(var(--color-primary)) !important;
  border-right-color: rgb(var(--color-primary)) !important;
  border-bottom-color: rgb(var(--color-primary)) !important;
  border-left-color: rgb(var(--color-primary)) !important;
}

.page-link {
  position: relative;
  display: block;
  color: rgb(var(--color-primary)) !important;
  background-color: rgb(var(--color-canvas)) !important;
  border-color: rgb(var(--grey-300)) !important;
  transition: color var(--dur) var(--easing), background-color var(--dur) var(--easing), border-color var(--dur) var(--easing), box-shadow var(--dur) var(--easing);
}

[data-theme="dark"] .page-link {
  color: rgb(var(--color-primary)) !important;
  background-color: rgb(var(--color-canvas)) !important;
  border-color: rgb(var(--grey-600)) !important;
}

.pagination .page-link:hover,
.page-link:hover {
  z-index: 2;
  color: rgb(var(--color-primary-hover)) !important;
  background-color: rgba(var(--color-primary), 0.1) !important;
  border-color: rgb(var(--grey-300)) !important;
  border-top-color: rgb(var(--grey-300)) !important;
  border-right-color: rgb(var(--grey-300)) !important;
  border-bottom-color: rgb(var(--grey-300)) !important;
  border-left-color: rgb(var(--grey-300)) !important;
}

[data-theme="dark"] .pagination .page-link:hover,
[data-theme="dark"] .page-link:hover {
  color: rgb(var(--color-primary-hover)) !important;
  background-color: rgba(var(--color-primary), 0.2) !important;
  border-color: rgb(var(--grey-600)) !important;
  border-top-color: rgb(var(--grey-600)) !important;
  border-right-color: rgb(var(--grey-600)) !important;
  border-bottom-color: rgb(var(--grey-600)) !important;
  border-left-color: rgb(var(--grey-600)) !important;
}

[aria-current="page"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

/* Accordion Styles */
.accordion-button {
  font-size: 100%;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none; 
}

.accordion-item {
  border: none;
}

.tt-link-a.stretched-link::after {
  margin-top: auto;
  margin-bottom: auto;
}

/* UI Widget Styles */
.ui-accordion .ui-accordion-content {
  overflow: visible;
}

.ui-widget-content {
  border: 0px none;
  background: rgb(var(--grey-50));
}

.ui-accordion .ui-accordion-content {
  padding: 0.3em 0.2em;
}

.ui-state-active {
  background: rgb(var(--color-text-muted));
  border: 0px none;
}

.ui-state-hover, .ui-state-default {
  border: 0px none;
}

#accordion {
  text-align: left;
}

.ui-accordion .ui-accordion-header {
  padding: 0.4em 0.4em 0.5em 0em;
}

/* Image Styles */
.result_image img {
  width: auto!important; 
  max-height: 35px;
  max-width: 35px; 
  margin: 0 6px 5px 0; 
  filter: grayscale(15%);
}

.result_image {
  float: left; 
  display: block;
}

.result_image img {
  border: 0px;
}

/* Text Styles */
.result_title {
  font-size: 100%;
}

.description {
  font-size: 100%; 
  color: rgb(var(--color-success));
}

.context {
  font-size: 100%;
}

.infoline {
  font-size: 80%; 
  font-style: normal; 
  color: rgb(var(--grey-500));
}

.fnd_searchform {
  font-size: 100%;
}

.fnd_results_per_page {
  font-size: 80%; 
  margin-left: 10px;
}

.fnd_match {
  font-size: 80%; 
  margin-left: 10px;
}

.fnd_categories {
  font-size: 80%;
}

.fnd_categories ul {
  display: inline; 
  margin: 0px; 
  padding: 0px;
}

.fnd_categories li {
  display: inline; 
  margin-left: 15px; 
  list-style-type: none;
}

/* Result Block Styles */
.result_block {
  margin-top: 15px; 
  margin-bottom: 15px; 
  clear: left;
}

.result_altblock {
  margin-top: 15px; 
  margin-bottom: 15px; 
  clear: left;
}

.result_pages {
  font-size: 100%;
}

.result_pagescount {
  font-size: 100%;
}

.searchtime {
  font-size: 80%;
}

/* Recommended Styles */
.recommended {
  /* Recommended block styles */
}

.recommended_heading {
  float: right; 
  font-weight: bold;
}

.recommend_block {
  margin-top: 15px; 
  margin-bottom: 15px; 
  clear: left;
}

.recommend_title {
  font-size: 100%;
}

.recommend_description {
  font-size: 100%; 
  color: rgb(var(--color-success));
}

.recommend_infoline {
  font-size: 80%; 
  font-style: normal; 
  color: rgb(var(--grey-500));
}

.recommend_image {
  float: left; 
  display: block;
}

.recommend_image img {
  margin: 10px; 
  width: 80px; 
  border: 0px;
}

/* Layout shift guards (modal/open, scrollbar compensation) */
/* Prefer stable scrollbar gutter (no forced scrollbars site-wide) */
@supports (scrollbar-gutter: stable){
  html { scrollbar-gutter: stable; }
}
/* Avoid extra padding-right injection when gutter is already stable */
.modal-open { padding-right: 0 !important; }

/* Ensure feedback modal is above user menu (z-index: 9999), dictionary modal (2001), and all lectures modals */
#feedbackModal { z-index: 2010 !important; }
#feedbackModal .modal-dialog { z-index: 2011 !important; position: relative; }
/* Backdrop should be below modal - use more specific selector */
body.modal-open:has(#feedbackModal.show) .modal-backdrop.show { z-index: 2005 !important; }
/* Fallback for browsers without :has() support */
#feedbackModal.show ~ .modal-backdrop.show { z-index: 2005 !important; }

/* Multi-text Wrapper */
.tool-multiwrapbox {
  /* Multi-text wrapper styles */
}

.tool-multiwrapbox .multi-text {
  /* Multi-text styles */
}

.tool-multiwrapbox::before {
  /* Multi-text before styles */
}

.tool-multiwrapbox .multi-text_after {
  /* Multi-text after styles */
}

.tool-multiwrapbox .op-btn {
  /* Operation button styles */
}

.tool-multiwrapbox .op-btn.op-collapse {
  /* Collapse button styles */
}

.tool-multiwrapbox.reset-style {
  /* Reset style */
}

.tool-multiwrapbox .multi-text_after.reset-style {
  /* Reset after style */
} 