/* ═══════════════════════════════════════════════════════════════════════
   v40 — Apollo.io filter sidebar (TRULY isolated)

   All selectors target our private namespace (`.dn-apollo-shell`,
   `.dn-apollo-card`, `.dn-apollo-row`, etc). No collision with any
   legacy `.input_select_filter` rules anywhere in the project.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --apollo-bg: #ffffff;
  --apollo-row-hover: #f5f7f4;
  --apollo-border: #eceee8;
  --apollo-border-strong: #cdd5c8;
  --apollo-ink: #1f2a1d;
  --apollo-ink-2: #4a5648;
  --apollo-ink-3: #8a9489;
  --apollo-green: #159001;
  --apollo-green-dark: #0e6b01;
  --apollo-green-light: #e9f6e6;
  --apollo-shadow: 0 1px 2px rgba(15,23,42,.04);
}

/* ── Sidebar shell ───────────────────────────────────────────────────── */
.home_blocks .left .stiky_sidebar,
.stiky_sidebar{
  background:var(--apollo-bg) !important;
  border:1px solid var(--apollo-border) !important;
  border-radius:10px !important;
  box-shadow:var(--apollo-shadow) !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* Hide any legacy sidebar element once our rebuild has fired.
   Mirrors the runtime override in dn-apollo-filters.js (belt + braces). */
.stiky_sidebar[data-dn-apollo-done="1"] .input_select_filter,
.stiky_sidebar[data-dn-apollo-done="1"] .title_sidebar_filter,
.stiky_sidebar[data-dn-apollo-done="1"] .filter_choice,
.stiky_sidebar[data-dn-apollo-done="1"] .filters_detail,
.stiky_sidebar[data-dn-apollo-done="1"] .sidefilter_title,
.stiky_sidebar[data-dn-apollo-done="1"] .data_serch_filter,
.stiky_sidebar[data-dn-apollo-done="1"] .sidebar-filter-wrapper{
  display:none !important;
  visibility:hidden !important;
}

/* Belt-and-suspenders: anything inside our shell that isn't ours is gone */
.dn-apollo-shell > :not(form){ display:none !important; }
.dn-apollo-list > :not(.dn-apollo-card){ display:none !important; }
.dn-apollo-row > :not(.dn-apollo-icon):not(.dn-apollo-label):not(.dn-apollo-badge):not(.dn-apollo-pill):not(.dn-apollo-chev){ display:none !important; }

/* Reset the native <select> Select2 hides; safety net if Select2 init races */
.dn-apollo-body select{
  position:absolute !important; left:-9999px !important; width:1px !important;
  height:1px !important; opacity:0 !important;
}
.dn-apollo-body .select2-container{
  position:static !important; left:auto !important; width:100% !important;
  height:auto !important; opacity:1 !important;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.dn-apollo-header{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  background:var(--apollo-bg);
  border-bottom:1px solid var(--apollo-border);
}
.dn-apollo-header h4{
  margin:0; display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:var(--apollo-ink);
  letter-spacing:.2px; text-transform:none;
}
.dn-apollo-header h4 svg{
  width:16px; height:16px; color:var(--apollo-green);
}
.dn-apollo-count{
  display:none; min-width:18px; height:18px; padding:0 6px;
  background:var(--apollo-green); color:#fff;
  border-radius:9px; font-size:10px; font-weight:700;
  line-height:18px; text-align:center; margin-left:4px;
}
.dn-apollo-count.has-count{ display:inline-block; }
.dn-apollo-count.dn-pulse{ animation:dnPulse .4s ease; }
@keyframes dnPulse{ 0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }
.dn-apollo-clear{
  font-size:11px; color:var(--apollo-green-dark);
  background:none; border:none; cursor:pointer; padding:3px 6px;
  border-radius:5px; font-weight:600;
}
.dn-apollo-clear:hover{ background:var(--apollo-green-light); }
.dn-apollo-clear[hidden]{ display:none !important; }

/* ── Active filter chips bar ─────────────────────────────────────────── */
.dn-apollo-chips{
  padding:8px 12px; background:#fafdf8;
  border-bottom:1px solid var(--apollo-border);
  display:none; flex-wrap:wrap; gap:5px;
  position:sticky; top:45px; z-index:4;
}
.dn-apollo-chips.has-chips{ display:flex; }
.dn-apollo-chip{
  display:inline-flex; align-items:center; gap:5px;
  background:#fff; border:1px solid var(--apollo-border-strong);
  border-radius:12px; padding:2px 6px 2px 8px;
  font-size:11px; color:var(--apollo-ink); font-weight:500;
  max-width:100%;
}
.dn-apollo-chip-label{
  color:var(--apollo-ink-3); font-weight:600;
  text-transform:uppercase; font-size:9px; letter-spacing:.3px;
}
.dn-apollo-chip-value{
  max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dn-apollo-chip button{
  background:var(--apollo-green); color:#fff; border:none;
  width:14px; height:14px; border-radius:50%; cursor:pointer;
  font-size:9px; line-height:12px; padding:0; font-weight:bold;
}
.dn-apollo-chip button:hover{ background:var(--apollo-green-dark); }

/* ── Search box ──────────────────────────────────────────────────────── */
.dn-apollo-search{
  padding:8px 12px; background:var(--apollo-bg);
  border-bottom:1px solid var(--apollo-border);
}
.dn-apollo-search-input{
  width:100%; padding:7px 10px 7px 30px;
  border:1px solid var(--apollo-border); border-radius:6px;
  font-size:12px; background:#fff;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238a9489'><path d='M11.5 7a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0zm-.82 4.74a6 6 0 1 1 1.06-1.06l3.04 3.04a.75.75 0 1 1-1.06 1.06l-3.04-3.04z'/></svg>");
  background-repeat:no-repeat; background-position:9px center; background-size:13px;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.dn-apollo-search-input:focus{
  border-color:var(--apollo-green);
  box-shadow:0 0 0 3px rgba(21,144,1,.10);
}

/* ── Filter row list ─────────────────────────────────────────────────── */
.dn-apollo-list{ padding:4px 0; overflow-y:auto !important; max-height:calc(100vh - 180px); }

.dn-apollo-card{
  background:transparent;
  border:none;
  border-radius:0;
  margin:0;
  padding:0;
  box-shadow:none;
  position:relative;
  display:block;
}

.dn-apollo-row{
  display:flex; align-items:center; gap:10px;
  padding:9px 14px;
  cursor:pointer; user-select:none;
  font-size:13px; color:var(--apollo-ink); font-weight:500;
  transition:background .12s;
  border-left:3px solid transparent;
  text-transform:none;
}
.dn-apollo-row:hover{ background:var(--apollo-row-hover); }
.dn-apollo-row.is-active{
  background:#f0f7ed;
  border-left-color:var(--apollo-green);
  font-weight:600;
}
.dn-apollo-row .dn-apollo-icon{
  width:16px; height:16px; flex-shrink:0;
  color:var(--apollo-ink-3); display:inline-flex;
  align-items:center; justify-content:center;
}
.dn-apollo-row .dn-apollo-icon svg{ width:16px; height:16px; }
.dn-apollo-row.is-active .dn-apollo-icon{ color:var(--apollo-green); }
.dn-apollo-row .dn-apollo-label{
  flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-transform:none; letter-spacing:0; font-weight:inherit;
  font-size:13px; color:inherit;
}
.dn-apollo-row .dn-apollo-badge{
  font-size:9px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:var(--apollo-green-dark); background:var(--apollo-green-light);
  padding:2px 6px; border-radius:4px;
}
.dn-apollo-row .dn-apollo-pill{
  display:none; min-width:18px; height:18px; padding:0 5px;
  background:var(--apollo-green); color:#fff;
  border-radius:9px; font-size:10px; font-weight:700;
  line-height:18px; text-align:center;
}
.dn-apollo-row .dn-apollo-pill.has-count{ display:inline-block; }
.dn-apollo-row .dn-apollo-chev{
  width:8px; height:8px; flex-shrink:0;
  border-right:2px solid var(--apollo-ink-3);
  border-bottom:2px solid var(--apollo-ink-3);
  transform:rotate(-45deg); transition:transform .2s, border-color .2s;
}
.dn-apollo-card.is-open .dn-apollo-row .dn-apollo-chev{
  transform:rotate(45deg); border-color:var(--apollo-green);
}

.dn-apollo-body{
  padding:6px 14px 12px 33px;
  display:none;
  background:#fafbfa;
  border-bottom:1px solid var(--apollo-border);
}
.dn-apollo-card.is-open .dn-apollo-body{
  display:block;
  animation:dnSlide .15s ease;
}
@keyframes dnSlide{
  from{ opacity:0; transform:translateY(-3px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ── Select2 inside body ─────────────────────────────────────────────── */
.dn-apollo-body .select2-container{ width:100% !important; }
.dn-apollo-body .select2-container--default .select2-selection--multiple,
.dn-apollo-body .select2-container--default .select2-selection--single{
  background:#fff !important;
  border:1px solid var(--apollo-border-strong) !important;
  border-radius:6px !important;
  min-height:32px !important;
  padding:3px 8px !important;
  box-shadow:none !important;
  cursor:text !important;
  outline:none !important;
}
.dn-apollo-body .select2-container--focus .select2-selection,
.dn-apollo-body .select2-container--open .select2-selection{
  border-color:var(--apollo-green) !important;
  box-shadow:0 0 0 2px rgba(21,144,1,.10) !important;
}
.dn-apollo-body .select2-selection__placeholder{
  color:var(--apollo-ink-3) !important; font-size:12px !important;
}
.dn-apollo-body .select2-selection__rendered{
  color:var(--apollo-ink) !important; font-size:12px !important;
  line-height:24px !important;
}
.dn-apollo-body .select2-selection__arrow{ display:none !important; }
.dn-apollo-body .select2-selection__choice{
  background:var(--apollo-green) !important;
  color:#fff !important; border:none !important;
  border-radius:11px !important;
  padding:1px 8px 1px 19px !important;
  margin:1px 3px 0 0 !important;
  font-size:11px !important; font-weight:600 !important;
  line-height:18px !important; position:relative !important;
}
.dn-apollo-body .select2-selection__choice__remove{
  color:#fff !important; background:rgba(255,255,255,.25) !important;
  border-radius:50% !important; width:12px !important; height:12px !important;
  line-height:12px !important; text-align:center !important; font-size:9px !important;
  position:absolute !important; left:4px !important; top:50% !important;
  transform:translateY(-50%) !important; padding:0 !important; border:none !important;
  margin:0 !important;
}

.dn-apollo-card[data-dn-hidden="1"]{ display:none !important; }

/* ── Select2 dropdown styling ────────────────────────────────────────── */
.select2-container--open .select2-dropdown{
  border:1px solid var(--apollo-border-strong) !important;
  border-radius:6px !important;
  box-shadow:0 4px 16px rgba(15,23,42,.10) !important;
}
.select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--apollo-green) !important; color:#fff !important;
}
.select2-results__option[aria-selected=true]{
  background:var(--apollo-green-light) !important;
  color:var(--apollo-green-dark) !important; font-weight:600;
}
.select2-search--dropdown .select2-search__field{
  border:1px solid var(--apollo-border-strong) !important;
  border-radius:5px !important; padding:6px 10px !important;
  font-size:12px !important; outline:none !important;
}
.select2-search--dropdown .select2-search__field:focus{
  border-color:var(--apollo-green) !important;
  box-shadow:0 0 0 2px rgba(21,144,1,.10) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v58 — equalize filter row spacing (user-reported: "Spacing/padding
          inconsistent between filters" on the Search Leads sidebar).

   Root cause: open cards added a bottom border via .dn-apollo-body, but
   closed cards had no separator at all → vertical rhythm jumped whenever
   one filter expanded. Also row height drifted by ~2px when a badge or
   pill chip was rendered, because flex centering still had to absorb
   the taller chip on its own line.

   Fix:
     1. Every card gets the same hairline divider (open OR closed).
     2. .dn-apollo-body no longer paints its own border — the card owns it.
     3. Lock .dn-apollo-row to a fixed min-height so badges/pills can no
        longer push the row taller.
     4. Strip stray top margin from the first card so the first row sits
        flush under the search box.
   ═══════════════════════════════════════════════════════════════════════ */
.stiky_sidebar[data-dn-apollo-done="1"] .dn-apollo-list{
  padding: 0 !important;        /* let cards own their own dividers */
}
.stiky_sidebar[data-dn-apollo-done="1"] .dn-apollo-card{
  border-bottom: 1px solid var(--apollo-border) !important;
  margin: 0 !important;
}
.stiky_sidebar[data-dn-apollo-done="1"] .dn-apollo-card:last-child{
  border-bottom: 0 !important;  /* avoid double line at bottom */
}
.stiky_sidebar[data-dn-apollo-done="1"] .dn-apollo-row{
  min-height: 40px !important;       /* identical row height everywhere */
  padding: 9px 14px !important;
  box-sizing: border-box !important;
  line-height: 1.25 !important;
}
.stiky_sidebar[data-dn-apollo-done="1"] .dn-apollo-row .dn-apollo-badge,
.stiky_sidebar[data-dn-apollo-done="1"] .dn-apollo-row .dn-apollo-pill{
  flex-shrink: 0 !important;
  margin: 0 !important;              /* no asymmetric vertical margins */
}
.stiky_sidebar[data-dn-apollo-done="1"] .dn-apollo-body{
  border-bottom: 0 !important;        /* card already owns the divider */
  padding: 8px 14px 12px 33px !important;
  background: #fafbfa !important;
}
