/* The searchable dropdown used for layers, sensitivity, employees and parents. */

/* ── searchable dropdown ── */
.searchDdl{ position:relative; display:inline-block; }
.searchDdlInput{ min-width:200px; font-weight:500; cursor:text; }
.searchDdlList{
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  min-width:100%;
  max-height:260px;
  overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);
  z-index:100;
}
.searchDdlItem{
  padding:8px 14px;
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
}
.searchDdlItem:hover{ background:var(--primary-soft); color:var(--link); }
.searchDdlClear{ color:var(--muted); font-style:italic; border-bottom:1px solid var(--border-soft); }
.searchDdlNoResult{ color:var(--muted); font-style:italic; cursor:default; }

button.btnIconClear{
  padding:6px 12px;
  font-size:12.5px;
  color:var(--muted);
  line-height:1;
  border-radius:var(--radius-sm);
}

#legend{
  padding:10px 22px;
  font-size:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.legendItem{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--bg);
  border:1px solid var(--border);
  font-weight:500;
  color:var(--muted);
}
.legendBox{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }

#meta{
  color:var(--muted);
  font-size:12px;
  font-weight:500;
  align-self:center;
  margin-left:auto;
}

#wrap{
  display:grid;
  /* The detail panel holds a short list of key/value rows, so it takes a fixed
     column and the diagram gets everything else. A proportional 1fr gave it
     ~38% of the window for text that needs a fraction of that. */
  grid-template-columns: minmax(0, 1fr) 260px;
  /* minmax(0,1fr), not 1fr: an auto row would size itself to the full table and
     defeat the whole arrangement. */
  grid-template-rows: minmax(0, 1fr);
  gap:16px;
  padding:18px;
  flex:1 1 auto;
  min-height:0;
}
@media (max-width:1100px){
  #wrap{ grid-template-columns: minmax(0, 1fr) 220px; }
}
#wrap.tableFullscreen{
  grid-template-columns: 1fr;
}
#wrap.tableFullscreen #svgWrap{
  display:none;
}
#wrap.diagramFullscreen{
  grid-template-columns: 1fr;
}
#wrap.diagramFullscreen #panel{
  display:none;
}

#svgWrap{
  background-color:var(--surface);
  /* dotted grid, so panning reads as movement across a surface */
  background-image:radial-gradient(circle at 1px 1px, var(--border-soft) 1px, transparent 1px);
  background-size:24px 24px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  height:100%;
  min-height:0;
  overflow:hidden;
  cursor:grab;
  position:relative;
}
#svgWrap:active{ cursor:grabbing; }

#panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  height:100%;
  min-height:0;
  overflow:auto;
}

#panel::-webkit-scrollbar, #svgWrap::-webkit-scrollbar{ width:9px; height:9px; }
#panel::-webkit-scrollbar-track, #svgWrap::-webkit-scrollbar-track{ background:transparent; }
#panel::-webkit-scrollbar-thumb, #svgWrap::-webkit-scrollbar-thumb{ background:#d5dbe3; border-radius:8px; }
#panel::-webkit-scrollbar-thumb:hover, #svgWrap::-webkit-scrollbar-thumb:hover{ background:#c4cad6; }

table{
  width:100%;
  border-collapse:collapse;
  font-size:12.5px;
}
th,td{
  padding:10px 12px;
  border-bottom:1px solid var(--border-soft);
  text-align:left;
  vertical-align:top;
}
th{
  background:#fafbfd;
  color:var(--muted);
  font-weight:600;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.04em;
  position:sticky;
  top:0;
  z-index:1;
  border-bottom:1px solid var(--border);
}
.sortableTh{ cursor:pointer; user-select:none; white-space:nowrap; }
.sortableTh:hover{ color:var(--dark-teal); background:var(--primary-soft); }
.sortableTh.sortActive{ color:var(--dark-teal); }
tr:hover{ background:var(--primary-soft); cursor:pointer; }

td[contenteditable="true"]:focus{
  outline:2px solid var(--primary);
  background:var(--primary-soft);
  cursor:text;
}
tr.newRow{ background:#f0fdf4; }

tr.rowPinnedOutside{
  outline:2px dashed #f59e0b;
  outline-offset:-2px;
  background:#fffbeb;
}
.nodePinnedOutside .nodeCard{
  stroke:var(--warn);
  stroke-width:2.4;
  stroke-dasharray:6,4;
}

#tbl tbody td[data-col]{
  /* Clears the sticky header when a cell is scrolled into view from below. */
  scroll-margin-top:34px;
  scroll-margin-bottom:4px;
}
#tbl tbody td[data-col]:focus{
  outline:2px solid var(--teal);
  outline-offset:-2px;
  background:var(--primary-soft);
}

.parentsCell,
.pickerCell{
  cursor:pointer;
  color:var(--link);
  text-decoration:underline dotted;
}
.parentsCell:hover,
.pickerCell:hover{ background:var(--primary-soft); }

/* ── header filters (Overview + Lineage) ── */
.filterWrap{ position:relative; display:inline-block; }
button.btnFilter, button.btnClearFilters{
  display:inline-flex;
  align-items:center;
  gap:7px;
  line-height:1;
}
button.btnFilter svg, button.btnClearFilters svg{ flex-shrink:0; }
/* Lit up while a filter is on, so a narrowed dashboard never passes for the whole picture. */
button.btnFilter.active{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
}
button.btnFilter.active:hover{ background:var(--primary-hover); color:#fff; }
button.btnClearFilters{ padding:7px 10px; }
button.btnClearFilters:disabled{ opacity:.4; cursor:default; }
button.btnClearFilters:disabled:hover{ background:var(--surface); border-color:var(--border); }

.filterPanel{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  width:260px;
  padding:12px;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  z-index:100;
}
.filterPanel.open{ display:block; }
.filterPanelHead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:12px;
  font-weight:600;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--dark-teal);
  margin-bottom:8px;
}
.filterPanelHint{ font-weight:500; text-transform:none; letter-spacing:0; color:var(--muted); }
/* The global input style is the dark header pill; this one sits on a light panel. */
.filterPanel input.filterSearch{
  width:100%;
  padding:7px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  font-weight:500;
  margin-bottom:6px;
}
.filterPanel input.filterSearch::placeholder{ color:var(--muted); }
.filterOptions{ max-height:280px; overflow-y:auto; margin:0 -4px; }
.filterOption{
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 8px;
  border-radius:var(--radius-sm);
  font-size:13px;
  cursor:pointer;
}
.filterOption:hover{ background:var(--primary-soft); }
.filterPanel .filterOption input[type=checkbox]{
  padding:0;
  margin:0;
  width:15px;
  height:15px;
  accent-color:var(--teal);
  cursor:pointer;
}
.filterOptionName{ flex:1; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filterOptionCount{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.filterToggle{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:8px;
  padding:10px 4px 2px;
  border-top:1px solid var(--border-soft);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
}
.filterPanel .filterToggle input[type=checkbox]{
  padding:0;
  margin:2px 0 0;
  width:15px;
  height:15px;
  accent-color:var(--teal);
  cursor:pointer;
  flex-shrink:0;
}
.filterToggle small{ display:block; font-size:11.5px; font-weight:400; color:var(--muted); margin-top:2px; }
.filterEmpty{ padding:8px; font-size:13px; font-style:italic; color:var(--muted); }

/* Inside the diagram pane the legend floats at the bottom edge as one compact
   strip, instead of sitting under the diagram at whatever height it happens to
   end. Too many layers scroll sideways rather than adding rows. */
#svgWrap #legend{
  position:absolute;
  left:36px;
  bottom:12px;
  z-index:5;
  width:max-content;
  max-width:calc(100% - 72px);
  padding:6px 8px;
  gap:6px;
  flex-wrap:nowrap;
  align-items:flex-end;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);
  box-shadow:var(--shadow-sm);
  cursor:default;
}
#svgWrap .legendItems{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-width:0;
  flex:1 1 auto;
}
/* Collapsed: exactly one row; layoutLegend() counts what wrapped below it. */
#svgWrap #legend.legendCollapsed .legendItems{ max-height:22px; overflow:hidden; }
#svgWrap button.legendMore{
  flex:none;
  padding:2px 9px;
  font-size:11px;
  font-weight:600;
  line-height:16px;
  border-radius:999px;
  border:1px solid var(--teal);
  background:var(--primary-soft);
  color:var(--link);
}
#svgWrap button.legendMore:hover{ background:var(--teal); color:#fff; }
#svgWrap #legend .legendItem{
  padding:2px 8px;
  font-size:11px;
  white-space:nowrap;
  flex-shrink:0;
}

/* The canvas fills the whole pane. render() sizes it to the laid-out diagram,
   which for a small filtered view is a strip near the top — anything panned or
   zoomed past that edge was clipped. Pan/zoom works on #viewport's transform
   and export uses getBBox(), so neither depends on the element's own size. */
#svgWrap > #svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}