/* Scoped styles for the Filter Modal (#filterModal)
   Loaded after other styles to avoid conflicts. */

#filterModal .modal-content {
  background: #ffffff !important;
  color: #222222 !important;
  border-radius: 6px;
}

#filterModal .modal-header .modal-title { font-weight:600; }

#filterModal .category-dropdown {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 4px;
}

#filterModal .category-item {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 4px;
  margin-bottom: 8px;
  background: transparent;
}

#filterModal .category-summary {
  cursor: pointer;
  padding: 8px 10px;
  display: block;
  font-weight: 600;
}

#filterModal .category-content { padding: 6px 12px 12px 12px; }

#filterModal .radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  cursor: pointer;
}

#filterModal .radio-option input[type="radio"] {
  width: 16px;
  height: 16px;
}

#filterModal .subcategory-option { padding-left: 20px; color: #444; }

/* Make sure inputs and labels inside modal are readable in dark theme */
body.dark #filterModal .modal-content {
  background: #1f1f1f !important;
  color: #e6e6e6 !important;
}

body.dark #filterModal input[type="date"],
body.dark #filterModal input[type="text"],
body.dark #filterModal input[type="radio"] {
  background: #2a2a2a;
  color: #e6e6e6;
  border-color: #3a3a3a;
}

/* Ensure highest specificity for critical layout rules to avoid being overridden */
#filterModal .category-dropdown, #filterModal .category-item, #filterModal .radio-option {
  box-sizing: border-box;
}