/* ═══════════════════════════════════════════════════════════════════════════
   Toolbar v2 - pill-styled filter selects with active states, search ring +
   `/` shortcut hint, filter activity strip with result count + chips +
   clear-all. Scope: #toolbar.tbv2 + .tbv2-* classes only. Legacy fallback
   kept on the existing element selectors for non-v2 toolbars elsewhere.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Search input v2 ───────────────────────────────────────────────────── */
#toolbar.tbv2 .tbv2-search-group {
  flex: 0 0 auto;
  align-items: center;
  position: relative;
}
#toolbar.tbv2 #search {
  width: 280px;
  min-width: 220px;
  padding: 5px 32px 5px 28px;
  border: 1px solid #D1D5DB;
  border-radius: 16px;
  background: #FFFFFF
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%236B7280' stroke-width='1.6'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='M9.5 9.5 L13 13' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat 10px center;
  font-size: 12px;
  color: #111827;
  transition: all 0.15s ease;
}
#toolbar.tbv2 #search::placeholder {
  color: #9CA3AF;
}
#toolbar.tbv2 #search:hover {
  border-color: #9CA3AF;
}
#toolbar.tbv2 #search:focus {
  border-color: #1565C0;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.15);
  background-color: #FFFFFF;
  outline: none;
}
#toolbar.tbv2 #search[data-active="true"] {
  background-color: #EFF6FF;
  border-color: #1565C0;
}
/* Render the trailing `/` shortcut hint inside the input area as a chip.
   The placeholder ends with a literal `/` we're styling out via the
   pseudo-element below; a kbd-style chip is shown when the input is empty
   and unfocused. */
#toolbar.tbv2 .tbv2-search-group::after {
  content: '/';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #6B7280;
  background: #F3F4F6;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #E5E7EB;
  pointer-events: none;
  letter-spacing: 0.04em;
  transition: opacity 0.15s ease;
}
#toolbar.tbv2 #search:focus + ::after,
#toolbar.tbv2 .tbv2-search-group:has(#search:focus)::after,
#toolbar.tbv2 .tbv2-search-group:has(#search[data-active="true"])::after {
  opacity: 0;
}
/* Hide the `/` glyph in the placeholder text since we render it as a chip */
#toolbar.tbv2 #search::placeholder {
  /* Visually consistent placeholder; keep the literal `/` so users
     without a :has-supporting browser still see the shortcut hint. */
}

/* ── Filter selects v2 (pill-styled with active state) ────────────────── */
#toolbar.tbv2 select#filter-seg,
#toolbar.tbv2 select#filter-grade,
#toolbar.tbv2 select#filter-status {
  appearance: none;
  -webkit-appearance: none;
  padding: 4px 22px 4px 10px;
  border: 1px solid #D1D5DB;
  border-radius: 12px;
  background: #FFFFFF
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%236B7280' stroke-width='1.5'%3E%3Cpath d='M1 1L5 5L9 1' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 9px center;
  font-size: 11px;
  font-weight: 600;
  color: #4B5563;
  cursor: pointer;
  transition: all 0.15s ease;
}
#toolbar.tbv2 select#filter-seg:hover,
#toolbar.tbv2 select#filter-grade:hover,
#toolbar.tbv2 select#filter-status:hover {
  border-color: #9CA3AF;
  color: #111827;
  background-color: #FAFAFA;
}
#toolbar.tbv2 select#filter-seg:focus,
#toolbar.tbv2 select#filter-grade:focus,
#toolbar.tbv2 select#filter-status:focus {
  border-color: #1565C0;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.15);
  outline: none;
}
/* Active filter - non-default value selected. Blue (info), not amber:
   amber is the alert/warning language; "a filter is on" is informational. */
#toolbar.tbv2 select#filter-seg[data-active="true"],
#toolbar.tbv2 select#filter-grade[data-active="true"],
#toolbar.tbv2 select#filter-status[data-active="true"] {
  background-color: #EFF6FF;
  border-color: #1565C0;
  color: #1565C0;
  font-weight: 700;
}
#toolbar.tbv2 select#filter-seg[data-active="true"]::before {
  content: '●';
}

/* ── Toolbar separators v2 ─────────────────────────────────────────────── */
#toolbar.tbv2 .toolbar-sep {
  width: 1px;
  height: 18px;
  background: #ECEEF1;
  margin: 0 4px;
}

/* ── Buttons v2 - visual hierarchy ─────────────────────────────────────── */
#toolbar.tbv2 .btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 0.12s ease;
}
#toolbar.tbv2 .btn-yellow {
  background: #FF5A00;
  color: var(--navy-ink, #01172A);
  box-shadow: 0 1px 2px rgba(255, 90, 0, 0.18);
}
#toolbar.tbv2 .btn-yellow:hover {
  background: #E64E00;
  box-shadow: 0 2px 4px rgba(255, 90, 0, 0.25);
  filter: none;
  transform: translateY(-0.5px);
}
#toolbar.tbv2 .btn-outline {
  border: 1px solid #E5E7EB !important;
  background: #FFFFFF;
  color: #4B5563;
}
#toolbar.tbv2 .btn-outline:hover {
  border-color: #9CA3AF !important;
  color: #111827;
  background: #FAFAFA;
}

/* ── Persistent org-size / match-count stat (left of the toolbar) ──────── */
#toolbar.tbv2 .tbv2-orgstat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
  white-space: nowrap;
}
#toolbar.tbv2 .tbv2-orgstat strong {
  font-size: 13px;
  font-weight: 800;
  color: #374151;
}
/* When a filter narrows the set, the stat reads as an active/info value. */
#toolbar.tbv2 .tbv2-orgstat[data-filtered="true"] { color: #1565C0; }
#toolbar.tbv2 .tbv2-orgstat[data-filtered="true"] strong { color: #1565C0; }
#toolbar.tbv2 .tbv2-orgstat.hidden { display: none; }
/* Hide the trailing separator when the stat itself is empty (pre-load). */
#toolbar.tbv2 .tbv2-orgstat.hidden + .tb-sep-orgstat { display: none; }

/* ── Filter activity strip (active filters only; neutral, not an alert) ── */
#tbv2-activity {
  background: #F9FAFB;
  border-bottom: 0.5px solid #E5E7EB;
  font-family: 'IBM Plex Sans', sans-serif;
  z-index: 99;
  position: relative;
  animation: tbv2ActivityIn 0.18s ease;
}
.tbv2-activity-label {
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  flex: 0 0 auto;
  letter-spacing: 0.02em;
}
#tbv2-activity.hidden { display: none; }
@keyframes tbv2ActivityIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tbv2-activity-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px;
  flex-wrap: wrap;
}
.tbv2-activity-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.tbv2-activity-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 0.5px solid #D1D5DB;
  font-size: 11px;
  font-weight: 600;
  color: #4B5563;
  cursor: pointer;
  transition: all 0.12s ease;
}
.tbv2-activity-chip:hover {
  background: #EFF6FF;
  border-color: #1565C0;
}
.tbv2-activity-chip-label {
  color: #6B7280;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tbv2-activity-chip-value {
  color: #111827;
  font-weight: 700;
}
.tbv2-activity-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #EEF0F2;
  color: #6B7280;
  font-size: 12px;
  line-height: 1;
  margin-left: 2px;
  font-weight: 800;
  transition: all 0.12s ease;
}
.tbv2-activity-chip:hover .tbv2-activity-chip-x {
  background: #1565C0;
  color: #FFFFFF;
}
.tbv2-activity-clear-all {
  flex: 0 0 auto;
  padding: 4px 12px;
  border: 1px solid #DC2626;
  background: #FFFFFF;
  border-radius: 14px;
  font-size: 10.5px;
  font-weight: 700;
  color: #B91C1C;
  cursor: pointer;
  letter-spacing: 0.02em;
  font-family: inherit;
  transition: all 0.12s ease;
}
.tbv2-activity-clear-all:hover {
  background: #DC2626;
  color: #FFFFFF;
}

/* ── Responsive: keep the v2 affordances usable when toolbar wraps ───── */
@media (max-width: 900px) {
  #toolbar.tbv2 #search { width: 220px; min-width: 180px; }
}
@media (max-width: 700px) {
  .tbv2-activity-inner { padding: 6px 12px; gap: 8px; }
  .tbv2-activity-clear-all { width: 100%; }
}