/* ── PROJECT-SPECIFIC CSS — table-deps project DAG ── */

/* ── LAYOUT: collapsible sidebar + DAG ─── */
#sidebar {
  width: 270px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-width 0.3s ease;
  overflow: hidden;
}
#sidebar.collapsed {
  width: 0; min-width: 0;
  padding: 0;
  border-right-width: 0;
  overflow: hidden;
}

/* Sidebar toggle button */
#sidebar-toggle {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 16;
  width: 32px; height: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
#sidebar-toggle:hover { background: var(--surface2); }

/* ── Navigation button to SQL Visualizer ── */
.nav-btn {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 12px 0; padding: 10px 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface2)), var(--surface2));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 8px;
  color: var(--accent); font-size: 13px; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
}
.nav-btn:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--surface2)), var(--surface2));
  border-color: var(--accent);
}
.nav-btn:active { transform: scale(0.98); }
.nav-btn svg { flex-shrink: 0; opacity: 0.8; }
.nav-btn .nav-arrow {
  margin-left: auto; font-size: 14px; opacity: 0.5;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-btn:hover .nav-arrow { transform: translateX(3px); opacity: 1; }

/* Header elements specific to project page */
.header-sub { font-size: 12px; color: var(--muted); }
#project-badge {
  display: none; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 10px; font-size: 11px; font-family: monospace; color: var(--accent);
}

/* Drop zone */
#drop-zone {
  border: 2px dashed var(--border); border-radius: 8px; padding: 16px 10px;
  text-align: center; cursor: pointer; background: var(--surface2);
  transition: border-color 0.2s, background 0.2s;
}
#drop-zone:hover, #drop-zone.over { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 8%,var(--surface2)); }
#drop-zone.loaded { border-style: solid; border-color: var(--accent); }
#drop-zone .dz-icon  { font-size: 22px; margin-bottom: 5px; }
#drop-zone .dz-label { font-size: 12px; font-weight: 600; color: var(--text); }
#drop-zone .dz-hint  { font-size: 10px; color: var(--muted); margin-top: 3px; }

#open-btn    { flex: 1; background: var(--accent); color: #0d1117; }
#example-btn { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
#clear-btn   { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); padding: 7px 10px; }
#compat-warn {
  display: none; margin-top: 8px; font-size: 10px; color: var(--orange);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 4px; padding: 6px 8px;
}

/* Table list badge (project-specific lv-badge) */
#table-list li {
  cursor: pointer;
  border-left: 3px solid transparent;
  gap: 7px;
}
#table-list li.hl { background: var(--border); }
#table-list li .lv-badge {
  margin-left: auto; font-size: 9px; color: var(--muted);
  background: var(--border); border-radius: 3px; padding: 1px 4px; white-space: nowrap;
}

/* Tooltip extra fields */
#tooltip .tt-file { font-size: 10px; color: var(--muted); font-family: monospace; margin-bottom: 8px; }
#tooltip { min-width: 200px; }

/* ── Search box ──────────────────────────────────── */
#search-box {
  position: absolute; bottom: 180px; right: 16px;
  display: none; flex-direction: column; gap: 4px; z-index: 10;
}
#search-box.visible { display: flex; }
#search-wrap {
  display: flex; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 8px;
}
#search-input {
  background: transparent; border: none; outline: none;
  color: var(--text); font-size: 12px; width: 170px;
}
#search-input::placeholder { color: var(--muted); }
#search-count { font-size: 10px; color: var(--muted); white-space: nowrap; }
#search-nav { display: flex; gap: 4px; }
#search-nav .ctrl-btn { width: 28px; height: 28px; font-size: 13px; }

/* Current search match ring */
.box-node.search-cur .node-bg { filter: brightness(1.35) drop-shadow(0 0 10px #f0b429) !important; }

/* ── SVG node + edge styles ──────────────────────── */
.edge      { stroke: #94a3b8; stroke-width: 1.5; fill: none; stroke-opacity: 0.55; }
.edge.faded{ stroke-opacity: 0.07; }
.edge.hl   { stroke-opacity: 1;  stroke-width: 2.5; stroke: #58a6ff; }

.box-node          { cursor: grab; }
.box-node.grabbing { cursor: grabbing !important; }
.box-node.faded    { opacity: 0.12; pointer-events: none; }
.box-node.hl .node-bg { filter: brightness(1.18); }
.box-node.grabbing .node-bg { filter: drop-shadow(0 0 8px currentColor) brightness(1.25); }