/* Search Filters Component Styles */

/* Filters Container - collapsible with pure CSS */
#filters-div {
  cursor: default;
  position: relative;
  z-index: 1090;
  background: transparent;
  display: flex;
  overflow: visible; /* Allow dropdowns to overflow */
  max-height: 60px;
  border-style: solid;
  border-color: transparent;
  border-width: 0.6em;
  transition: max-height 0.35s ease, border-width 0.35s ease;
}

/* Ensure dropdown containers create positioning context */
#filters-div .dropdown,
#filters-div .treeselect {
  position: relative; /* Create positioning context for absolute children */
}

/* Ensure dropdown menus and lists can overflow and are above filters */
#filters-div .dropdown-menu,
#filters-div .treeselect-list,
#filters-div .drp-menu {
  overflow: visible !important;
  z-index: 1100 !important; /* Higher than filters-div */
  /* position: absolute is set by Bootstrap, don't override */
}

/* When expanded - allow full height */
#filters-div.filters-expanded {
  max-height: 200px; /* Enough for content */
  border-width: 0.6em;
}

/* When collapsed - hide with smooth animation (border animates together with height) */
#filters-div:not(.filters-expanded) {
  max-height: 0;
  border-width: 0;
  overflow: hidden; /* Hide overflow only when collapsed */
}

.filters-toggle-text {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: rgb(var(--color-primary)); /* Голубой цвет текста */
  position: relative;
  z-index: 10; /* Высокий z-index, чтобы свечение было поверх стрелки */
  text-transform: uppercase;
  transition: opacity .2s var(--easing), 
              transform .2s var(--easing),
              color .2s ease,
              text-shadow .3s ease;
}

.filters-toggle-text::after {
  display: none; /* Убираем стрелку сверху */
}

.filters-toggle-icon-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.8) rotate(180deg);
  pointer-events: none;
  transition: opacity .2s var(--easing), transform .2s var(--easing);
}
.filters-toggle-icon { 
  font-size: 1.1em; 
  line-height: 1; 
  display: block;
}

.filters-bar {
    padding: 0;
    position: relative;
    overflow: visible; /* Allow dropdowns to overflow */
}

/* Public only filter - iOS-style toggle */
.public-only-filter-row {
	padding: 0.25rem 0.5rem;
	margin: 0;
	background: transparent;
	transition: background .2s var(--easing),
              color .2s var(--easing),
              transform .15s var(--easing);
	position: relative;
	overflow: hidden;
}

.public-only-filter-row:hover {
	background: linear-gradient(135deg, rgb(var(--color-primary)) 0%, rgb(var(--color-primary-hover)) 50%, rgb(var(--color-primary)) 100%);
	color: rgb(var(--color-canvas));
}

.public-only-filter-row.ripple-effect {
	animation: color-wave 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	background-size: 200% 100%;
}

@keyframes color-wave {
	0% {
		background-position: 0% 50%;
		opacity: 1;
	}
	50% {
		background-position: 50% 50%;
		opacity: 0.98;
	}
	100% {
		background-position: 0% 50%;
		opacity: 1;
	}
}

.public-only-filter-label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	padding: 6px 12px;
	border-radius: 0;
	transition: color 0.2s ease;
	user-select: none;
	width: 100%;
	margin: 0;
	outline: none;
}

.public-only-filter-label:focus,
.public-only-filter-label:active,
.public-only-filter-label:focus-visible {
	outline: none;
}

.public-only-filter-row:hover .public-only-filter-text {
	color: rgb(var(--color-canvas));
}

.public-only-filter-text {
	font-size: 0.9375rem;
	color: rgb(var(--grey-500));
	transition: color 0.2s ease;
	font-weight: 500;
}

.public-only-filter-toggle-wrapper {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.public-only-filter-hint {
	font-size: 1rem;
	color: rgb(var(--grey-400));
	transition: color 0.2s ease;
	margin-left: auto;
	opacity: 0.8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.public-only-filter-row:hover .public-only-filter-hint {
	color: rgba(var(--color-canvas), 0.9);
	opacity: 1;
}

/* Don't change toggle slider color on hover - keep orange color */

/* iOS-style toggle switch */
.public-only-toggle {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.public-only-toggle-slider {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 26px;
	background-color: rgb(var(--grey-300));
	border-radius: 13px;
	transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	flex-shrink: 0;
	box-shadow: inset 0 2px 4px rgba(var(--color-text), 0.1);
}

.public-only-toggle-slider::before {
	content: '';
	position: absolute;
	width: 22px;
	height: 22px;
	left: 2px;
	top: 2px;
	background-color: rgb(var(--color-canvas));
	border-radius: 50%;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 2px 6px rgba(var(--color-text), 0.25), 0 1px 2px rgba(var(--color-text), 0.15);
}

.public-only-toggle:checked + .public-only-toggle-slider {
	background-color: rgb(var(--color-public-accent)); /* Orange/amber color */
	transition: background-color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.public-only-toggle:checked + .public-only-toggle-slider::before {
	transform: translateX(18px);
	box-shadow: 0 2px 4px rgba(var(--color-text), 0.2);
	transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.public-only-toggle:not(:checked) + .public-only-toggle-slider {
	background-color: rgb(var(--grey-300));
	transition: background-color 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.public-only-toggle:focus + .public-only-toggle-slider,
.public-only-toggle:active + .public-only-toggle-slider,
.public-only-toggle:focus-visible + .public-only-toggle-slider {
	outline: none;
}

.public-only-toggle:active + .public-only-toggle-slider::before {
	width: 26px;
}

.public-only-toggle:checked:active + .public-only-toggle-slider::before {
	transform: translateX(14px);
}

.filter-row{
	background: linear-gradient(60deg, rgb(var(--grey-300)) 0%, rgb(var(--grey-100)) 40%, rgb(var(--grey-200)) 100%);
	display: block;
	overflow: visible; /* Allow dropdowns to overflow */
}


/* Filters are always visible - no animation needed */
#filters-div .filters > * {
  opacity: 1;
  transform: none;
}

.filters-label {
  flex-basis: 100%; 
  text-align: left;
}

/* Modern split navigation for search results */
.search-results-nav {
  display: flex;
  width: 100%;
  gap: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* background: rgb(var(--color-canvas)); */
  border-bottom: 10px solid transparent;
}

.search-results-nav-item {
  flex: 1;
  width: 50%;
  border: none;
  background: transparent;
  color: rgb(var(--color-text));
  padding: 10px 5px 11px;
  cursor: pointer;
  transition: background .2s var(--easing),
              color .2s var(--easing);
  text-align: center;
  position: relative;
  overflow: visible;
}

.search-results-nav-item.active {
  /* Gradient uses primary colors - промежуточные цвета вместо прозрачности */
  background: linear-gradient(135deg, rgb(var(--color-primary)) 0%, rgb(var(--color-primary-gr1)) 50%, rgb(var(--color-primary)) 100%);
  color: rgb(var(--color-canvas));
}

.search-results-nav-item:hover {
  /* Gradient uses primary-active colors - промежуточные цвета вместо прозрачности */
  background: linear-gradient(135deg, rgb(var(--color-primary-active)) 0%, rgb(var(--color-primary-active-gr1)) 50%, rgb(var(--color-primary-active)) 100%);
  color: rgb(var(--color-canvas));
}

.search-results-nav-content {
  position: relative;
  display: inline-block;
}

.search-results-nav-item .card-results-count {
  right: 0;
  top: 0;
  border-radius: 0;
  padding: 2px 6px;
}

.search-results-nav-item.active .card-results-count {
  color: rgb(var(--grey-500));
}

.search-results-nav-item .card-results-count.highlight {
  color: rgb(var(--color-primary-hover));
  font-weight: 600;
  transition: color var(--dur) var(--easing);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}

.filter {
  font-size: 1.6em;
  width: 134px;
  min-width: 50px;
}

.filter-date {
  width: 83px;
  text-align: center;
}

.filter-date::placeholder {
  color: rgb(var(--grey-400));
}

.filter-date:focus::placeholder {
  color: rgb(var(--color-error));
}

.filters-category-container {
  gap: 8px;
}

/* Filter Buttons */
.filters-btn:hover {
  color: rgb(var(--color-error))!important;
}

.filter-date-label {
  line-height: 1.2;
  text-align: right;
  font-family: var(--font-compact);
  color: rgb(var(--grey-500));
  font-weight: 300;
}

.fnd-filter-counter {
  left: 8px;
  z-index: 102;
}

.fnd-filter-counter.bg-warning,
.fnd-filter-counter.bg-secondary.bg-warning {
  background-color: rgb(var(--color-public-accent)) !important;
}

/* Desktop counter - hidden by default, shown by JS ONLY when filters are active AND collapsed */
.fnd-filter-counter-desktop {
  left: 0;
  top: 8px; /* Выше кнопки, чтобы не обрезался */
  z-index: 1100; /* Высокий z-index, чтобы быть поверх всех элементов */
  display: none; /* Скрыт по умолчанию, JS управляет через inline style */
  visibility: hidden; /* Дополнительное скрытие */
  pointer-events: none;
  background-color: rgb(var(--color-public-accent)) !important;
  clip-path: none !important; /* Убираем обрезку от clip-path родителя */
  transform: translateY(-50%); /* Центрируем по вертикали относительно top */
}

/* Override Bootstrap d-md-block class - badge should be hidden by default */
.fnd-filter-counter-desktop.d-md-block {
  display: none !important;
  visibility: hidden !important;
}

.fnd-filter-counter-desktop.bg-warning,
.fnd-filter-counter-desktop.bg-secondary.bg-warning {
  background-color: rgb(var(--color-public-accent)) !important;
}

/* Скрываем бейджик когда фильтры развернуты - JS управляет видимостью, но это правило как дополнительная защита */
.filters-bar:has(.collapse.show) .fnd-filter-counter-desktop {
  display: none !important;
}

.filter-button {
  position: relative;
  overflow: visible !important;
}

/* Filter icon - always white (canvas color) */
#filters-menu .bi-funnel-fill {
  color: rgb(var(--color-canvas)) !important;
}

.filters-clear {
  font-size: 1em;
  /* font-family: var(--font-compact); */
  border-radius: 0;
  border: 0 none;
  height: 42px;
  margin: 0;
  padding-bottom: 0;
  padding-top: 0;
  text-transform: uppercase;
  align-self: center;
}
.filters-clear:hover {
  transform: scale(1.02);
}

/* Date Range Picker - Unified Design */
.drp-menu {
  width: 590px;
  max-width: min(92vw, 590px);
  min-width: 590px;
  max-height: 70vh;
  overflow: auto;
  background: rgb(var(--color-canvas));
  border: 1px solid rgb(var(--grey-300));
  border-radius: 0;
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  box-sizing: border-box;
}

.drp-menu .drp-exact-columns { 
  flex-wrap: nowrap; 
  align-items: flex-start;
}

.drp-menu .drp-column:not(:last-child) {
  margin-right: 12px;
}

.drp-menu .drp-column {
  display: flex;
  flex-direction: column;
  flex: 0 0 280px;
  width: 280px;
  min-width: 280px;
  max-width: 280px;
}

.drp-menu .drp-panel {
  width: 100%;
  background: rgb(var(--grey-50));
  border-radius: 0;
  padding: 0.4em;
  border: 1px solid rgb(var(--grey-300));
}

  .drp-menu {
    background: rgb(var(--color-canvas));
    border-color: rgb(var(--grey-700));
  }
  .drp-inputs .input-group-text {
    background: rgb(var(--grey-800));
    border-color: rgb(var(--grey-700));
    color: rgb(var(--grey-300));
  }
  .drp-toolbar {
    background: rgb(var(--color-canvas));
    border-bottom-color: rgb(var(--grey-700));
  }
  .drp-toolbar-title {
    color: rgb(var(--grey-200));
  }
  .drp-toolbar .btn-outline-secondary {
    border-color: rgb(var(--grey-700));
    color: rgb(var(--grey-300));
  }
  .drp-grid .btn {
    background: rgb(var(--grey-800));
    border-color: rgb(var(--grey-700));
    color: rgb(var(--grey-200));
  }

.drp-column .drp-inputs .input-group {
  width: 100%;
}

.drp-menu .drp-day-item.active,
.drp-menu .drp-year-item.active,
.drp-menu .drp-month-item.active,
.drp-menu .drp-decade-item.active { 
  background: rgb(var(--color-primary)) !important; 
  color: rgb(var(--color-canvas)) !important; 
  border-color: rgb(var(--color-primary)) !important;
  box-shadow: none !important;
  transform: none !important;
  font-weight: 600 !important;
  border-width: 1px !important;
}

/* Dark mode активные элементы date range - цвета уже в оттенке темной морской волны */

.drp-menu .drp-back-decade,
.drp-menu .drp-back-year,
.drp-menu .drp-back-month { 
  cursor: pointer; 
  text-decoration: underline; 
  text-underline-offset: 2px;
  color: rgb(var(--color-primary));
  font-weight: 600;
  transition: color 0.2s ease;
}

.drp-menu .drp-back-decade:hover,
.drp-menu .drp-back-year:hover,
.drp-menu .drp-back-month:hover {
  color: rgb(var(--color-primary-hover));
}

.filter-date-range-dropdown {
	height: 42px;
	display: inline-flex;
	transition: transform .2s var(--easing);
}


.filter-date-range-dropdown:hover .drp-label-to {
  color: rgb(var(--color-canvas)) !important;
}
.filter-date-range-dropdown:hover #date-range-toggle {
	/* background-color: rgb(var(--color-primary-active)) !important; */
  background: linear-gradient(135deg, rgb(var(--color-primary-active)) 0%, rgb(var(--color-primary-active-gr1)) 50%, rgb(var(--color-primary-active)) 100%);
	border: 0 none;
	border-bottom: 0 none;
	color: rgb(var(--color-canvas)) !important;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

/* Date range toggle button */
#date-range-toggle {
  background: rgb(var(--color-canvas));
  border: 0 none;
  color: rgb(var(--grey-500));
  font-weight: 300;
  border-radius: 0;
  border-bottom: 0 none;
  /* font-size: 0.95em; */
  height: 42px;
  /* font-family: var(--font-compact); */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  align-self: center;
}

.drp-toolbar { 
  border-bottom: 1px solid rgb(var(--grey-300)); 
  padding-bottom: var(--space-1); 
  margin-bottom: var(--space-2); 
  background: rgb(var(--color-canvas));
}

.drp-toolbar-title {
  font-weight: 600;
  color: rgb(var(--color-text));
  font-size: var(--fs-body);
}

.drp-toolbar .btn-outline-secondary {
  border-radius: 0;
  border-color: rgb(var(--grey-300));
  color: rgb(var(--grey-600));
  background: transparent;
  font-weight: 500;
}

.drp-toolbar .btn-outline-secondary:hover {
  background: rgb(var(--grey-100));
  border-color: rgb(var(--grey-400));
  color: rgb(var(--grey-700));
}

.drp-inputs .input-group-text {
  border-radius: 0;
  border-color: rgb(var(--grey-300));
  background: rgb(var(--grey-50));
  color: rgb(var(--grey-600));
  font-weight: 500;
  font-size: 0.9em;
  padding: 0.375rem 0.75rem;
  white-space: nowrap;
}

.drp-inputs .form-control { 
  border-radius: 0; 
  border: 1px solid rgb(var(--input-border));
  background: rgb(var(--input-bg));
  color: rgb(var(--input-text));
  font-size: var(--fs-body);
}

.drp-inputs .form-control:active:not(:disabled),
.drp-inputs .form-control:focus {
  background: rgb(var(--input-bg-active, var(--input-bg)));
  color: rgb(var(--input-text));
  border-color: rgb(var(--input-focus-border));
  box-shadow: 0 0 0 1px rgb(var(--input-focus-border));
}

.drp-inputs .input-group:focus-within .input-group-text {
  border-color: rgb(var(--color-primary));
}

.drp-grid .btn {
  border-radius: 0;
  font-weight: 400;
  transition: all 0.2s ease;
  border: 1px solid rgb(var(--grey-300));
  background: rgb(var(--color-canvas));
  color: rgb(var(--color-text));
}

.drp-grid .btn.btn-sm {
  font-weight: 500;
}

.drp-decade-item {
  text-align: center;
}

.drp-decade-s {
  font-size: clamp(0.6em, 2.2vw, 0.9em);
}

@media (max-width: 575.98px) {
  .drp-menu { max-width: 96vw; width: 96vw; min-width: auto; padding: var(--space-1); max-height: 78vh; }
  .drp-menu .drp-exact-columns { flex-wrap: wrap; flex-direction: column; }
  .drp-menu .drp-column { width: 100%; min-width: 100%; max-width: 100%; flex: 1 1 100%; margin-right: 0 !important; margin-bottom: 12px; }
  .drp-menu .drp-column:last-child { margin-bottom: 0; }
  .drp-menu .drp-panel { width: 100%; }
  .drp-column .drp-inputs .input-group { width: 100%; }
  .drp-grid .btn.btn-sm { padding: 4px 8px; font-size: 0.92em; border-radius: 0; }
  .drp-decade-item { padding: 2px 0; }
  /* Keep manual inputs readable and keep the "to" separator visible */
  .drp-inputs > .d-flex { flex-wrap: wrap; row-gap: 8px; }
  .drp-inputs .input-group { max-width: 100% !important; }
  .drp-inputs span { display: inline-block; min-width: 16px; padding: 0 4px; }
  /* Reduce grid columns for decades/years/months (not days) */
  .drp-stage-decade .drp-grid,
  .drp-stage-year .drp-grid,
  .drp-stage-month .drp-grid { grid-template-columns: repeat(3, auto) !important; }
  /* Reduce padding for date range toggle on small screens */
  #date-range-toggle {
    padding: 0.375rem 0.5rem;
  }
}

.drp-grid .btn:hover { 
  background-color: rgb(var(--grey-200)); 
  border-color: rgb(var(--grey-400));
  color: rgb(var(--color-text));
  transform: none;
  box-shadow: none;
}

.drp-grid-header { 
  color: rgb(var(--color-text)); 
  font-weight: 600;
  margin-bottom: var(--space-1);
  background: rgb(var(--grey-100));
  padding: 6px 10px;
  border-radius: 0;
}

/* Dark mode заголовок декад/лет - темный фон и светлый текст */
/* Labels for date range toggle button */

.drp-button-text {
  /* font-family: var(--font-compact); */
  text-transform: uppercase;
  flex: 1;
  text-align: center;
  white-space: nowrap;
}

.drp-label-to {
  font-family: var(--font-compact);
  font-size: 0.8em;
  font-weight: 400;
  color: rgb(var(--color-text));
  opacity: 0.7;
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  margin-right: 6px;
  margin-top: 1px;
  width: 24px;
  line-height: 1.6;
  text-align: right;
  text-transform: uppercase;
}

/* Categories */
.fnd_categories {
  display: none;
}

.material-type-other {
  margin: 7px!important;
  display: block;
}

.categories {
  display: none!important;
  visibility: hidden;
}

.cat_summary, .category {
  display: none;
}

/* Treeselect */
.treeselect-input {
  background-color: rgb(var(--input-bg)) !important; /* Белый фон по умолчанию */
  border: 2px solid rgb(var(--grey-300)); /* Серая обводка, не сильно выделяющаяся */
  transition: background-color .2s ease, border-color .2s ease, box-shadow .3s ease, transform .2s ease;
}

.treeselect-input:hover {
  background-color: rgb(var(--input-bg-hover)) !important;
  border-top: 2px solid rgb(var(--color-primary)); /* Синеватая обводка */
  transform: scale(1.02);
}

/* Responsive Filters */

/* Mobile - компактные фильтры */
@media (max-width: 767.98px) {
  .fnd-filter-counter-desktop {
    display: none!important; /* Скрыт по умолчанию, JS управляет через inline style */
  }  
	/* Mobile: adjust max-height for mobile layout */
	#filters-div.filters-expanded {
		max-height: 150px; /* Enough for mobile filters */
	}
  .filter {
    font-size: 1em;
    width: calc(50% - 4px);
    min-width: 100px;
  }
  .filter:nth-of-type(1),.filter:nth-of-type(2){z-index:1100!important}
  .filter-date {
    width: 100px;
  }

  #date-range-toggle {
    font-size: 1em;
    height: 38px;
    width: 100px;
    padding: 0.175rem 0.2rem;
  }

  .filters-label {
    font-size: 0.85rem;
    margin-bottom: 8px;
  }
}

@media (min-width: 992px) {
  .filters {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}