/* Theme tokens (everything keys off #55823b) */
:root {
  --tf-primary: #55823b;
  --tf-primary-600: #43682f;
  --tf-primary-300: #b7d39e;
  --tf-primary-200: #cfe3bf;
  --tf-primary-100: #eaf4e4;
  --tf-ring: rgba(85,130,59,0.18);

  --tf-bg: #ffffff;
  --tf-text: #374151;
  --tf-muted: #6b7280;
  --tf-border: #e5e7eb;
  --tf-border-strong: #f3f4f6;
  --tf-btn-bg: #f9fafb;
  --tf-btn-bg-hover: #f3f4f6;
}

/* ---------- Filter/Sort menu ---------- */
@keyframes tf-slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tf-menu {
  position: absolute;
  z-index: 9999;
  background: var(--tf-bg);
  border: 1px solid var(--tf-border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
  min-width: 240px;
  margin-top: 8px;
  animation: tf-slideDown 0.2s ease;
  left: 0;
}

.tf-section { margin-bottom: 12px; }
.tf-section + .tf-section {
  border-top: 1px solid var(--tf-border-strong);
  padding-top: 12px;
}
.tf-section__title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--tf-muted);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

/* Controls */
.tf-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--tf-border);
  background: var(--tf-bg);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--tf-text);
  line-height: 1;
}
.tf-btn:hover {
  background: var(--tf-btn-bg);
  border-color: #d1d5db;
}
.tf-btn--primary {
  background: var(--tf-primary);
  color: #fff;
  border-color: var(--tf-primary);
}
.tf-btn--primary:hover {
  background: var(--tf-primary-600);
  border-color: var(--tf-primary-600);
}
.tf-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  border-top: 1px solid var(--tf-border-strong);
  padding-top: 12px;
}
.tf-row { display: flex; gap: 6px; }

/* Input */
.tf-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--tf-border);
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.15s ease;
  outline: none;
}
.tf-input:focus {
  border-color: var(--tf-primary);
  box-shadow: 0 0 0 3px var(--tf-ring);
}

/* ---------- Header filter button ---------- */
table thead th[data-field] {
  position: relative;
  padding-right: 36px;
}

.tf-filter-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--tf-btn-bg);
  border: 1px solid var(--tf-border);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s ease;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  color: var(--tf-muted);
}
thead th[data-field]:hover .tf-filter-btn { opacity: 0.7; }

.tf-filter-btn.is-active {
  opacity: 1;
  background: var(--tf-primary-100);
  border-color: var(--tf-primary-300);
  color: var(--tf-primary);
}
.tf-filter-btn:hover {
  opacity: 1;
  background: var(--tf-btn-bg-hover);
}

/* ---------- Chips ---------- */
.chip,
.tf-chip--exclude {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

/* --- Include Chips (blue) --- */
.chip {
  background: #eef2ff;
  color: #1e3a8a;
  border-color: #c7d2fe;
}
.chip.active {
  background: #c7d2fe;
  color: #1e3a8a;
  border-color: #818cf8;
}

/* --- Exclude Chips (red) --- */
.tf-chip--exclude {
  background: #fde8e8;
  color: #b91c1c;
  border-color: #fca5a5;
}
.tf-chip--exclude.active {
  background: #fecaca;
  color: #7f1d1d;
  border-color: #f87171;
}
.tf-chip--exclude:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

/* ---------- Chip Layout / Search / Scroll ---------- */
.chip-search {
  width: 100%;
  padding: 6px 8px;
  margin-bottom: .4rem;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  font-size: 13px;
}

.chip-scroll-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  overflow-y: auto;
  max-height: 500px;   /* limits visible area */
  padding: 6px 4px;
}

/* ---------- Card Layout ---------- */
#includeCard,
#excludeCard {
  min-height: 400px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--tf-bg);
  border: 1px solid var(--tf-border);
  border-radius: 10px;
}

/* ---------- Selected Chips Field ---------- */
.selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.chip-preview {
  background: #e0e7ff;
  color: #1e3a8a;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.remove-chip {
  background: transparent;
  border: none;
  color: #1e3a8a;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}

/* --- Exclude Chips (red variant, override blue .chip.active) --- */
.tf-chip--exclude {
  background: #fde8e8;
  color: #b91c1c;
  border-color: #fca5a5;
}

.tf-chip--exclude.active {
  background: #fecaca !important;   /* soft red active background */
  color: #7f1d1d !important;        /* deeper red text */
  border-color: #f87171 !important; /* strong red border */
  box-shadow: 0 0 0 3px rgba(248,113,113,0.25); /* subtle red glow */
}

.tf-chip--exclude:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

/* ---------- Refined look: Exclude preview chips (subtle, distinct) ---------- */
#excludeCard .chip-preview {
  background: #fff5f5 !important;     /* much lighter red background */
  color: #8b1a1a !important;          /* slightly darker text */
  border-color: #f5b5b5 !important;   /* pale border for softer contrast */
  box-shadow: inset 0 0 0 1px #fcdada; /* subtle inner edge */
}

#excludeCard .remove-chip {
  color: #8b1a1a !important;
  opacity: 0.8;
  transition: color 0.15s ease, opacity 0.15s ease;
}

#excludeCard .remove-chip:hover {
  color: #661414 !important;
  opacity: 1;
}

.column-selector-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center; z-index: 2000;
}
.csm-dialog {
  background: #fff; padding: 16px 20px; border-radius: 6px; width: 300px;
  display: flex; flex-direction: column; gap: 12px;
}
.csm-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.csm-actions { display: flex; justify-content: flex-end; gap: 8px; }