/* News Snippet Component Styles */

.news-snippet {
   border: none;
   box-shadow: none;
   border-radius: 0;
   margin-bottom: 2rem;
   overflow: hidden;
}

.news-snippet .card-header {
   background: transparent;
   color: var(--bs-body-color);
   padding: 0.7rem 0;
   border-bottom: 1px solid var(--bs-border-color);
}

.news-snippet .card-header h5 {
   font-size: 0.92rem;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.news-snippet .card-header .btn-outline-primary {
   background: transparent;
   color: var(--bs-secondary);
   border-color: var(--bs-border-color);
   font-size: 0.72rem;
   padding: 0.2rem 0.5rem;
}

.news-snippet .card-header .btn-outline-primary:hover {
   background: transparent;
   color: var(--bs-primary);
}

.news-snippet-item {
   padding: 0.75rem 0;
   transition: none;
   border-left: 0;
   border-bottom: 1px solid var(--bs-border-color-translucent);
}

.news-snippet-item:hover {
   background-color: transparent;
   border-left-color: transparent;
   transform: none;
}

.news-snippet-date {
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
}

.news-snippet-date .badge {
   font-size: 0.62rem;
   font-weight: 500;
   padding: 0.14rem 0.4rem;
}

.news-snippet-title {
   font-size: 0.8rem;
   font-weight: 600;
   line-height: 1.3;
}

.news-snippet-title a {
   color: var(--bs-body-color);
   transition: color 0.2s ease;
}

.news-snippet-title a:hover {
   color: var(--bs-primary);
}

.news-snippet-summary {
   font-size: 0.72rem;
   line-height: 1.4;
   margin-top: 0.35rem;
}

.news-snippet .card-footer {
   background: transparent;
   padding: 0.6rem 0 0;
   border-top: 1px solid var(--bs-border-color);
}

.news-snippet .card-footer a {
   color: var(--bs-secondary);
   font-size: 0.76rem;
   font-weight: 500;
}

.news-snippet .card-footer a:hover {
   color: var(--bs-primary);
}

/* Enhanced Checkbox and Filter Styles */

.checkbox-group {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.checkbox-group .form-check {
   padding-left: 1.75rem;
}

.checkbox-group .form-check-input {
   width: 1.1rem;
   height: 1.1rem;
   margin-top: 0.15rem;
   cursor: pointer;
}

.checkbox-group .form-check-label {
   cursor: pointer;
   font-size: 0.9rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   color: var(--bs-body-color);
   transition: color 0.2s ease;
}

.checkbox-group .form-check-label:hover {
   color: var(--bs-primary);
}

.checkbox-group .form-check-label i {
   opacity: 0.7;
}

/* Date Range Filter */

.date-range-filter {
   padding: 0.5rem 0;
}

.range-display {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
}

.range-display .badge {
   font-size: 0.85rem;
   padding: 0.4rem 0.7rem;
   min-width: 50px;
   text-align: center;
}

.date-range-filter .form-range {
   margin: 0.75rem 0;
}

.date-range-filter .form-range:first-of-type {
   margin-top: 1rem;
}

/* Category Filters */

.category-filters {
   display: flex;
   gap: 0.5rem;
   font-size: 0.75rem;
}

.category-filters .btn-link {
   padding: 0;
   text-decoration: none;
   font-size: 0.75rem;
   opacity: 0.7;
}

.category-filters .btn-link:hover {
   opacity: 1;
   text-decoration: underline;
}

.category-list {
   max-height: 250px;
   overflow-y: auto;
   padding-right: 0.5rem;
}

.category-list::-webkit-scrollbar {
   width: 5px;
}

.category-list::-webkit-scrollbar-track {
   background: var(--bs-secondary-bg);
   border-radius: 3px;
}

.category-list::-webkit-scrollbar-thumb {
   background: var(--bs-border-color);
   border-radius: 3px;
}

.category-list::-webkit-scrollbar-thumb:hover {
   background: var(--bs-secondary);
}

/* Checkbox styling - more compact */
.checkbox-group .form-check {
   margin-bottom: 0.4rem;
   padding-left: 0;
}

.checkbox-group .form-check-input {
   margin-top: 0.15rem;
   margin-right: 0.5rem;
}

.checkbox-group .form-check-label {
   font-size: 0.875rem;
   cursor: pointer;
   display: flex;
   align-items: center;
}

.checkbox-group .form-check-label i {
   font-size: 0.85rem;
   margin-right: 0.4rem;
   opacity: 0.7;
}

/* Collapsible Sections */

.sidebar-title {
   font-size: 0.9rem;
   font-weight: 600;
   margin-bottom: 0.75rem;
}

.sidebar-title button {
   color: inherit;
   opacity: 0.6;
   transition: all 0.2s ease;
}

.sidebar-title button:hover {
   opacity: 1;
}

.sidebar-title button i {
   transition: transform 0.3s ease;
}

.sidebar-title button[aria-expanded="false"] i {
   transform: rotate(-90deg);
}

/* Range display badges */
.range-display .badge {
   font-size: 0.75rem;
   padding: 0.3rem 0.5rem;
   font-weight: 500;
}

/* Reset Button */

#reset-all-filters,
#reset-all-pub-filters {
   font-weight: 500;
   font-size: 0.85rem;
}

/* Dark Mode Overrides */

[data-bs-theme="dark"] .news-snippet {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .news-snippet .card-header {
   background: linear-gradient(135deg, #2980b9 0%, #1a5f7a 100%);
}

[data-bs-theme="dark"] .news-snippet-item:hover {
   background-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .news-snippet .card-footer {
   background: rgba(255, 255, 255, 0.05);
}

/* ============================================================================
   noUiSlider Custom Styling (Dual-handle date range) - Compact version
   ============================================================================ */

.dual-range-slider {
   margin: 0.65rem 0 0.5rem 0;
   height: 2px;
}

.dual-range-slider .noUi-connect {
   background: var(--bs-secondary, #6c757d);
}

.dual-range-slider .noUi-handle {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   border: 1px solid var(--bs-secondary, #6c757d);
   background: white;
   box-shadow: none;
   cursor: grab;
   top: -4px;
   transition: none;
}

.dual-range-slider .noUi-handle:hover {
   transform: none;
   box-shadow: none;
}

.dual-range-slider .noUi-handle:active {
   cursor: grabbing;
   transform: none;
}

.dual-range-slider .noUi-handle::before,
.dual-range-slider .noUi-handle::after {
   display: none;
}

[data-bs-theme="dark"] .dual-range-slider .noUi-connect {
   background: var(--bs-secondary-color, #adb5bd);
}

[data-bs-theme="dark"] .dual-range-slider .noUi-handle {
   border-color: var(--bs-secondary-color, #adb5bd);
   background: #2c3e50;
}

[data-bs-theme="dark"] .dual-range-slider .noUi-target {
   background: #34495e;
   border-color: #34495e;
}

/* ============================================================================
   Enhanced Filter UI & Animations
   ============================================================================ */

/* Smooth sidebar section transitions */
.sidebar-section {
   transition: none;
}

/* Button hover enhancements */
.category-filters .btn {
   transition: none;
   position: static;
   overflow: visible;
}

.category-filters .btn:active {
   transform: none;
}

/* Checkbox animation */
.checkbox-group .form-check-input {
   transition: none;
}

.checkbox-group .form-check-input:checked {
   animation: none;
}

/* Label hover effect */
.checkbox-group .form-check-label {
   transition: color 0.2s ease;
   padding: 0.25rem 0;
   margin-left: 0;
   padding-left: 0;
   border-radius: 0;
}

.checkbox-group .form-check-label:hover {
   background: transparent;
   padding-left: 0;
}

/* Badge animations */
.range-display .badge {
   transition: none;
}

.range-display .badge:hover {
   transform: none;
}

/* Collapse animation improvements */
.collapse {
   transition: height 0.35s ease, opacity 0.25s ease;
}

.collapse:not(.show) {
   opacity: 0;
}

.collapse.show {
   opacity: 1;
}

/* Chevron rotation */
.sidebar-title button i {
   transition: transform 0.3s ease;
}

.sidebar-title button[aria-expanded="false"] i {
   transform: rotate(-90deg);
}

/* Reset button pulse effect */
#reset-all-filters,
#reset-all-pub-filters {
   transition: none;
   position: static;
   overflow: visible;
}

#reset-all-filters:hover,
#reset-all-pub-filters:hover {
   transform: none;
   box-shadow: none;
}

#reset-all-filters:active,
#reset-all-pub-filters:active {
   transform: none;
   box-shadow: none;
}

/* Loading state for filter changes */
@keyframes filterPulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.6; }
}

.filtering {
   animation: filterPulse 0.5s ease;
}

/* Smooth scroll for filtered results */
html {
   scroll-behavior: smooth;
}

/* Responsive */

@media (max-width: 992px) {
   .news-snippet {
      margin-bottom: 1.5rem;
   }
   
   .news-snippet-item {
      padding: 0.75rem 1rem;
   }
   
   .category-list {
      max-height: 200px;
   }
   
   .checkbox-group .form-check-label:hover {
      padding-left: 0.25rem; /* Less padding on mobile */
   }
}