/* Catalog tab: sidebar, chips and cards. */

/* =========================
   Catalog tab
   ========================= */
.catalogLayout{ display:flex; flex:1 1 auto; min-height:0; }

.catalogSidebar{
  width:210px; background:var(--surface); border-right:1px solid var(--border);
  padding:18px 0; flex-shrink:0; overflow-y:auto;
}
.catalogSidebar .sidebarLabel{
  font-size:10px; font-weight:600; color:var(--muted); text-transform:uppercase;
  letter-spacing:1.2px; padding:6px 18px 8px;
}
.layerRow{
  display:flex; align-items:center; gap:8px; padding:7px 18px; font-size:12.5px;
  color:var(--text); cursor:pointer; border-left:3px solid transparent; transition:all .15s;
}
.layerRow:hover{ background:var(--primary-soft); color:var(--dark-teal); }
.layerRow.active{ border-left-color:var(--teal); background:var(--primary-soft); color:var(--dark-teal); font-weight:600; }
.layerDot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }

.catalogContent{ flex:1; padding:24px 28px; overflow-y:auto; }
.catalogHeader h1{ font-size:20px; font-weight:700; color:var(--navy); }
.catalogHeader .sub{ font-size:12px; color:var(--muted); margin-top:2px; }

.catalogChips{ display:flex; gap:8px; margin:16px 0 20px; flex-wrap:wrap; }
.catalogChips .chip{
  padding:6px 16px; border-radius:20px; font-size:12px; font-weight:500; cursor:pointer;
  border:1px solid var(--border); background:var(--surface); color:var(--muted); font-family:inherit;
}
.catalogChips .chip:hover{ border-color:var(--teal); color:var(--dark-teal); background:var(--surface); }
.catalogChips .chip.active{ background:var(--teal); color:#fff; border-color:var(--teal); }

.cards-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  overflow:hidden; transition:box-shadow .2s,transform .15s;
}
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card-accent{ height:4px; }
.card-inner{ padding:16px 18px 14px; }
.card-meta{ display:flex; align-items:center; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.card-meta .type-label{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.sens-badge{ margin-left:auto; font-size:10px; font-weight:600; padding:3px 9px; border-radius:10px; white-space:nowrap; }
.sens-internal{ background:var(--info-wash); color:var(--info); border:1px solid #d0dbff; }
.sens-restricted{ background:var(--navy); color:#fff; border:1px solid var(--navy); }
.sens-confidential{ background:var(--critical-wash); color:var(--critical); border:1px solid #f5c2c2; }
.sens-public{ background:var(--primary-soft); color:var(--teal); border:1px solid #bfe3dd; }
.card-title{
  font-size:13.5px; font-weight:600; color:var(--navy); margin-bottom:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-desc{
  font-size:11.5px; color:var(--muted); margin-bottom:12px; min-height:16px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-footer{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:10px; border-top:1px solid var(--border-soft); font-size:11px; color:var(--muted);
}
.card-footer .openLink{ color:var(--teal); font-weight:600; cursor:pointer; white-space:nowrap; }
.card-footer .openLink:hover{ color:var(--dark-teal); }
.catalogEmpty{ color:var(--muted); font-size:13px; padding:30px 4px; }

/* ── parents (ancestors) popup ── */
#parentsPopup{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); z-index:300; min-width:320px; max-width:90vw;
  max-height:85vh; display:flex; flex-direction:column; overflow:hidden;
  font-size:13px; font-family:inherit;
}
#parentsPopup.maximized{
  left:12px; top:12px; right:12px; bottom:12px; transform:none;
  max-width:none; max-height:none;
}
#parentsPopup.maximized .parentsPopupBody{ flex:1; }
#parentsPopup:not(.maximized) .parentsPopupHeader{ cursor:move; user-select:none; }
.parentsPopupTools{ display:flex; align-items:center; gap:2px; flex-shrink:0; }
.parentsPopupTools button{
  background:none; border:1px solid transparent; border-radius:6px; cursor:pointer;
  font-family:inherit; font-size:15px; line-height:1; color:var(--muted);
  min-width:26px; height:26px; padding:0 6px;
}
.parentsPopupTools button.zoomLabel{ font-size:11.5px; font-weight:600; }
.parentsPopupTools button.closeBtn{ font-size:18px; margin-left:4px; }
.parentsPopupTools button:hover:not(:disabled){ border-color:var(--border); color:var(--dark-teal); background:var(--primary-soft); }
.parentsPopupTools button:disabled{ opacity:.35; cursor:default; }
.parentsPopupHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--border);
  font-weight:600; font-size:13px; color:var(--text); gap:8px;
}
.parentsPopupHeader span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.parentsPopupBody{ padding:14px; overflow:auto; }
.parentsPopupEmpty{ color:var(--muted); font-size:12.5px; padding:8px 2px; }

.miniCardBg{ fill:var(--surface); }
.miniCardBorder{ fill:none; stroke:var(--border); stroke-width:1; }
.miniCardBorder.selfNode{ stroke:var(--dark-teal); stroke-width:2.2; }
.miniCardTitle{ font-weight:600; font-size:11.5px; fill:var(--navy); }
.miniLayerBadgeText{ font-weight:700; font-size:8.5px; fill:#fff; }