/* filters.css - Redesigned */

/* Active Filters Summary (Add to main.css or keep here) */
.active-filters-container {
  padding: 1rem;
  margin-bottom: 1.5rem;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  max-width: 50rem; /* Match filters container */
  margin-left: auto;
  margin-right: auto;
}

.active-filters-container h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  color: #495057;
}

.active-filters-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem; /* Space before clear button */
}

.active-filter-tag {
  display: inline-flex;
  align-items: center;
  background-color: var(--steel-blue); /* Use your theme color */
  color: var(--background-color);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem; /* Pill shape */
  font-size: 0.875rem;
  var(--background-color)-space: nowrap;
}

.active-filter-tag .tag-category {
  opacity: 0.8;
  margin-right: 0.3rem;
  font-size: 0.8rem;
}

.active-filter-tag .tag-remove-btn {
  margin-left: 0.5rem;
  background: none;
  border: none;
  color: var(--background-color);
  opacity: 0.7;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
}

.active-filter-tag .tag-remove-btn:hover {
  opacity: 1;
}

.no-active-filters {
  color: var(--dark-gray);
  font-style: italic;
}

.clear-all-btn {
  background-color: var(--tomato);
  color: var(--background-color);
  border: none;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.clear-all-btn:hover {
  background-color: var(--tomato-dark);
}


/* Filters Container (Adjust as needed) */
.filters-container {
  display: flex;
  flex-direction: column; /* Stack filter blocks vertically */
  gap: 1rem;             /* Space between filter blocks */
  width: 100%;
  max-width: 50rem;      /* Or your preferred max-width */
  margin: 0 auto;
  box-sizing: border-box;
}

/* Individual Filter Block */
.filter-item {
  /* Remove flex sizing if stacking vertically */
  width: 100%;
  box-sizing: border-box;
}

.filter-block {
  border: 1px solid var(--border-color);
  border-radius: 0.375rem; /* 6px */
  overflow: hidden; /* Contain borders */
  background-color: var(--background-color);
}

/* Filter Toggle Button (Header) */
.filter-toggle-btn {
  background-color: var(--filter-toggle-bg);
  color: var(--dark-green);
  cursor: pointer;
  padding: 0.75rem 1rem; /* 12px 16px */
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border-color); /* Separator when closed */
  text-align: left;
  outline: none;
  font-size: 1rem; /* 16px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s;
}

.filter-toggle-btn:hover {
  background-color: #e0e0e0;
}

.filter-toggle-btn .filter-title {
  font-weight: bold;
}

.filter-toggle-btn .filter-selected-count {
  font-size: 0.9rem;
  color: var(--dark-gray);
  margin-left: 0.5rem;
}

.filter-toggle-btn .filter-toggle-icon {
  font-size: 0.8rem; /* Adjust icon size */
  transition: transform 0.3s ease;
}

/* Expanded state */
.filter-block.is-expanded .filter-toggle-btn {
  border-bottom-color: var(--border-color); /* Keep border when expanded */
}
.filter-block.is-expanded .filter-toggle-icon {
  transform: rotate(90deg);
}

/* Filter Content (Hidden by Default) */
.filter-content {
  display: none; /* Hidden by default, shown by JS */
  padding: 1rem; /* 16px */
  border-top: 1px solid var(--border-color); /* Separator line */
  box-sizing: border-box;
}
.filter-block.is-expanded .filter-content {
  display: block;
}


/* Filter Controls (Search, Select All) */
.filter-controls {
  display: flex;
  gap: 0.75rem; /* 12px */
  margin-bottom: 1rem; /* 16px */
  align-items: center;
}

.filter-search-input {
  flex-grow: 1;
  padding: 0.5rem 0.75rem; /* 8px 12px */
  border: 1px solid var(--border-color);
  border-radius: 0.25rem; /* 4px */
  font-size: 0.9rem;
}

.filter-select-all-btn {
  padding: 0.5rem 0.75rem; /* 8px 12px */
  background-color: var(--steel-blue);
  color: var(--background-color);
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.875rem; /* 14px */
  var(--background-color)-space: nowrap;
  transition: background-color 0.2s ease;
}
.filter-select-all-btn:hover {
  background-color: #0056b3;
}

/* Options List */
.filter-options-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 550px; /* Or desired height */
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
}

.filter-option-item {
  padding: 0; /* Padding handled by inner elements */
  border-bottom: 1px solid var(--filter-option-border);
}
.filter-option-item:last-child {
  border-bottom: none;
}

.filter-option-item .option-line {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem; /* 8px 12px */
}

.filter-option-item label {
  display: flex; /* Align checkbox and text */
  align-items: center;
  cursor: pointer;
  flex-grow: 1; /* Take remaining space */
  margin-left: 0.25rem; /* Space after icon/spacer */
}

.filter-option-item input[type="checkbox"] {
  margin-right: 0.625rem; /* 10px */
  cursor: pointer;
  /* Optional: Larger checkboxes */
  /* width: 1.1em;
  height: 1.1em; */
}

.filter-option-item .option-name {
  font-size: 0.95rem; /* 15px */
}

/* Indentation for Levels */
.filter-option-item[data-level="1"] .option-line { padding-left: 2rem; }
.filter-option-item[data-level="2"] .option-line { padding-left: 3.25rem; }
.filter-option-item[data-level="3"] .option-line { padding-left: 4.5rem; }
/* Add more levels if needed */

/* Children Toggle Button */
.toggle-children-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.5rem 0 0; /* Space around icon */
  color: var(--steel-blue);
  display: inline-flex; /* Align icon properly */
  align-items: center;
  font-size: 0.8rem; /* Icon size */
}
.toggle-children-btn .toggle-children-icon {
  transition: transform 0.3s ease;
}
.toggle-children-btn[aria-expanded="true"] .toggle-children-icon {
  transform: rotate(90deg);
}

.no-children-spacer {
  display: inline-block;
  width: 1.3em; /* Match approx width of button */
  height: 1em;
}

/* Children Container */
.children-container {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none; /* Hidden by default */
  /* Optional: subtle background for nesting */
  /* background-color: #fafafa; */
}
.filter-option-item.is-open > .children-container {
  display: block; /* Shown when parent is open */
}

.filter-no-options {
  padding: 1rem;
  color: var(--dark-gray);
  font-style: italic;
  text-align: center;
}

/* Highlight matches during search */
.filter-option-item.match {
  /* Style matching items */
  /* background-color: var(--warning-bg); */ /* Optional highlight */
}
.filter-option-item.no-match {
  display: none; /* Hide non-matching items */
}

/* Main Submit Button (adjust if needed) */
.main-filter-submit-btn {
  margin-top: 1.5rem; /* Space above submit */
  /* Add any specific styles */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Styles for Active Filter Grouping */
.filter-tag-group {
  margin-bottom: 0.75rem; /* Space between groups */
  padding-bottom: 0.75rem; /* Space before border */
  border-bottom: 1px dashed #d0d0d0; /* Dashed line separator */
}

/* Remove margin and border from the very last group */
.filter-tag-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.filter-tag-group-title {
  font-size: 0.95rem; /* Slightly smaller title */
  font-weight: 600; /* Bold */
  color: var(--filter-label-text); /* Darker grey */
  margin-top: 0;
  margin-bottom: 0.5rem; /* Space between title and tags */
  text-transform: uppercase; /* Optional: Uppercase titles */
  letter-spacing: 0.5px; /* Optional: Slight spacing */
}

.filter-tags-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem; /* Keep the gap between tags */
   /* No extra margin needed here as group has margin-bottom */
}

/* Active Filters Summary Styles */
.active-filters-container {
  padding: 0; /* Padding will be on header/content */
  margin-bottom: 1.5rem;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden; /* Contain borders/padding */
}

.active-filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem; /* Padding for the header */
  cursor: pointer; /* Make header clickable */
  border-bottom: 1px solid transparent; /* Placeholder for border */
  transition: border-color 0.3s ease;
}
.active-filters-container.is-expanded .active-filters-header {
   border-bottom-color: #dee2e6; /* Show border only when expanded */
}


.active-filters-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #495057;
}

.active-filters-toggle-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 1rem; /* Adjust size as needed */
  color: var(--dark-gray);
}
.active-filters-toggle-btn .toggle-icon {
    display: inline-block;
    transition: transform 0.3s ease;
}
/* Rotate icon when expanded */
.active-filters-container.is-expanded .active-filters-toggle-btn .toggle-icon {
    transform: rotate(90deg);
}


.active-filters-content {
  display: none; /* Hidden by default */
  padding: 1rem; /* Padding for the content area */
}
/* Show content when expanded */
.active-filters-container.is-expanded .active-filters-content {
  display: block;
}


/* Styles for grouping (from previous step - ensure they are present) */
.filter-tag-group {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed #d0d0d0;
}
.filter-tag-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.filter-tag-group-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #495057;
  margin-top: 0;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.filter-tags-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
}
.active-filter-tag {
  /* Ensure previous styles are present */
  display: inline-flex;
  align-items: center;
  background-color: var(--steel-blue);
  color: var(--background-color);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  var(--background-color)-space: nowrap;
}
.active-filter-tag .tag-remove-btn {
  margin-left: 0.5rem;
  background: none;
  border: none;
  color: var(--background-color);
  opacity: 0.7;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
}
.active-filter-tag .tag-remove-btn:hover {
  opacity: 1;
}
.no-active-filters {
  color: var(--dark-gray);
  font-style: italic;
  display: block; /* Ensure it takes space */
  padding: 0.5rem 0;
}
.clear-all-btn {
  /* Ensure previous styles are present */
  background-color: var(--tomato);
  color: var(--background-color);
  border: none;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-top: 0.75rem; /* Add space above clear button */
}
.clear-all-btn:hover {
  background-color: var(--tomato-dark);
}

/* filters.css - Additions for Submit Buttons */

/* Base style for filter-related submit buttons */
/* Consolidate common styles here */
.main-filter-submit-btn {
  color: var(--background-color);
  padding: 0.75rem 1.5rem; /* Increased padding for better click area */
  border: none;
  border-radius: 0.375rem; /* 6px */
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold; /* Make text stand out */
  text-align: center;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: block; /* Ensure it takes block space */
  width: auto; /* Allow natural width based on padding */
  min-width: 180px; /* Ensure minimum width */
  margin: 1.5rem auto 1rem auto; /* Centered below filters */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Add subtle shadow */
  text-transform: uppercase; /* Optional: Uppercase text */
  letter-spacing: 0.5px; /* Optional: Slight spacing */
}

.main-filter-submit-btn:hover {
  transform: translateY(-2px); /* Slight lift effect */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
}

.main-filter-submit-btn:active {
    transform: translateY(0); /* Press down effect */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.main-filter-submit-btn:focus-visible { /* Modern focus indicator */
    outline: 3px solid var(--pale-turquoise);
    outline-offset: 2px;
}


/* Specific style for the main "Filter" button */
/* Target BOTH possible form IDs */
#filter-form .main-filter-submit-btn,
#topic-form .main-filter-submit-btn { /* <<< ADDED #topic-form */
  background-color: var(--steel-blue);
  color: var(--background-color);
}

#filter-form .main-filter-submit-btn:hover,
#topic-form .main-filter-submit-btn:hover { /* <<< ADDED #topic-form */
  background-color: var(--cadet-blue);
  color: var(--background-color);
}

/* Specific style for the "Switch Packet" button (inside #packet-form) */
#packet-form .main-filter-submit-btn {
  background-color: var(--light-green); /* Use a distinct color (e.g., green) */
}

#packet-form .main-filter-submit-btn:hover {
  background-color: var(--light-green-dark); /* Darker green hover */
}

/* Style for ancestor items that have a nested selection */
.filter-option-item.has-nested-selection > .option-line {
  background-color: #fffdd0; /* Cream / Light Yellow - subtle highlight */
}

/* Ensure highlight doesn't override hover effects drastically (optional) */
.filter-option-item.has-nested-selection > .option-line:hover {
}

/* --- End of Additions --- */

/* --- Beginning of radio selector for types of pages, used in flashcards and questions pages --- */

/* New styles for study-type-selector for alignment */
.study-type-selector {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--secondary-bg-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* === NEW/MODIFIED STYLES FOR ALIGNMENT === */
  width: 100%; /* Ensure it takes full width of its container */
  max-width: 50rem; /* Match the max-width of your .filters-container and forms */
  margin-left: auto; /* Center it */
  margin-right: auto; /* Center it */
  box-sizing: border-box; /* Include padding and border in the width */
  /* ========================================= */
}

.study-type-selector h3 {
  margin-top: 0;
  color: var(--text-color-dark);
}

.study-type-selector .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: space-evenly;
}

.study-type-selector label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text-color);
}

.study-type-selector input[type="radio"] {
  /* Basic styling for radio button */
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Tooltip styles */
.tooltip-icon {
  margin-left: 5px;
  font-size: 0.9em;
  cursor: help;
  position: relative;
  color: var(--text-color-light);
  /* Ensure a base z-index for the icon itself if needed */
  z-index: 1; /* Make sure the icon is clickable */
}

.tooltip-icon::before {
  content: attr(title);
  position: absolute;
  top: 120%; /* Position above the icon */
  /* === NEW/MODIFIED STYLES FOR TOOLTIP POSITIONING === */
  left: 50%; /* Start by centering it */
  transform: translateX(-50%); /* Center based on its own width */
  min-width: 150px; /* Give it a minimum width if content is short */
  max-width: 300px; /* Prevent it from getting too wide */
  var(--background-color)-space: normal; /* Allow text to wrap within max-width */
  text-align: center; /* Center text within the tooltip box */

  background-color: var(--tooltip-bg-color, var(--text-color));
  color: var(--tooltip-text-color, var(--background-color));
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 100; /* Higher z-index to appear above everything else */
  left: 0; /* Align to the left edge of the parent icon */
  transform: translateX(0); /* Remove the centering transform */
  margin-left: 20px; /* Push it a bit away from the icon itself */
}

.tooltip-icon:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Optional: Add a small triangle "pointer" to the tooltip */
.tooltip-icon::after {
  content: '';
  position: absolute;
  bottom: 110%;
  /* === NEW/MODIFIED STYLES FOR TOOLTIP ARROW === */
  left: 25px; /* Align arrow to the "left" side relative to the tooltip box */
  /* This value needs to be tuned with the new 'left' on ::before */
  transform: translateX(-50%) rotate(45deg); /* Still rotate */
  /* ============================================== */

  width: 8px;
  height: 8px;
  background-color: var(--tooltip-bg-color, var(--text-color));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 99; /* Below the main tooltip box */
}

.tooltip-icon:hover::after {
  opacity: 1;
  visibility: visible;
}

/* End of radio selectors css */
/* filters.css */

/* --- FINAL FIX: Use Child Combinator to Prevent Descendant Matching --- */

/* STEP 1: Set a default color */
.filter-block[data-filter-key="explorerEditalTopicsGeneral"] .option-line > label > .option-name {
  color: var(--text-color) !important;
}

/* STEP 2: Apply performance colors using > to target only direct children */

/* Style for topics with no interaction data */
.filter-block[data-filter-key="explorerEditalTopicsGeneral"] .filter-option-item.perf-no-data > .option-line > label > .option-name {
  color: #7f8c8d !important; /* Grey */
  font-weight: normal !important;
}

/* Style for topics with low performance */
.filter-block[data-filter-key="explorerEditalTopicsGeneral"] .filter-option-item.perf-low > .option-line > label > .option-name {
  color: #c0392b !important; /* Red */
  font-weight: 500 !important;
}

/* Style for topics with medium performance */
.filter-block[data-filter-key="explorerEditalTopicsGeneral"] .filter-option-item.perf-medium > .option-line > label > .option-name {
  color: #d35400 !important; /* Orange */
  font-weight: 500 !important;
}

/* Style for topics with high performance */
.filter-block[data-filter-key="explorerEditalTopicsGeneral"] .filter-option-item.perf-high > .option-line > label > .option-name {
  color: #1e8449 !important; /* Green */
  font-weight: 500 !important;
}

/* Optional background for low performance items */
.filter-block[data-filter-key="explorerEditalTopicsGeneral"] .filter-option-item.perf-low {
  background-color: rgba(192, 57, 43, 0.05) !important;
}