/* Network canvas left panel (#graphSidebar): one consistent monochrome system that follows the
 * light/dark console palette. Many controls in this panel carry inline legacy colours (purple
 * gradients, slate cards, translucent white text), hence the !important overrides. */
html[data-color-mode] #graphSidebar.graph-sidebar {
  --sb-fg: var(--console-fg, #fff);
  --sb-bg: var(--console-bg, #000);
  --sb-muted: color-mix(in srgb, var(--sb-fg) 58%, transparent);
  --sb-faint: color-mix(in srgb, var(--sb-fg) 12%, transparent);
  --sb-hover: color-mix(in srgb, var(--sb-fg) 7%, transparent);
  --sb-danger: #ef4444;
  background: var(--sb-bg) !important;
  border-right: 1px solid var(--sb-faint) !important;
  color: var(--sb-fg) !important;
  padding: 62px 16px 24px !important; /* clears the floating logo at the top-left */
  gap: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-faint) transparent;
}

/* Header + tabs */
html[data-color-mode] #graphSidebar .logo {
  font-size: 15px !important; font-weight: 700 !important; letter-spacing: .01em;
  margin: 0 0 2px !important; text-align: left !important;
}
html[data-color-mode] #graphSidebar .sidebar-tabs {
  display: flex !important; gap: 2px !important; padding: 3px !important; margin: 0 !important;
  border: 1px solid var(--sb-faint) !important; border-radius: 9px !important; background: transparent !important;
}
html[data-color-mode] #graphSidebar .sidebar-tab {
  flex: 1 1 0 !important; height: 30px !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 7px !important; background: transparent !important;
  color: var(--sb-muted) !important; font: 600 12px/1 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
  letter-spacing: .02em; box-shadow: none !important; cursor: pointer;
}
html[data-color-mode] #graphSidebar .sidebar-tab:hover { background: var(--sb-hover) !important; color: var(--sb-fg) !important; }
html[data-color-mode] #graphSidebar .sidebar-tab.active { background: var(--sb-fg) !important; color: var(--sb-bg) !important; }

/* Section labels */
html[data-color-mode] #graphSidebar :is(.settings-label, .connections-list-title) {
  display: block; margin: 0 0 8px !important;
  font: 600 10.5px/1.2 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
  letter-spacing: .09em !important; text-transform: uppercase !important;
  color: var(--sb-muted) !important;
}

/* Cards: every grouped block gets the same thin outline instead of slate/grey fills. */
html[data-color-mode] #graphSidebar :is(.panel-content, .connections-list, .connection-research, .sec-sidebar-section,
  .connection-section, .node-actions, #multiSelectActions, #multiEdgeSelectActions, #editNodeSection, #edgeEditPanel, .actions) {
  background: transparent !important;
  border: 1px solid var(--sb-faint) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  margin: 0 0 12px !important;
  box-shadow: none !important;
}
html[data-color-mode] #graphSidebar #nodeInfo .connections-list,
html[data-color-mode] #graphSidebar #nodeInfo .sec-sidebar-section { margin: 12px 0 0 !important; }
html[data-color-mode] #graphSidebar .sidebar-tab-content > :is(.panel-content, .connection-research) { margin-bottom: 12px !important; }

/* Text */
html[data-color-mode] #graphSidebar :is(p, span, label, small, li, td, th, div):not(button *):not(.sidebar-tab) { color: inherit; }
html[data-color-mode] #graphSidebar #nodeInfo .name {
  font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.01em;
  color: var(--sb-fg) !important; margin: 12px 0 6px !important; line-height: 1.2;
}
html[data-color-mode] #graphSidebar #nodeInfo img:not(.company-item img) {
  display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; margin: 8px 0 10px;
}
html[data-color-mode] #graphSidebar #nodeInfo :is(.role, .position, .citizenship, .connection-label) {
  color: var(--sb-muted) !important; font-size: 13px !important; margin: 2px 0 !important;
}
html[data-color-mode] #graphSidebar #nodeInfo :is(.relationship-desc, .wiki-summary) {
  color: var(--sb-fg) !important; font-size: 13px !important; line-height: 1.55 !important; margin: 8px 0 !important;
}
html[data-color-mode] #graphSidebar #nodeInfo .wiki-summary strong { color: var(--sb-muted) !important; font-weight: 600; }
html[data-color-mode] #graphSidebar :is(#connectionParentInfo, #edgeConnectionInfo, .sec-sidebar-section [id^="secSidebarContent_"]) {
  color: var(--sb-muted) !important; font-size: 12.5px !important; line-height: 1.5;
}
html[data-color-mode] #graphSidebar .sec-sidebar-section > div:first-child > div {
  color: var(--sb-fg) !important; font-size: 13px !important; font-weight: 600 !important;
}

/* Buttons */
html[data-color-mode] #graphSidebar :where(.action-btn, .export-btn, .sec-sidebar-section button, .source-link button,
  #findImageBtn, #findLogoBtn, #uploadImageBtn, #addImageLinkBtn, .timeline-dropdown-toggle, .look-deeper-btn, .open-canvas-btn) {
  background: transparent !important;
  color: var(--sb-fg) !important;
  border: 1px solid var(--sb-faint) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font: 600 12.5px/1.2 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background .15s, border-color .15s;
  cursor: pointer;
}
html[data-color-mode] #graphSidebar :where(.action-btn, .export-btn, .sec-sidebar-section button, .source-link button,
  #findImageBtn, #findLogoBtn, #uploadImageBtn, #addImageLinkBtn, .timeline-dropdown-toggle, .look-deeper-btn, .open-canvas-btn):where(:hover:not(:disabled)) {
  background: var(--sb-hover) !important;
  border-color: color-mix(in srgb, var(--sb-fg) 30%, transparent) !important;
}
/* Primary actions: solid */
html[data-color-mode] #graphSidebar :is(.action-btn.primary, #expandConnectionHistoryBtn, #edgeExpandHistoryBtn, #expandConnectionBtn) {
  background: var(--sb-fg) !important; color: var(--sb-bg) !important; border-color: var(--sb-fg) !important;
}
html[data-color-mode] #graphSidebar :is(.action-btn.primary, #expandConnectionHistoryBtn, #edgeExpandHistoryBtn, #expandConnectionBtn):hover:not(:disabled) {
  background: color-mix(in srgb, var(--sb-fg) 85%, var(--sb-bg)) !important;
}
/* Destructive actions: quiet red outline */
html[data-color-mode] #graphSidebar :is(.action-btn.danger, .delete-btn) {
  background: transparent !important; color: var(--sb-danger) !important;
  border: 1px solid color-mix(in srgb, var(--sb-danger) 45%, transparent) !important;
  border-radius: 8px !important; padding: 9px 12px !important; font-weight: 600 !important; width: 100%;
}
html[data-color-mode] #graphSidebar :is(.action-btn.danger, .delete-btn):hover { background: color-mix(in srgb, var(--sb-danger) 10%, transparent) !important; }
html[data-color-mode] #graphSidebar :is(.action-btn, .export-btn):disabled { opacity: .45; cursor: default; }

/* Quick actions under the node name */
#graphSidebar .node-quick-actions { display: flex; gap: 8px; margin: 4px 0 10px; }
#graphSidebar .node-quick-actions .action-btn { flex: 1; }

/* Form controls */
html[data-color-mode] #graphSidebar :is(select, input[type="text"], input[type="url"], input:not([type]), textarea) {
  background: var(--sb-bg) !important;
  color: var(--sb-fg) !important;
  border: 1px solid var(--sb-faint) !important;
  border-radius: 8px !important;
  padding: 9px 10px !important;
  font: 13px/1.3 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
  box-shadow: none !important;
  width: 100%;
}
html[data-color-mode] #graphSidebar :is(select, input, textarea):focus { border-color: var(--sb-fg) !important; outline: none; }
html[data-color-mode] #graphSidebar input[type="checkbox"] { accent-color: var(--sb-fg); width: 15px; height: 15px; flex: none; margin: 0; }

/* Highlight-connections rows */
html[data-color-mode] #graphSidebar .connection-checkbox {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 8px 10px !important; margin: 0 0 6px !important;
  background: transparent !important; border: 1px solid var(--sb-faint) !important; border-radius: 8px !important;
  justify-content: flex-start !important;
}
html[data-color-mode] #graphSidebar .connection-checkbox:hover { background: var(--sb-hover) !important; }
html[data-color-mode] #graphSidebar .connection-checkbox label {
  flex: 1; text-align: left !important; font-size: 13px !important; color: var(--sb-fg) !important; cursor: pointer; margin: 0 !important;
}

/* Timeline entries */
html[data-color-mode] #graphSidebar .sidebar-timeline-event {
  background: transparent !important; padding: 8px 10px !important; margin: 0 0 8px !important;
  border-radius: 0 8px 8px 0 !important;
}
html[data-color-mode] #graphSidebar .sidebar-timeline-date { color: var(--sb-muted) !important; font-size: 11px !important; }
html[data-color-mode] #graphSidebar .sidebar-timeline-title { color: var(--sb-fg) !important; font-size: 13px !important; font-weight: 600 !important; }
html[data-color-mode] #graphSidebar .sidebar-timeline-description { color: var(--sb-muted) !important; font-size: 12.5px !important; }

/* Bottom actions (share / export / import / clear) */
html[data-color-mode] #graphSidebar .actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
html[data-color-mode] #graphSidebar .actions > div { grid-column: 1 / -1; }
html[data-color-mode] #graphSidebar .actions label { color: var(--sb-muted) !important; font-size: 11px !important; }
html[data-color-mode] #graphSidebar .actions :is(#shareBtn, #clearBtn) { grid-column: 1 / -1; }

/* Field labels and checkbox text */
html[data-color-mode] #graphSidebar :is(.form-group > label, .settings-checkbox, .connection-research > label:not(.settings-label), #connectionTimelineDropdown ~ label) {
  font: 600 12px/1.3 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
  color: var(--sb-muted) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html[data-color-mode] #graphSidebar .settings-checkbox { display: flex !important; align-items: center; gap: 8px; color: var(--sb-fg) !important; }
/* Node actions: label on its own row, primary action full width, the rest in two columns. */
html[data-color-mode] #graphSidebar #nodeActions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
html[data-color-mode] #graphSidebar #nodeActions > :is(.settings-label, #expandConnectionBtn, #removeConnectionBtn) { grid-column: 1 / -1; margin: 0 !important; }
html[data-color-mode] #graphSidebar #nodeActions .action-btn { width: 100% !important; margin: 0 !important; }
/* Share slug box inside the bottom actions */
html[data-color-mode] #graphSidebar .actions > div { background: transparent !important; padding: 0 !important; border: 0 !important; }

/* CRM avatar above "Selected Node" (person-investigation.js showNodeAvatar) */
#graphSidebar .node-crm-avatar { margin: 0 0 14px; }
#graphSidebar .node-crm-avatar[hidden] { display: none; }
#graphSidebar .node-crm-avatar-stage {
  position: relative; width: 100%; height: 180px; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--sb-faint, rgba(255,255,255,.12));
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--sb-fg, #fff) 8%, transparent), transparent 70%);
}
#graphSidebar .node-crm-avatar-stage canvas { display: block; width: 100% !important; height: 100% !important; }
html[data-color-mode] #graphSidebar .node-crm-avatar-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0 !important;
  background: none !important; border: 0 !important; cursor: pointer;
  color: var(--sb-muted) !important; font: 600 11px/1.2 -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
  letter-spacing: .08em; text-transform: uppercase;
}
html[data-color-mode] #graphSidebar .node-crm-avatar-link::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
html[data-color-mode] #graphSidebar .node-crm-avatar-link:hover { color: var(--sb-fg) !important; }