/* Kubernetes Resource Explorer page tweaks.
   Keep this file small and scoped to the explorer DOM.
*/

/* The explorer output is generated by k8s_tool.js using these classes:
   - .k8s-node (details)
   - .k8s-leaf
   - .k8s-children
   - .k8s-field-name / .k8s-field-type / .k8s-field-path / .k8s-field-desc
   - .k8s-hl
   Restore the original (pre-split) “beautified” look from style.css.
*/

#k8sTree{overflow-x:auto; font-size:14px}

.k8s-hl{
  background:rgba(138,180,248,.22);
  border:1px solid rgba(138,180,248,.24);
  padding:0 2px;
  border-radius:6px;
  color:var(--text);
}

.k8s-node,.k8s-leaf{
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border-radius:16px;
  padding:10px 12px;
  margin:10px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.22);
  border-left:2px solid rgba(138,180,248,.22);
}

.k8s-node summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.k8s-leaf-head{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.k8s-node summary::-webkit-details-marker{display:none}

.k8s-node summary::before{
  content:"▸";
  color:rgba(170,183,207,.9);
  font-size:12px;
  transform: translateY(-1px);
}

.k8s-node[open] summary::before{content:"▾"}

.k8s-children{
  margin-top:10px;
  padding-left:14px;
  margin-left:8px;
  border-left:1px dashed rgba(255,255,255,.15);
}

.k8s-field-name{font-weight:700; color:var(--text)}

.k8s-field-type,.k8s-field-path{
  font-family:var(--mono);
  font-size:12px;
  color:rgba(170,183,207,.92);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  padding:2px 8px;
  border-radius:999px;
}

.k8s-field-path{font-size:11px; color:rgba(170,183,207,.80)}

.k8s-field-desc{margin-top:8px; color:rgba(170,183,207,.85); line-height:1.55}

/* Copy button */
.k8s-field-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.k8s-field-title { display: flex; align-items: center; gap: 6px; }
.k8s-copy-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(170,183,207,.8);
  border-radius: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  padding: 0;
}
.k8s-copy-btn:hover { background: rgba(138,180,248,.15); color: #8ab4f8; border-color: rgba(138,180,248,.3); }
.k8s-copy-btn.copied { background: rgba(86,243,197,.15); border-color: rgba(86,243,197,.3); color: #56f3c5; }

/* Links inside explorer */
#k8sTree a{color: var(--blue)}
#k8sTree a:hover{color: var(--blue2)}

/* Make the search bar look consistent with other tool pages on narrow screens. */
@media (max-width: 720px) {
  .tool-bar { flex-direction: column; gap: 12px; align-items: stretch; }

  .k8s-node,.k8s-leaf{padding:10px 10px}
}