/* ══════════════════════════════════════════════════════════════════════
   ridigital DataHub — Shared Filter Sidebar
   Used identically by hub.php and archive-taxonomy.php. This is the single
   source of truth for filter UI — do not duplicate these rules per-page.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Layout: full-height column + sticky, internally-scrolling panel ──────
   Two-layer technique on purpose:
   - .rddh-filter-sidebar (outer) is stretched by the parent grid's
     align-items:stretch, so its white box always reaches the same height
     as the card grid next to it — no gray gap under a short sidebar.
   - .rddh-filter-sidebar-inner (inner) is what's actually sticky + height
     capped to the viewport, with its own scrollbar once the filter list is
     taller than the screen. It stays correctly positioned within the tall
     outer box as the page scrolls, detaching gracefully near the page end.
   ────────────────────────────────────────────────────────────────────── */
.rddh-filter-sidebar {
  display: block !important; /* guards against theme CSS that flex/center bare <aside> elements */
  background: #fff !important; border-radius: 14px !important; border: 1px solid #eaeaf0 !important;
  /* NOTE: deliberately no overflow:hidden here. overflow:hidden on a
     position:sticky element's ancestor is a well-known CSS gotcha — it
     forces the sticky "top" offset to apply as a permanent gap instead of
     only kicking in once the page is actually scrolled past that point.
     That produced exactly an ~80px blank gap above "Filters" on load,
     matching this component's top:80px sticky offset. Nothing inside this
     box needs corner-clipping (the header has no background of its own —
     it shows the same white straight through), so it's safe to drop. */
}
.rddh-filter-sidebar-inner {
  position: sticky !important; top: 80px !important; max-height: calc(100vh - 100px) !important;
  display: flex !important; flex-direction: column !important;
  align-items: stretch !important; justify-content: flex-start !important;
}
.rddh-filter-sidebar-hd {
  flex-shrink: 0 !important;
  padding: 14px 18px !important; border-bottom: 1px solid #f0f0f5;
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: #374151 !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  width: 100% !important;
}
.rddh-filter-clear-all { font-size: .78rem; font-weight: 700; color: #5c1d77 !important; text-transform: none; letter-spacing: 0; }
.rddh-filter-clear-all:hover { text-decoration: underline !important; }
.rddh-filter-sidebar-body {
  flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important;
  width: 100% !important;
}
.rddh-filter-sidebar-body::-webkit-scrollbar { width: 5px; }
.rddh-filter-sidebar-body::-webkit-scrollbar-track { background: transparent; }
.rddh-filter-sidebar-body::-webkit-scrollbar-thumb { background: #e5d9f0; border-radius: 3px; }
.rddh-filter-sidebar-body::-webkit-scrollbar-thumb:hover { background: #d4b8ea; }

/* ── Filter sections (Industry / Sector / Location / Price) ── */
.rddh-fsec { border-bottom: 1px solid #f0f0f5; }
.rddh-fsec:last-child { border-bottom: none; }
.rddh-fsec-hd { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 18px !important; cursor: pointer; user-select: none; transition: background .1s; gap: 8px !important; }
.rddh-fsec-hd:hover { background: #f9f8ff; }
.rddh-fsec-title { font-size: .88rem; font-weight: 700; color: #111827 !important; }
.rddh-fsec-badge { font-size: .7rem; font-weight: 800; background: #5c1d77; color: #fff !important; padding: 1px 7px !important; border-radius: 100px; }
.rddh-fsec-chevron { color: #9ca3af !important; transition: transform .18s; flex-shrink: 0 !important; margin-left: auto !important; }
.rddh-fsec.rddh-open .rddh-fsec-chevron { transform: rotate(180deg); }
.rddh-fsec-body { display: none !important; padding: 4px 14px 14px !important; }
.rddh-fsec.rddh-open .rddh-fsec-body { display: block !important; }
.rddh-fsec-search {
  width: 100%; padding: 8px 11px !important; font-size: .83rem; border: 1.5px solid #e5e7eb;
  border-radius: 8px; margin-bottom: 10px !important; outline: none; font-family: inherit; color: #111827 !important;
  -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important;
}
.rddh-fsec-search:focus { border-color: #5c1d77 !important; }
.rddh-fsec-more {
  display: block !important; width: 100%; text-align: center; margin-top: 8px !important; padding: 7px !important;
  background: #f9f8ff; border: 1px dashed #d4c5e8; border-radius: 8px;
  font-size: .78rem; font-weight: 700; color: #5c1d77 !important; cursor: pointer; font-family: inherit;
}
.rddh-fsec-more:hover { background: #f0e9fc; }

/* ── Searchable multi-select (Industry / Sector) ──────────────────────────
   Inline expand-in-place list (Apollo-style), not a floating panel. The
   search box + checklist sit directly inside the section body (see
   .rddh-fsec-body above) — once the section is open, they're just visible;
   nothing floats, nothing needs position:fixed, z-index-juggling, or
   portalling to <body> (an earlier version did all of that to work around
   a self-inflicted clipping problem — see handoff.md §3.9/§3.10 for that
   history, kept as a lesson for any future dynamically-positioned element).
   Selections show as removable pills above the search box; per the filter-
   improvement guideline, checking a box never reloads the page by itself —
   everything is staged and committed once via the single sticky "Apply
   Filters" button at the bottom of the sidebar (see rddh_apply_filters()
   in rddh-filter.js). */
.rddh-msel-search {
  display: flex !important; align-items: center !important; gap: 8px !important;
  height: 38px !important; padding: 0 12px !important; margin-bottom: 8px !important;
  background: #fff !important; border: 1.5px solid #e5e7eb !important; border-radius: 9px !important;
  transition: border-color .15s ease !important;
}
/* Border-only focus state — no box-shadow glow. A previous version paired
   the border-color change with a 3px rgba box-shadow "ring", which is what
   produced the reported doubled/heavy-border look (a 1.5px border plus a
   3px halo just outside it reads as two concentric edges rather than one
   clean highlighted border). A single color change is enough to show
   focus and can't visually double up. */
.rddh-msel-search:focus-within { border-color: #5c1d77 !important; }
.rddh-msel-search svg { color: #9ca3af !important; flex-shrink: 0 !important; }
.rddh-msel-search input {
  flex: 1 !important; min-width: 0 !important; border: none !important; outline: none !important;
  background: transparent !important; font-size: .84rem !important; font-family: inherit !important;
  color: #111827 !important; height: 100% !important; padding: 0 !important; margin: 0 !important;
  /* -webkit-appearance/appearance: none strips the browser's own native
     text-field chrome. Without it, some browsers (notably Safari) still
     draw their own subtle inset bezel/shadow on a plain <input> even with
     border:none + outline:none — which is exactly what a "washed" second
     border line just inside the real one looks like. box-shadow:none is
     a second line of defense for the same native styling in browsers that
     implement it as a shadow rather than a border. */
  -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important;
}
.rddh-msel-search input::placeholder { color: #9ca3af !important; }
/* Clear ('x') button — a plain flex child next to the input, not an
   absolutely-positioned overlay, so there's no padding-math or z-index to
   get wrong. Hidden until there's something to clear. */
.rddh-msel-search-clear {
  display: none !important; align-items: center !important; justify-content: center !important;
  width: 20px !important; height: 20px !important; flex-shrink: 0 !important;
  background: none !important; border: none !important; border-radius: 50% !important;
  padding: 0 !important; color: #9ca3af !important; cursor: pointer !important;
}
.rddh-msel-search-clear:hover { background: #f0e9fc !important; color: #5c1d77 !important; }
.rddh-msel-search.rddh-msel-search-has-value .rddh-msel-search-clear { display: flex !important; }

.rddh-msel-list {
  max-height: 250px !important; overflow-y: auto !important;
  border: 1px solid #f0f0f5 !important; border-radius: 9px !important; padding: 4px !important;
}
.rddh-msel-list::-webkit-scrollbar { width: 5px; }
.rddh-msel-list::-webkit-scrollbar-thumb { background: #e5d9f0; border-radius: 3px; }
.rddh-msel-item {
  display: flex !important; align-items: center !important; gap: 9px !important;
  padding: 8px 9px !important; border-radius: 7px !important; cursor: pointer !important;
  font-size: .85rem !important; color: #374151 !important; transition: background .1s !important;
}
.rddh-msel-item:hover { background: #f5f0ff !important; }
/* Pinned = currently checked. Kept visible + floated to the top of the
   list regardless of the active search query (see rddh_msel_sync() /
   rddh_msel_filter() in rddh-filter.js) — a subtle tint marks it as
   "selected" no matter where it ends up scrolled to. */
.rddh-msel-item.rddh-msel-pinned { background: #f9f5ff !important; }
.rddh-msel-item.rddh-msel-pinned:hover { background: #f3ebfb !important; }
.rddh-msel-item input { position: absolute !important; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rddh-msel-item-check {
  width: 17px !important; height: 17px !important; flex-shrink: 0 !important; border-radius: 5px !important;
  border: 1.5px solid #d1d5db !important; display: flex !important; align-items: center !important; justify-content: center !important;
  color: #fff !important; transition: all .12s ease !important;
}
.rddh-msel-item-check svg { display: none !important; }
.rddh-msel-item input:checked ~ .rddh-msel-item-check { background: #5c1d77 !important; border-color: #5c1d77 !important; }
.rddh-msel-item input:checked ~ .rddh-msel-item-check svg { display: block !important; }
.rddh-msel-item-label { flex: 1 !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.rddh-msel-item-count { font-size: .72rem !important; color: #9ca3af !important; flex-shrink: 0 !important; }
.rddh-msel-item.rddh-hidden { display: none !important; }

/* "No matches" — driven by a CSS class, not the native `hidden` attribute.
   See rddh_msel_search() in rddh-filter.js: the isolation reset's
   `display:block !important` on every <div> (templates/partials/
   isolation.php) beats a plain `hidden` attribute outright, so a
   `<div hidden>` in this plugin never actually hides — this bit visibly
   in the previous version (empty-state text stayed on screen even with
   real matches showing above it). */
.rddh-msel-empty { display: none !important; padding: 16px 10px !important; text-align: center !important; font-size: .82rem !important; color: #9ca3af !important; }
.rddh-msel-empty.rddh-msel-empty-show { display: block !important; }

.rddh-msel-ft {
  display: flex !important; align-items: center !important;
  padding: 8px 2px 2px !important;
}
.rddh-msel-clear { background: none !important; border: none !important; padding: 0 !important; font-size: .78rem !important; font-weight: 700 !important; color: #9ca3af !important; cursor: pointer !important; font-family: inherit !important; }
.rddh-msel-clear:hover { color: #5c1d77 !important; }

.rddh-msel-pills { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 8px !important; }
.rddh-msel-pill {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  background: #f3ebfb !important; color: #5c1d77 !important; border: 1px solid #e2d3f2 !important;
  border-radius: 100px !important; padding: 4px 6px 4px 11px !important;
  font-size: .78rem !important; font-weight: 600 !important;
}
.rddh-msel-pill button {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 16px !important; height: 16px !important; border-radius: 50% !important;
  background: rgba(92,29,119,.12) !important; border: none !important; color: #5c1d77 !important; cursor: pointer !important; flex-shrink: 0 !important;
}
.rddh-msel-pill button:hover { background: rgba(92,29,119,.22) !important; }

.rddh-hidden { display: none !important; }

/* ── Location tree (Country > State > City) ─────────────────────────────
   Rows, not chips — a nested hierarchy doesn't read well as wrapping pills.
   The whole row expands/collapses on click (a much bigger target than the
   old 20px chevron-only button); the checkbox is a separate square with
   its own click handling so selecting a term doesn't also toggle expand,
   and vice versa.
   ────────────────────────────────────────────────────────────────────── */
.rddh-loc-tree { display: flex !important; flex-direction: column !important; gap: 1px !important; }
.rddh-loc-node { }
.rddh-loc-row {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 8px 6px !important; border-radius: 7px !important; cursor: default; transition: background .1s !important;
}
.rddh-loc-node[onclick], .rddh-loc-row[role="button"] { cursor: pointer !important; }
.rddh-loc-row[role="button"]:hover { background: #f5f0ff !important; }
.rddh-loc-row[role="button"]:focus-visible { outline: 2px solid #5c1d77; outline-offset: -2px; }
.rddh-loc-toggle {
  width: 18px; height: 18px; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important;
  color: #9ca3af !important; transition: transform .16s ease !important;
}
.rddh-loc-node.rddh-loc-open > .rddh-loc-row > .rddh-loc-toggle { transform: rotate(90deg) !important; }
.rddh-loc-toggle-spacer { width: 18px; flex-shrink: 0 !important; }
.rddh-loc-checkbox { display: flex !important; align-items: center !important; flex-shrink: 0 !important; cursor: pointer !important; padding: 4px !important; margin: -4px !important; }
.rddh-loc-checkbox input { position: absolute !important; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rddh-loc-checkbox-box {
  width: 18px !important; height: 18px !important; border-radius: 5px !important;
  border: 1.5px solid #d1d5db !important; display: flex !important; align-items: center !important; justify-content: center !important;
  color: #fff !important; transition: all .12s ease !important;
}
.rddh-loc-checkbox-box svg { display: none !important; }
.rddh-loc-checkbox input:checked ~ .rddh-loc-checkbox-box { background: #5c1d77 !important; border-color: #5c1d77 !important; }
.rddh-loc-checkbox input:checked ~ .rddh-loc-checkbox-box svg { display: block !important; }
.rddh-loc-flag { font-size: 1.05rem; line-height: 1; flex-shrink: 0 !important; }
.rddh-loc-name { font-size: .86rem; color: #374151 !important; flex: 1 !important; min-width: 0; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap; }
.rddh-loc-country > .rddh-loc-row .rddh-loc-name { font-weight: 700; color: #111827 !important; }
.rddh-loc-count { font-size: .72rem; color: #9ca3af !important; font-weight: 600; flex-shrink: 0 !important; }
.rddh-loc-children {
  display: none !important; margin-left: 10px !important; padding-left: 12px !important;
  border-left: 1.5px dashed #e7ddf3;
}
.rddh-loc-node.rddh-loc-open > .rddh-loc-children { display: block !important; }

/* ── Price ── */
.rddh-price-inputs { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 10px !important; }
.rddh-price-input {
  width: 100%; min-width: 0; padding: 8px 10px !important; font-size: .84rem;
  border: 1.5px solid #e5e7eb; border-radius: 8px; outline: none; font-family: inherit; color: #111827 !important;
  -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important;
}
.rddh-price-input:focus { border-color: #5c1d77 !important; }
.rddh-price-sep { color: #9ca3af !important; font-size: .8rem; flex-shrink: 0 !important; }

/* ── Sticky "Apply Filters" bar ────────────────────────────────────────────
   v1.7.8: replaces every per-section "Done"/"Apply" button (Industry,
   Sector, Price) and Location's old instant-reload-per-click behavior with
   ONE button that commits everything staged across all four sections at
   once — the filter-improvement guideline's "Global Apply" alternative to
   full AJAX-driven live filtering (which would need a real query/re-render
   endpoint this plugin doesn't have). It sits as a third flex child of
   .rddh-filter-sidebar-inner, alongside -hd and -body — the existing
   flex-column layout pins it below the scrollable body for free, no
   position:fixed/sticky trickery needed (same reasoning as the header
   above it). */
.rddh-filter-sidebar-ft {
  flex-shrink: 0 !important; padding: 12px 16px !important; border-top: 1px solid #f0f0f5 !important;
  width: 100% !important;
}
.rddh-filter-apply-btn {
  width: 100% !important; padding: 11px !important; background: #5c1d77 !important; color: #fff !important;
  border: none !important; border-radius: 9px !important; font-size: .86rem !important; font-weight: 700 !important;
  cursor: pointer !important; font-family: inherit !important; transition: background .15s !important;
}
.rddh-filter-apply-btn:hover { background: #451459 !important; }
.rddh-apply-count { font-weight: 700 !important; }

/* ── Mobile filter trigger + overlay (shared id/classes across pages) ──────
   The overlay used to be a bare inline style="display:none;position:fixed;…"
   attribute. That's fragile under the isolation reset (see isolation.php):
   an inline style with no !important can't reliably beat a class-based
   !important rule, in either direction, so both showing AND hiding it
   became unpredictable. A real class fixes that — same specificity ballpark
   as everything else here, resolved correctly by cascade order. */
.rddh-sidebar-overlay {
  display: none !important; position: fixed !important; inset: 0 !important;
  background: rgba(0,0,0,.5) !important; z-index: 9799 !important;
}
.rddh-sidebar-overlay.rddh-open { display: block !important; }
.rddh-filter-mobile-btn {
  display: none !important; align-items: center !important; gap: 7px !important;
  background: #fff; border: 1.5px solid #e5e5ec; border-radius: 10px;
  padding: 0 14px !important; height: 42px; font-size: .84rem; font-weight: 700; color: #374151 !important;
  cursor: pointer; font-family: inherit;
}
@media (max-width: 760px) {
  .rddh-filter-mobile-btn { display: flex !important; }
  .rddh-filter-sidebar {
    position: fixed !important; top: 0; left: -100%; width: 86vw; max-width: 340px; height: 100vh;
    z-index: 9800 !important; border-radius: 0; transition: left .25s ease; overflow-y: auto !important;
  }
  .rddh-filter-sidebar.rddh-sidebar-open { left: 0; }
  .rddh-filter-sidebar-inner { position: static !important; max-height: none; height: 100%; }
}
