/* File: src/assets/css/taxonomy-selector.css */

/* ======================= TREE CORE ======================= */

/* Config */
.pataka-tree { --tree-indent: 1rem; } /* tweak depth step here */

/* Container + lists take full width */
.pataka-tree,
.pataka-tree ul[role="tree"],
.pataka-tree ul[role="group"] {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Remove native list styling */
.pataka-tree ul[role="tree"],
.pataka-tree ul[role="group"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Indentation by depth */
.pataka-tree ul[role="group"] {
  margin-inline-start: var(--tree-indent);
}

/* === ROW LAYOUT (GRID): twist | checkbox | label ========================= */
.pataka-tree .pataka-tree__item {
  display: grid;
  grid-template-columns: 1.25rem 1.25rem minmax(0, 1fr);
  align-items: center;
  column-gap: .5rem;
  width: 100%;
  margin: 0;
  padding: 3px 0;
}

/* Pin each cell to a column (no auto-placement surprises) */
.pataka-tree .pataka-tree__item > .pataka-tree__twist,
.pataka-tree .pataka-tree__item > .pataka-tree__twistspace {
  grid-column: 1;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-grid;
  place-items: center;
}

.pataka-tree .pataka-tree__item > .pataka-tree__check {
  grid-column: 2;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

/* Label gets the flexible track and can shrink for ellipsis */
.pataka-tree .pataka-tree__item > .pataka-tree__label {
  grid-column: 3;
  display: block;
  min-width: 0;              /* allow shrink within the track */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SAFETY: allow every direct child of the row to shrink */
.pataka-tree .pataka-tree__item > * { min-width: 0; }

/* Children list spans full row and keeps indent */
.pataka-tree .pataka-tree__item > ul[role="group"] {
  grid-column: 1 / -1;       /* span all three columns */
  width: 100%;
  margin: 0;
  margin-inline-start: var(--tree-indent);
  padding: 0;
  padding-top: 3px;
}

/* Twist button */
.pataka-tree__twist {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}
.pataka-tree__twist[aria-busy="true"] { pointer-events: none; opacity: .6; }

/* Spacer: inert, just alignment */
.pataka-tree__twistspace { pointer-events: none; }

/* Optional: subtle row hover */
.pataka-tree .pataka-tree__item:hover > .pataka-tree__label { opacity: .95; }

/* === Indeterminate (partial) visual cue — current row only =============== */
.pataka-tree .pataka-tree__item.is-partial > .pataka-tree__label {
  color: #6b7280; /* slate-500-ish */
}
.pataka-tree .pataka-tree__item[aria-expanded="false"].is-partial > .pataka-tree__label {
  opacity: .75;
  font-style: italic;
}
.pataka-tree .pataka-tree__item.is-partial > .pataka-tree__twist { opacity: .85; }
.pataka-tree .pataka-tree__item.is-partial > .pataka-tree__check { opacity: .95; }

/* Progressive enhancement: :has() (still restricted to current row) */
@supports(selector(:has(*))) {
  .pataka-tree .pataka-tree__item:has(> .pataka-tree__check:indeterminate) > .pataka-tree__label {
    color: #6b7280;
  }
  .pataka-tree .pataka-tree__item[aria-expanded="false"]:has(> .pataka-tree__check:indeterminate) > .pataka-tree__label {
    opacity: .75;
    font-style: italic;
  }
}

/* brief highlight when a search hit is revealed */
.pataka-tree .is-highlight {
  background: #fff3cd;               /* pale amber */
  outline: 2px solid #f0ad4e4d;
  border-radius: 2px;
}

/* Stronger hover and focus styles for the twist control */
#pataka-tax-panel .pataka-tree__twist { color: #434a54; }
#pataka-tax-panel .pataka-tree__twist:hover { opacity: .75; color: #111; }
#pataka-tax-panel .pataka-tree__twist:focus-visible {
  outline: 2px solid #2271b1; /* WP blue */
  outline-offset: 2px;
  border-radius: 3px;
}
/* Fallback for browsers that don’t support :focus-visible */
#pataka-tax-panel .pataka-tree__twist:focus {
  outline: 2px solid #2271b1;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ======================= ACCORDION + HEADER SUMMARY ======================= */

.pataka-accordion {
  border: 1px solid #dcdcde;
  border-radius: 6px;
  background: #fff;
}

/* Header row now hosts title + chips (flex, wrapping) */
.pataka-acc__tab {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: 10px 12px;
  cursor: pointer;
  border-top: 1px solid #dcdcde;
}
.pataka-acc__section:first-child .pataka-acc__tab {
  border-top: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

/* Focus ring on the whole header for keyboard users */
.pataka-acc__tab:focus-visible {
  outline: 2px solid #2271b1;
  outline-offset: 2px;
  border-radius: 4px;
}

.pataka-acc__title { flex: 0 0 auto; }

/* Summary chip container lives in header and wraps naturally */
.pataka-acc__summary {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-left: .5rem;      /* separation from title */
  min-height: 1.6em;       /* keeps header height stable when empty/first chip added */
}

/* Chip tokens shown in header */
.pataka-chip--summary,
.pataka-chip--more {
  border: 1px solid #c3c4c7;
  background: #f6f7f7;
  border-radius: 999px;
  padding: .125rem .5rem;
  font-size: 12px;
  line-height: 1.6;
  cursor: pointer;
  user-select: none;
}
.pataka-chip--summary:hover,
.pataka-chip--more:hover { filter: none; }

.pataka-chip--summary:focus-visible,
.pataka-chip--more:focus-visible {
  outline: 2px solid #2271b1;
  outline-offset: 2px;
}

/* Inner bits for optional styling hooks */
.pataka-chip__text { white-space: nowrap; }
.pataka-chip__x { margin-left: .25rem; }

/* Ensure header hover styles don’t visually override chip styles */
.pataka-acc__tab:hover .pataka-chip--summary,
.pataka-acc__tab:hover .pataka-chip--more { filter: none; }

/* Panel body */
.pataka-acc__panel { padding: 12px 12px 16px; }

/* Toolbar above tree */
.pataka-tax__toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.pataka-tax__toolbar input[type="search"] { max-width: 260px; }


/* Flat taxonomy selector */
/* Add to taxonomy-tree.css or a small admin CSS */
.pataka-flat__wrap { display:block; gap:.5rem; }
.pataka-flat__pills { display:flex; flex-wrap:wrap; gap:.5rem; }
.pataka-pill { border:1px solid #ccd0d4; border-radius:999px; padding:.25rem .6rem; background:#fff; cursor:pointer; }
.pataka-pill.is-active { background:#2271b1; color:#fff; border-color:#2271b1; }
.pataka-flat__typeahead { position:relative; max-width:32rem; }
.pataka-flat__input { width:100%; }
.pataka-flat__menu { position:absolute; z-index:10; left:0; right:0; top:100%; background:#fff; border:1px solid #ccd0d4; border-radius:4px; margin-top:2px; max-height:240px; overflow:auto; padding:.25rem; }
.pataka-flat__opt, .pataka-flat__add { display:block; width:100%; text-align:left; padding:.35rem .5rem; background:#fff; border:0; }
.pataka-flat__opt:hover, .pataka-flat__add:hover { background:#f0f6ff; }
.pataka-flat__chips { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.5rem; }
.pataka-chip { background:#f6f7f7; border:1px solid #dcdcde; border-radius:999px; padding:.2rem .5rem; cursor:pointer; }
.pataka-chip__x { margin-left:.35rem; }