/*
  CPV Tree – style layer

  You can theme via shortcode:
    [cpv_tree theme="modern" accent="#0ea5e9"]
    [cpv_tree theme="compact"]
    [cpv_tree theme="dark" accent="#22c55e"]
*/

.cpv-tree-wrap{
  /* design tokens (override with CSS vars on the wrapper) */
  --cpv-bg: #fff;
  --cpv-border: #e3e3e3;
  --cpv-muted-border: #d8d8d8;
  --cpv-text: #111;
  --cpv-muted-text: #555;
  --cpv-toolbar-bg: transparent;
  --cpv-btn-bg: #f7f7f7;
  --cpv-btn-bg-hover: #f0f0f0;
  --cpv-accent: #0ea5e9;
  --cpv-radius: 10px;
  --cpv-radius-sm: 8px;
  --cpv-pad: 12px;
  --cpv-font: 14px;

  border:1px solid var(--cpv-border);
  border-radius: var(--cpv-radius);
  padding: var(--cpv-pad);
  margin: 14px 0;
  background: var(--cpv-bg);
  color: var(--cpv-text);
  font-size: var(--cpv-font);
}
.cpv-tree-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:10px;
  background: var(--cpv-toolbar-bg);
}
.cpv-tree-search{
  flex: 1 1 260px;
  padding:10px 12px;
  border:1px solid var(--cpv-muted-border);
  border-radius: var(--cpv-radius);
  min-width: 220px;
  background: var(--cpv-bg);
  color: var(--cpv-text);
}
.cpv-tree-search:focus{
  outline: none;
  border-color: var(--cpv-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cpv-accent) 22%, transparent);
}
.cpv-tree-btn{
  padding:10px 12px;
  border:1px solid var(--cpv-muted-border);
  background: var(--cpv-btn-bg);
  border-radius: var(--cpv-radius);
  cursor:pointer;
  color: var(--cpv-text);
}
.cpv-tree-btn:hover{ background: var(--cpv-btn-bg-hover); }
.cpv-tree-status{
  font-size:14px;
  color: var(--cpv-muted-text);
  margin:6px 0 10px 0;
}
.cpv-tree{
  max-height: var(--cpv-maxh, 70vh);
  overflow:auto;
  padding:6px 4px;
}
.cpv-tree-ul{
  list-style:none;
  padding-left: 0;
  margin:0;
}
.cpv-tree-li{
  margin: 3px 0;
  padding-left: 0;
}

/* Some WP themes inject bullets via very specific selectors or pseudo-elements.
   We hard-reset list markers inside the plugin wrapper so the tree never shows "•". */
.cpv-tree-wrap ul,
.cpv-tree-wrap li{
  list-style: none !important;
}
.cpv-tree-wrap li::marker{
  content: "" !important;
}
.cpv-tree-wrap li::before{
  content: none !important;
}
.cpv-tree-toggle{
  width:34px;
  height:28px;
  border:1px solid var(--cpv-muted-border);
  background: var(--cpv-bg);
  border-radius: var(--cpv-radius-sm);
  cursor:pointer;
  margin-right:8px;
  vertical-align:middle;
  color: var(--cpv-text);
}
.cpv-tree-toggle:hover{
  border-color: color-mix(in srgb, var(--cpv-accent) 60%, var(--cpv-muted-border));
}
.cpv-tree-toggle.is-empty{
  cursor:default;
  opacity:0.7;
}
.cpv-tree-label{
  vertical-align:middle;
  cursor:default;
}
.cpv-tree-children{
  margin-left: 34px;
  padding-left: 10px;
  border-left: 1px dashed color-mix(in srgb, var(--cpv-muted-border) 70%, transparent);
  margin-top: 4px;
}
.cpv-tree-children.is-collapsed{
  display:none;
}
.cpv-tree-li.is-hidden{
  display:none;
}
.cpv-tree-li.is-match > .cpv-tree-label{
  font-weight:600;
}
.cpv-tree-label mark{
  padding: 0 2px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--cpv-accent) 24%, transparent);
}

/* --- Themes -------------------------------------------------------------- */

/* Modern: slightly elevated card + accent buttons */
.cpv-tree-wrap.cpv-theme-modern{
  border-color: color-mix(in srgb, var(--cpv-border) 70%, transparent);
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
}
.cpv-tree-wrap.cpv-theme-modern .cpv-tree-btn{
  border-color: color-mix(in srgb, var(--cpv-accent) 35%, var(--cpv-muted-border));
}

/* Compact: denser spacing */
.cpv-tree-wrap.cpv-theme-compact{
  --cpv-pad: 10px;
  --cpv-font: 13px;
}
.cpv-tree-wrap.cpv-theme-compact .cpv-tree-search,
.cpv-tree-wrap.cpv-theme-compact .cpv-tree-btn{
  padding: 8px 10px;
}
.cpv-tree-wrap.cpv-theme-compact .cpv-tree-toggle{
  width: 30px;
  height: 26px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Compact: arrows without outline + no "bullet" space for leaf nodes */
.cpv-tree-wrap.cpv-theme-compact .cpv-tree-toggle:hover{
  background: color-mix(in srgb, var(--cpv-accent) 8%, transparent);
}
.cpv-tree-wrap.cpv-theme-compact .cpv-tree-toggle:focus{
  outline: none;
}
.cpv-tree-wrap.cpv-theme-compact .cpv-tree-toggle:focus-visible{
  box-shadow: none !important;
}
.cpv-tree-wrap.cpv-theme-compact .cpv-tree-toggle.is-empty{
  background: transparent;
}

/* Compact: hard reset for bullets that some themes inject via ::marker/::before */
.cpv-tree-wrap.cpv-theme-compact ul,
.cpv-tree-wrap.cpv-theme-compact li{
  list-style: none !important;
}
.cpv-tree-wrap.cpv-theme-compact li::marker{
  content: "" !important;
}
.cpv-tree-wrap.cpv-theme-compact li::before{
  content: none !important;
}

/* Dark: for dark site designs */
.cpv-tree-wrap.cpv-theme-dark{
  --cpv-bg: #0b1220;
  --cpv-border: #22324f;
  --cpv-muted-border: #2a3b5e;
  --cpv-text: #e8eefc;
  --cpv-muted-text: #b7c3dd;
  --cpv-btn-bg: #121c33;
  --cpv-btn-bg-hover: #162244;
}