/* RapidRTL Schematic & Canvas Stylesheet */

#schematic-container {
  flex: 1;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  /* Dot grid pattern */
  background-color: var(--bg-canvas);
  background-image: radial-gradient(var(--grid-dot) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
}

#schematic-svg-host {
  width: 100%;
  height: 100%;
  cursor: grab;
}

#schematic-svg-host:active {
  cursor: grabbing;
}

/* Schematic Header Controls Toolbar (Integrated cleanly into Pane Header) */
.schematic-toolbar {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 4px;
  user-select: none;
  height: 24px;
  box-sizing: border-box;
}

.schematic-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 22px;
  height: 20px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.schematic-btn:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

.schematic-btn.active {
  background: var(--accent-highlight);
  color: #000;
  font-weight: bold;
}

#btn-download-svg,
#btn-download-png {
  width: auto !important;
  padding: 0 5px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
}

.schematic-btn-separator {
  width: 1px;
  height: 14px;
  background: var(--border-color);
  margin: 0 2px;
}

body.theme-light .schematic-toolbar {
  background: rgba(0, 0, 0, 0.03);
  border-color: #d0d7de;
}

body.theme-light .schematic-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* Hierarchy Breadcrumbs bar */
#hierarchy-breadcrumb {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--bg-pane);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 14px var(--shadow-color);
  z-index: 50;
  user-select: none;
}

.breadcrumb-crumb {
  color: var(--accent-primary);
  cursor: pointer;
  text-decoration: none;
}

.breadcrumb-crumb:hover {
  text-decoration: underline;
}

.breadcrumb-sep {
  color: var(--text-muted);
  font-size: 10px;
}

.breadcrumb-current {
  color: var(--text-main);
}

.breadcrumb-back-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-main);
  padding: 2px 6px;
  font-size: 11px;
  cursor: pointer;
  margin-right: 4px;
}

.breadcrumb-back-btn:hover {
  background: var(--bg-hover);
}

/* Circuit SVG Styling */
svg.rapidrtl-circuit {
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease-out;
}

/* Dark theme SVG colors */
body:not(.theme-light) svg.rapidrtl-circuit line,
body:not(.theme-light) svg.rapidrtl-circuit path,
body:not(.theme-light) svg.rapidrtl-circuit circle,
body:not(.theme-light) svg.rapidrtl-circuit rect,
body:not(.theme-light) svg.rapidrtl-circuit polygon {
  stroke: #c9d1d9 !important;
}

body:not(.theme-light) svg.rapidrtl-circuit text {
  fill: #e6edf3 !important;
  stroke: none !important;
}

body:not(.theme-light) svg.rapidrtl-circuit .splitjoinBody {
  fill: #c9d1d9 !important;
  stroke: #c9d1d9 !important;
}

/* Light theme SVG colors */
body.theme-light svg.rapidrtl-circuit line,
body.theme-light svg.rapidrtl-circuit path,
body.theme-light svg.rapidrtl-circuit circle,
body.theme-light svg.rapidrtl-circuit rect,
body.theme-light svg.rapidrtl-circuit polygon {
  stroke: #1f2328 !important;
}

body.theme-light svg.rapidrtl-circuit text {
  fill: #1f2328 !important;
  stroke: none !important;
}

body.theme-light svg.rapidrtl-circuit .splitjoinBody {
  fill: #1f2328 !important;
  stroke: #1f2328 !important;
}

/* Solid junction connection dots on net branches */
body:not(.theme-light) svg.rapidrtl-circuit circle.junction-dot,
body:not(.theme-light) svg.rapidrtl-circuit .junction-dots circle,
body:not(.theme-light) svg.rapidrtl-circuit circle[data-net-id] {
  fill: #c9d1d9 !important;
  stroke: #c9d1d9 !important;
}

body.theme-light svg.rapidrtl-circuit circle.junction-dot,
body.theme-light svg.rapidrtl-circuit .junction-dots circle,
body.theme-light svg.rapidrtl-circuit circle[data-net-id] {
  fill: #1f2328 !important;
  stroke: #1f2328 !important;
}

/* Color Input and Output Ports (when setting enabled) */
body:not(.theme-light) svg.rapidrtl-circuit.colored-ports .input-port-cell path,
body:not(.theme-light) svg.rapidrtl-circuit.colored-ports g[s\:type="inputExt"] path,
body:not(.theme-light) svg.rapidrtl-circuit.colored-ports .port-input path {
  stroke: #2ea043 !important;
  fill: rgba(46, 160, 67, 0.25) !important;
  stroke-width: 1.5px !important;
}

body:not(.theme-light) svg.rapidrtl-circuit.colored-ports .input-port-cell text,
body:not(.theme-light) svg.rapidrtl-circuit.colored-ports g[s\:type="inputExt"] text,
body:not(.theme-light) svg.rapidrtl-circuit.colored-ports .port-input text {
  fill: #3fb950 !important;
  font-weight: bold !important;
}

body.theme-light svg.rapidrtl-circuit.colored-ports .input-port-cell path,
body.theme-light svg.rapidrtl-circuit.colored-ports g[s\:type="inputExt"] path,
body.theme-light svg.rapidrtl-circuit.colored-ports .port-input path {
  stroke: #1a7f37 !important;
  fill: rgba(46, 160, 67, 0.15) !important;
  stroke-width: 1.5px !important;
}

body.theme-light svg.rapidrtl-circuit.colored-ports .input-port-cell text,
body.theme-light svg.rapidrtl-circuit.colored-ports g[s\:type="inputExt"] text,
body.theme-light svg.rapidrtl-circuit.colored-ports .port-input text {
  fill: #1a7f37 !important;
  font-weight: bold !important;
}

body:not(.theme-light) svg.rapidrtl-circuit.colored-ports .output-port-cell path,
body:not(.theme-light) svg.rapidrtl-circuit.colored-ports g[s\:type="outputExt"] path,
body:not(.theme-light) svg.rapidrtl-circuit.colored-ports .port-output path {
  stroke: #f85149 !important;
  fill: rgba(248, 81, 73, 0.25) !important;
  stroke-width: 1.5px !important;
}

body:not(.theme-light) svg.rapidrtl-circuit.colored-ports .output-port-cell text,
body:not(.theme-light) svg.rapidrtl-circuit.colored-ports g[s\:type="outputExt"] text,
body:not(.theme-light) svg.rapidrtl-circuit.colored-ports .port-output text {
  fill: #ff7b72 !important;
  font-weight: bold !important;
}

body.theme-light svg.rapidrtl-circuit.colored-ports .output-port-cell path,
body.theme-light svg.rapidrtl-circuit.colored-ports g[s\:type="outputExt"] path,
body.theme-light svg.rapidrtl-circuit.colored-ports .port-output path {
  stroke: #cf222e !important;
  fill: rgba(248, 81, 73, 0.15) !important;
  stroke-width: 1.5px !important;
}

body.theme-light svg.rapidrtl-circuit.colored-ports .output-port-cell text,
body.theme-light svg.rapidrtl-circuit.colored-ports g[s\:type="outputExt"] text,
body.theme-light svg.rapidrtl-circuit.colored-ports .port-output text {
  fill: #cf222e !important;
  font-weight: bold !important;
}

/* Conditional IF (Aldec Simulator parity): internal tags must be deep crisp black for maximum contrast on grey rect */
svg.rapidrtl-circuit rect.cond-if-rect,
body:not(.theme-light) svg.rapidrtl-circuit rect.cond-if-rect,
body.theme-light svg.rapidrtl-circuit rect.cond-if-rect {
  fill: #b8bec8 !important;
  stroke: #2c3e50 !important;
  stroke-width: 1.5px !important;
}

svg.rapidrtl-circuit text.cond-if-tag,
body:not(.theme-light) svg.rapidrtl-circuit text.cond-if-tag,
body.theme-light svg.rapidrtl-circuit text.cond-if-tag {
  fill: #000000 !important;
  font-weight: 700 !important;
  font-style: italic !important;
  stroke: none !important;
}

svg.rapidrtl-circuit text.cond-if-data,
body:not(.theme-light) svg.rapidrtl-circuit text.cond-if-data,
body.theme-light svg.rapidrtl-circuit text.cond-if-data {
  fill: #1e293b !important;
  font-weight: 700 !important;
  font-style: normal !important;
  stroke: none !important;
}

/* Count Register (Counter) High-Level Component */
svg.rapidrtl-circuit rect.count-reg-rect,
body:not(.theme-light) svg.rapidrtl-circuit rect.count-reg-rect {
  fill: #1e293b !important;
  stroke: #38bdf8 !important;
  stroke-width: 1.5px !important;
}

body.theme-light svg.rapidrtl-circuit rect.count-reg-rect {
  fill: #f0f9ff !important;
  stroke: #0284c7 !important;
  stroke-width: 1.5px !important;
}

svg.rapidrtl-circuit text.count-reg-title,
body:not(.theme-light) svg.rapidrtl-circuit text.count-reg-title {
  fill: #38bdf8 !important;
  font-weight: 700 !important;
  font-size: 9.5px !important;
  stroke: none !important;
}

body.theme-light svg.rapidrtl-circuit text.count-reg-title {
  fill: #0369a1 !important;
  font-weight: 700 !important;
  font-size: 9.5px !important;
  stroke: none !important;
}

/* Interactive Cell Groups */
.schematic-cell {
  cursor: pointer;
  transition: filter 0.15s ease;
}

.schematic-cell:hover {
  filter: drop-shadow(0 0 4px var(--accent-wire));
}

.schematic-cell.selected {
  /* Warm orange glow matching hierarchy.png screenshot */
  filter: drop-shadow(0 0 7px #ff9800) drop-shadow(0 0 12px #f0883e) !important;
}

.schematic-cell.selected * {
  stroke: #ff9800 !important;
}

/* Submodule cells have special border and visual cursor hint */
.schematic-cell.submodule-cell {
  cursor: zoom-in;
}

.schematic-cell.submodule-cell:hover {
  filter: drop-shadow(0 0 6px #64ffda);
}

/* Critical Path Vivid Cyan Glowing Route (matching RapidRTL) */
.critical-path-active .schematic-cell:not(.critical-cell):not(.critpath-cell) {
  opacity: 0.22;
  transition: opacity 0.25s ease;
}

.critical-path-active svg.rapidrtl-circuit line:not(.critical-wire):not(.critpath-wire),
.critical-path-active svg.rapidrtl-circuit path:not(.critical-wire):not(.critpath-wire) {
  opacity: 0.20;
}

.critical-cell, .critpath-cell {
  filter: drop-shadow(0 0 8px #00e5ff) drop-shadow(0 0 14px rgba(0, 229, 255, 0.7)) !important;
  opacity: 1 !important;
}

.critical-cell path, .critical-cell rect, .critical-cell circle, .critical-cell polygon,
.critpath-cell path, .critpath-cell rect, .critpath-cell circle, .critpath-cell polygon {
  stroke: #00e5ff !important;
  stroke-width: 2.5px !important;
}

.critical-wire, .critpath-wire {
  stroke: #00e5ff !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 6px #00e5ff) drop-shadow(0 0 10px rgba(0, 229, 255, 0.8)) !important;
  opacity: 1 !important;
}
circle.junction-dot.critical-wire,
.critical-wire circle.junction-dot,
circle.junction-dot.critpath-wire,
.critpath-wire circle.junction-dot,
.critical-path-active circle[data-net-id].critical-wire {
  stroke: #00e5ff !important;
  fill: #00e5ff !important;
}

/* Signal Tracing (Schematic Wire Highlight) */
.signal-traced-net {
  stroke: #ffab00 !important;
  stroke-width: 3.5px !important;
  filter: drop-shadow(0 0 8px #ffab00) drop-shadow(0 0 14px rgba(255, 171, 0, 0.75)) !important;
  opacity: 1 !important;
}
circle.junction-dot.signal-traced-net,
.signal-traced-net circle.junction-dot {
  stroke: #ffab00 !important;
  fill: #ffab00 !important;
}

.critical-cell text {
  fill: #00e5ff !important;
  font-weight: 700 !important;
}

/* Floating Critical Path Timing Card (Draggable anywhere) */
.critpath-card {
  position: fixed;
  top: 65px;
  left: 60px;
  width: 380px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 100px);
  background: rgba(13, 17, 23, 0.95);
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: box-shadow 0.2s ease, width 0.2s ease;
}

.critpath-card.minimized {
  width: 280px;
}

.critpath-card.minimized .critpath-body {
  display: none !important;
}

.critpath-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(22, 27, 34, 0.95);
  border-bottom: 1px solid #30363d;
  cursor: grab;
  user-select: none;
}

.critpath-header.is-dragging {
  cursor: grabbing !important;
}

.critpath-drag-handle {
  color: #8b949e;
  font-size: 14px;
  margin-right: 4px;
  cursor: grab;
}

.critpath-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #c9d1d9;
}

.critpath-bolt {
  color: #00e5ff;
  font-size: 14px;
}

.critpath-header-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.critpath-btn, .critpath-close {
  background: transparent;
  border: none;
  color: #8b949e;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}

.critpath-btn:hover, .critpath-close:hover {
  color: #f0f6fc;
  background: rgba(255,255,255,0.12);
}

.critpath-body {
  padding: 14px;
  overflow-y: auto;
  font-size: 12px;
  color: #c9d1d9;
}

.cp-kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.cp-kpi-card {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
}

.cp-kpi-label {
  font-size: 10px;
  font-weight: 700;
  color: #8b949e;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.cp-kpi-val {
  font-size: 15px;
  font-weight: 700;
  color: #f0f6fc;
}

.cp-positive { color: #3fb950; }
.cp-negative { color: #f85149; }

.cp-subtext {
  font-size: 10.5px;
  color: #8b949e;
  line-height: 1.4;
  margin-bottom: 10px;
}

.cp-badges-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.cp-badge {
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10.5px;
  color: #c9d1d9;
}

.cp-badge strong { color: #58a6ff; }

.cp-clock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 11.5px;
}

.cp-clock-input {
  width: 55px;
  background: #0d1117;
  border: 1px solid #30363d;
  color: #f0f6fc;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11.5px;
  text-align: center;
}

.cp-clock-unit {
  color: #8b949e;
  font-size: 11px;
}

.cp-from-to {
  font-size: 11px;
  color: #8b949e;
  line-height: 1.5;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #21262d;
}
.cp-from-to strong, .cp-from-to span { color: #c9d1d9; font-weight: 600; }

.cp-accordion-header {
  font-size: 11px;
  color: #58a6ff;
  cursor: pointer;
  margin-bottom: 8px;
  user-select: none;
}
.cp-accordion-header:hover { text-decoration: underline; }

.cp-near-container {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 4px;
  padding: 6px;
  margin-bottom: 10px;
}
.cp-near-item {
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
}
.cp-near-item:hover { background: #21262d; }
.cp-near-item.active { background: rgba(0, 229, 255, 0.15); color: #00e5ff; font-weight: 600; }

.cp-stages-summary {
  font-size: 11px;
  color: #8b949e;
  margin-bottom: 6px;
  font-weight: 500;
}

.cp-table-wrapper {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #21262d;
  border-radius: 4px;
  margin-bottom: 10px;
}

.cp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.cp-table th {
  background: #161b22;
  color: #8b949e;
  font-weight: 600;
  padding: 5px 8px;
  border-bottom: 1px solid #21262d;
  text-align: left;
}

.cp-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #161b22;
  color: #c9d1d9;
}

.cp-table tr:hover { background: #161b22; }

.cp-arrow-up { color: #3fb950; font-weight: bold; margin-right: 4px; }
.cp-arrow-down { color: #f85149; font-weight: bold; margin-right: 4px; }

.cp-cell-label { font-weight: 600; color: #f0f6fc; }
.cp-cell-model { font-size: 10px; color: #8b949e; font-family: monospace; }

.cp-footer {
  font-size: 10px;
  color: #8b949e;
  text-align: center;
  margin-top: 6px;
}

/* Floating Cell Inspector Popover */
.cell-inspector-card {
  position: absolute;
  bottom: 16px;
  left: 16px;
  width: 320px;
  max-height: 380px;
  background: rgba(13, 17, 23, 0.95);
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  z-index: 85;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 12px;
}

.inspector-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #161b22;
  border-bottom: 1px solid #30363d;
}

.inspector-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #f0f6fc;
}

.inspector-card-body {
  padding: 12px;
  overflow-y: auto;
}

.ci-section-title {
  font-size: 10px;
  font-weight: 700;
  color: #8b949e;
  letter-spacing: 0.5px;
  margin: 8px 0 4px 0;
}

.ci-why-box {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 11px;
  color: #c9d1d9;
  line-height: 1.4;
}

.ci-ports-list {
  font-size: 11px;
  color: #8b949e;
  font-family: monospace;
}

.ci-gate-container {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 4px;
  padding: 6px;
  display: flex;
  justify-content: center;
}

/* Canvas Hint */
.canvas-hint {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
  pointer-events: none;
  user-select: none;
  text-align: right;
}

@media (max-width: 768px) {
  .canvas-hint {
    display: none !important;
  }
}

/* Light Theme overrides for Critical Path Card */
body.theme-light .critpath-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #d0d7de;
  box-shadow: 0 12px 32px rgba(140, 149, 159, 0.35);
}

body.theme-light .critpath-header {
  background: #f6f8fa;
  border-bottom: 1px solid #d0d7de;
}

body.theme-light .critpath-title {
  color: #1f2328;
}

body.theme-light .critpath-body {
  color: #1f2328;
}

body.theme-light .cp-kpi-card {
  background: #f6f8fa;
  border-color: #d0d7de;
}

body.theme-light .cp-kpi-val {
  color: #1f2328;
}

body.theme-light .cp-badge {
  background: #f6f8fa;
  border-color: #d0d7de;
  color: #57606a;
}

body.theme-light .cp-clock-input {
  background: #ffffff;
  border-color: #d0d7de;
  color: #1f2328;
}

body.theme-light .cp-near-container {
  background: #f6f8fa;
  border-color: #d0d7de;
}

body.theme-light .cp-near-item:hover {
  background: #eaeef2;
}

body.theme-light .cp-table th {
  background: #f6f8fa;
  color: #57606a;
  border-color: #d0d7de;
}

body.theme-light .cp-table td {
  color: #1f2328;
  border-color: #f6f8fa;
}

body.theme-light .cp-cell-label {
  color: #1f2328;
}