/* TurtleNet ARCCC Workspace V1
 * Approved visual target:
 * flat VSCodium-like shell + light diagram-first architecture canvas.
 * No gradients. Existing interaction landmarks remain in their established zones.
 */

:root {
  --bg: #1b1b1f;
  --panel: #202127;
  --panel-2: #25262d;
  --panel-3: #2a2c34;
  --line: #34363f;
  --line-soft: #2b2d35;
  --muted: #9a9da7;
  --muted-2: #747781;
  --text: #ededf0;
  --accent: #3794ff;
  --accent-strong: #2585e8;
  --accent-soft: #203247;
  --ok: #56ba8a;
  --warn: #d6b25f;
  --danger: #d96f78;
  --rail: 66px;
  --topbar: 52px;

  --tn-v3-nav-width: 350px;
  --tn-v3-inspector-width: 400px;
  --tn-v3-drafting: #f4f7f9;
  --tn-v3-drafting-grid: #dfe7ec;
  --tn-v3-ink: #1d2c36;
  --tn-v3-muted: #627481;
  --tn-v3-line: #b8c5ce;
  --tn-v3-line-strong: #8fa3b1;
  --tn-v3-surface: #ffffff;
  --tn-v3-surface-2: #eef3f6;
  --tn-v3-accent: #377fae;
  --tn-v3-accent-soft: #dcebf5;
}

html,
body,
.app-shell,
.workspace-content {
  background: #1b1b1f !important;
  color: var(--text);
}

.topbar,
.tool-rail,
#topologyView .map-commandbar,
#topologyView .baseline-strip,
.architecture-blade-strip,
.architecture-navigator,
.architecture-lens-strip,
.topology-workspace.architect-workspace-v3 > .side-pane,
.topology-workspace.architect-workspace-v3 .side-pane-heading,
.button,
.icon-button,
.user-chip,
.context-pill,
.trial-badge {
  background-image: none !important;
}

.topbar {
  height: var(--topbar);
  border-bottom: 1px solid #33353d;
  background: #1b1b1f !important;
  box-shadow: none;
}

.topbar .context-pill,
.topbar .user-chip,
.topbar .trial-badge {
  border-radius: 4px !important;
  background: #202127 !important;
  box-shadow: none !important;
}

.topbar .context-pill {
  border-color: #353741;
  color: #b6c1ca;
}

.topbar .context-pill.muted { color: #7f8f9b; }
.topbar .user-chip { border-color: #353741; }

.user-avatar {
  border-radius: 3px;
  background: #20384b;
  color: #9dcae8;
  border-color: #365b74;
}

.workspace-frame { background: #1b1b1f; }

.tool-rail {
  padding: 7px 6px;
  border-right: 1px solid #33353d;
  background: #18191e !important;
  gap: 4px;
}

.tool-button {
  width: 52px;
  min-height: 49px;
  border-radius: 4px !important;
  color: #7f909c;
  background: transparent !important;
}

.tool-button:hover {
  color: #dce5eb;
  border-color: #383b45;
  background: #18232d !important;
}

.tool-button.active {
  color: #eef5f8 !important;
  border-color: #3d4650 !important;
  background: #1b2a35 !important;
  box-shadow: inset 3px 0 0 #4f9ddd !important;
}

.tool-glyph { font-size: 1.08rem; }
.tool-label { font-size: .56rem; color: inherit; }

#topologyView.active {
  grid-template-rows: auto auto 42px minmax(0, 1fr);
  background: #1b1b1f;
}

/* Guided setup remains in the same top workspace zone, but reads as a
   deliberate three-step workflow instead of a report toolbar. */
#topologyView .map-commandbar {
  min-height: 58px;
  grid-template-columns: minmax(205px, auto) minmax(300px, 1fr) auto;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid #34363f;
  background: #202127 !important;
}

.connection-command,
.subscription-field {
  position: relative;
  min-height: 58px;
  align-content: center;
  padding: 8px 14px 8px 48px;
  border-right: 1px solid #34363f;
}

.connection-command::before,
.subscription-field::before {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid #496170;
  border-radius: 50%;
  color: #9eb4c2;
  background: #1b1b1f;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.connection-command::before { content: "1"; }
.subscription-field::before { content: "2"; }

.connection-command:has(#connectAzureButton.v3-guidance-complete)::before,
.subscription-field.v3-guidance-complete::before {
  content: "✓";
  border-color: #397457;
  color: #69c994;
  background: #15251d;
}

.connection-command { gap: 8px; }

.connection-command .status {
  order: 2;
  border-radius: 3px;
}

#connectAzureButton {
  order: 1;
  min-width: 92px;
}

.subscription-field {
  grid-template-columns: auto minmax(190px, 1fr);
  gap: 10px;
}

.subscription-field > span {
  color: #b9c4cc;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .055em;
}

.subscription-field select,
.architecture-search {
  border-radius: 3px !important;
  border-color: #3b3d47;
  background: #1a1b20 !important;
  color: #e2e9ee;
  box-shadow: none !important;
}

.map-actions {
  min-height: 58px;
  padding: 8px 12px;
  gap: 6px;
  justify-content: flex-end;
}

.map-actions .button,
.map-actions .icon-button {
  border-radius: 3px !important;
  box-shadow: none !important;
}

#discoverButton {
  position: relative;
  padding-left: 32px;
}

#discoverButton::before {
  content: "3";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  font: 700 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

#discoverButton.workflow-complete::before,
#discoverButton.v3-guidance-complete::before {
  content: "✓";
}

.button,
.icon-button {
  border-radius: 3px !important;
  box-shadow: none !important;
}

.button.primary {
  background: #0e639c !important;
  border-color: #438fb9 !important;
}

.button.secondary,
.button.ghost,
.icon-button {
  background: #18232d !important;
  border-color: #3a3c46 !important;
  color: #c4d0d8 !important;
}

.button:hover:not(:disabled),
.icon-button:hover:not(:disabled) {
  filter: none;
  border-color: #4c687b !important;
  background: #1e2d38 !important;
}

#topologyView .baseline-strip {
  min-height: 34px;
  padding: 4px 12px;
  border-bottom: 1px solid #30323a;
  background: #1c1d22 !important;
}

.progress {
  height: 3px;
  border-radius: 0;
  background: #0d141a;
}

.progress-bar { background: #4f9ddd !important; }

.architecture-blade-strip {
  gap: 6px;
  padding: 4px 8px;
  border-top: 0;
  border-bottom: 1px solid #34363f;
  background: #202127 !important;
}

.architecture-blade-button,
.architecture-tour-button,
.architecture-blade-segment {
  min-height: 32px;
  border-radius: 3px !important;
  box-shadow: none !important;
  background: #25262d !important;
  border-color: #3b3d47 !important;
  color: #cbd5dc;
}

.architecture-blade-button:hover:not(:disabled),
.architecture-tour-button:hover,
.architecture-blade-segment:hover:not(:disabled) {
  background: #2b2d35 !important;
  border-color: #4a6576 !important;
  color: #f0f5f7;
}

.architecture-blade-segment.active,
.architecture-blade-segment:disabled[aria-current="page"] {
  background: #27384a !important;
  border-color: #3f7698 !important;
  box-shadow: inset 0 -2px 0 #54a7da !important;
}

.topology-workspace.architect-workspace-v3 {
  grid-template-columns: var(--tn-v3-nav-width) minmax(0, 1fr) var(--tn-v3-inspector-width);
  background: #1b1b1f;
}

.architecture-navigator {
  border-right: 1px solid #34363f;
  background: #202127 !important;
}

.architecture-navigator-head {
  min-height: 50px;
  padding: 11px 13px 9px;
  border-bottom: 1px solid #30323a;
}

.architecture-navigator-head .eyebrow {
  color: #768995;
  font-size: .59rem;
}

.architecture-navigator-head strong {
  color: #e8eef2;
  font-size: .88rem;
}

.architecture-navigator-summary {
  color: #82939f;
  font-size: 10px;
}

.architecture-search-wrap {
  padding: 10px 10px 9px;
  border-bottom: 1px solid #30323a;
}

.architecture-search-wrap label {
  margin-bottom: 6px;
  color: #7e909c;
}

.architecture-search {
  min-height: 34px;
  padding: 7px 9px;
  font-size: .76rem;
}

.architecture-navigator-tree { padding: 6px 7px 12px; }

.architecture-nav-group {
  margin: 1px 0;
  border-radius: 3px;
}

.architecture-nav-group:has(.architecture-nav-detail) {
  border-color: #353741;
  background: #25262d !important;
}

.architecture-nav-row {
  min-height: 46px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.architecture-disclosure {
  width: 36px;
  height: 38px;
  border-radius: 3px;
  color: #a8abb4;
  font-size: 1rem;
  font-weight: 700;
}

.architecture-disclosure:hover {
  background: #2a2c34 !important;
  color: #d7e1e7;
}

.architecture-scope-button {
  min-height: 42px;
  padding: 7px 8px;
  border-radius: 2px;
  color: #d9dbe1;
}

.architecture-scope-button:hover { background: #292b32 !important; }
.architecture-scope-button strong {
  color: #f0f0f2;
  font-size: .86rem;
  font-weight: 650;
}
.architecture-scope-button span {
  color: #9a9da7;
  font-size: .68rem;
}
.architecture-family-summary { color: #8999a4; }

.architecture-search-result,
.architecture-nav-more {
  border-radius: 2px;
  border-color: #353741;
  background: #202127 !important;
  color: #c4d0d7;
}

.architecture-search-result:hover,
.architecture-nav-more:hover {
  border-color: #466477;
  background: #2b2d35 !important;
  color: #eef4f7;
}

.architecture-canvas-column {
  grid-template-rows: 54px minmax(0, 1fr) 24px;
  background: #f4f7f9;
}

.architecture-lens-strip {
  gap: 2px;
  padding: 4px 7px;
  border-bottom: 1px solid #383a44;
  background: #202127 !important;
}

.architecture-lens-button {
  min-width: 74px;
  height: 44px;
  grid-template-rows: 27px auto;
  border-radius: 3px;
  color: #9eafb9;
}

.architecture-lens-button:hover {
  border-color: #405869;
  background: #2a2c34 !important;
  color: #e0e8ed;
}

.architecture-lens-button.active {
  border-color: #447696;
  background: #27384a !important;
  color: #eaf4f9;
  box-shadow: inset 0 -2px 0 #55a8da !important;
}

.architecture-lens-strip .tn-lens-line { stroke: #70b5dc; }
.architecture-lens-button.active .tn-lens-line { stroke: #9bd5f3; }

.architecture-canvas-column .canvas-wrap { background: #f4f7f9 !important; }

.architecture-draft-grid { pointer-events: none; }

.architecture-draft-grid-line {
  fill: none;
  stroke: #dfe7ec;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.architecture-canvas-status {
  border-top: 1px solid #c8d1d7;
  background: #e7edf1 !important;
  color: #687984;
}

.architecture-canvas-status strong { color: #3b5565; }

.architecture-context-frame {
  fill: #ffffff;
  stroke: #aebbc4;
  stroke-width: 1.05;
}

.architecture-context-resourcegroup .architecture-context-frame {
  fill: #f8fafb;
  stroke: #9daab4;
}

.architecture-context-vnet .architecture-context-frame {
  fill: #eef6fa;
  stroke: #79a2bc;
}

.architecture-context-subnet .architecture-context-frame {
  fill: #f8fbfc;
  stroke: #9eb4c2;
  stroke-dasharray: 5 4;
}

.architecture-context-label {
  fill: #405969;
  font-size: 11.5px;
}

.architecture-edge {
  stroke: #6d8798;
  stroke-width: 1.25;
  opacity: .72;
}

.architecture-node {
  fill: #ffffff;
  stroke: #738b9a;
  stroke-width: 1;
  filter: none;
  rx: 4;
  ry: 4;
}

.architecture-resource:hover .architecture-node {
  stroke: #3c84b0;
  stroke-width: 1.5;
}

.architecture-resource:focus .architecture-node,
.architecture-node.selected {
  fill: #f7fbfd;
  stroke: #2677a8;
  stroke-width: 2;
}

.architecture-node-label { fill: #20313c; font-size: 11.5px; }
.architecture-node-type { fill: #667985; font-size: 8.5px; }
.architecture-node-annotation { fill: #3f6b84; }

.architecture-subnet-region {
  fill: #f1f7fa;
  stroke: #8eabba;
  rx: 2;
  ry: 2;
}

.topology-workspace.architect-workspace-v3 > .side-pane {
  border-left: 1px solid #34363f;
  background: #202127 !important;
  color: #dce5ea;
}

.topology-workspace.architect-workspace-v3 .side-pane-heading {
  padding: 12px 14px 10px;
  border-bottom: 1px solid #33353d;
  background: #202127 !important;
}

.topology-workspace.architect-workspace-v3 .side-pane-heading h2 {
  color: #eef4f7;
  font-size: .92rem;
}

.topology-workspace.architect-workspace-v3 #sidePaneContent {
  padding: 0 14px 20px;
}

.architecture-inspector-heading {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  padding: 14px 0 12px;
}

.architecture-inspector-heading h3 {
  color: #eef4f7;
  font-size: .88rem;
}

.architecture-inspector-heading small {
  color: #82939e;
  font-size: .61rem;
}

.architecture-inspector-section {
  margin-top: 12px;
  padding-top: 11px;
  border-top-color: #33353d;
}

.architecture-inspector-section > h3 {
  color: #aebcc5;
  font-size: 9.5px;
}

.architecture-detail-list {
  border-radius: 3px;
  border-color: #353741;
  background: #353741;
}

.architecture-detail-list > div {
  padding: 7px 8px;
  background: #1b1c21 !important;
  font-size: .66rem;
}

.architecture-detail-list > div > span:first-child { color: #7f929d; }
.architecture-detail-list > div > span:last-child { color: #d1dbe1; }

.architecture-association {
  border-radius: 3px;
  border-color: #353741;
  background: #1b1c21 !important;
}

.architecture-association-map-section { margin-top: 8px; }

.architecture-association-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.architecture-association-map-head h3 {
  margin: 0;
  color: #aebcc5;
  font: 700 9.5px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.architecture-association-map-controls {
  display: flex;
  align-items: center;
  gap: 7px;
}

.architecture-association-map-controls span {
  color: #6f838f;
  font: 600 7.5px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.architecture-association-fit {
  min-height: 23px;
  padding: 0 7px;
  border: 1px solid #344957;
  border-radius: 2px;
  background: #18242d;
  color: #b8c5cd;
  font: 700 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  cursor: pointer;
}

.architecture-association-fit:hover,
.architecture-association-fit:focus-visible {
  border-color: #52748a;
  color: #edf4f7;
  outline: none;
}

.architecture-association-map {
  min-height: 250px;
  overflow: hidden;
  border: 1px solid #353741;
  border-radius: 3px;
  background: #18191e;
}

.architecture-association-map.panning { cursor: grabbing; }

.architecture-association-map-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 248px;
}

.architecture-association-wire {
  fill: none;
  stroke: #718897;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.architecture-association-wire.kind-network { stroke: #58a6d6; }
.architecture-association-wire.kind-security { stroke: #58b783; }
.architecture-association-wire.kind-route { stroke: #c9a24e; }
.architecture-association-wire.kind-attachment { stroke: #6e9fd1; }
.architecture-association-wire.kind-data { stroke: #9b83c8; }
.architecture-association-wire.kind-reference { stroke: #8798a4; }

.architecture-association-wire.class-inferred { stroke-dasharray: 5 4; }
.architecture-association-wire.class-candidate { stroke-dasharray: 2 4; opacity: .7; }
.architecture-association-wire.class-verified { stroke-width: 1.8; }

.architecture-association-wire-label {
  fill: #8ea2ae;
  font: 7.5px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  pointer-events: none;
}

.architecture-association-node {
  cursor: pointer;
  outline: none;
}

.architecture-association-node rect {
  fill: #17232c;
  stroke: #3a5261;
  stroke-width: 1;
  rx: 3;
  ry: 3;
}

.architecture-association-node.center rect {
  fill: #1b3343;
  stroke: #4c90b9;
  stroke-width: 1.6;
}

.architecture-association-node:hover rect,
.architecture-association-node:focus rect {
  stroke: #71b3da;
  stroke-width: 1.6;
}

.architecture-association-node text {
  fill: #e0e8ed;
  font-size: 8.8px;
  font-weight: 650;
  pointer-events: none;
}

.architecture-association-node .association-node-meta {
  fill: #8396a1;
  font-size: 7px;
  font-weight: 500;
}

.architecture-association-node .tn-lens-line {
  stroke: #70b5dc;
  stroke-width: 1.45;
}

.architecture-association-map-empty {
  margin: 0;
  padding: 18px;
  color: #81929d;
  font-size: .67rem;
  line-height: 1.45;
}

.architecture-association-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 7px 9px;
  border-top: 1px solid #33353d;
  color: #7f919c;
  font-size: .57rem;
}

.architecture-association-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.architecture-association-legend i {
  width: 16px;
  height: 2px;
  background: var(--association-color, #718897);
}

.architecture-raw-evidence pre,
.architecture-association pre {
  border-radius: 3px;
  background: #17181d !important;
}

.panel,
.kb-card,
.fact-grid div,
.entitlement-grid div,
.connection-item,
.guided-tour-launch,
.turtlenet-tour-card {
  border-radius: 4px !important;
  box-shadow: none !important;
}

.panel,
.kb-card,
.guided-tour-launch { background: #202127 !important; }

.fact-grid div,
.entitlement-grid div,
.connection-item { background: #1b1c21 !important; }

.page-heading { background: #202127 !important; }
.turtlenet-tour-card { background: #24262d !important; }
.turtlenet-tour-primary { background: #0e639c !important; }

@media (max-width: 1450px) {
  :root {
    --tn-v3-nav-width: 270px;
    --tn-v3-inspector-width: 348px;
  }

  .architecture-lens-button { min-width: 61px; }
}

@media (max-width: 1120px) {
  .topology-workspace.architect-workspace-v3 {
    grid-template-columns: 225px minmax(0, 1fr) 310px;
  }
}


/* Approved Navigator tree: readable family rows and resources with clear hit targets. */
.architecture-nav-detail {
  gap: 3px;
  padding: 3px 8px 9px 34px;
}

.architecture-family-group {
  display: grid;
  gap: 2px;
}

.architecture-family-button {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #d8dae0;
  text-align: left;
}

.architecture-family-button:hover {
  background: #292b32;
}

.architecture-family-button strong {
  min-width: 0;
  overflow: hidden;
  color: #dfe1e6;
  font-size: .76rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.architecture-family-chevron {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #a7abb5;
  font-size: 1rem;
  font-weight: 700;
}

.architecture-family-count {
  min-width: 24px;
  color: #8f929c;
  font: 600 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: right;
}

.architecture-family-resources {
  display: grid;
  gap: 1px;
  padding: 1px 0 4px 26px;
}

.architecture-family-resource {
  width: 100%;
  min-height: 32px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #c9cbd2;
  text-align: left;
}

.architecture-family-resource:hover,
.architecture-family-resource:focus-visible {
  background: #2a2c34;
  color: #f0f1f4;
  outline: none;
}

.architecture-family-resource-icon {
  width: 21px;
  height: 21px;
  overflow: visible;
}

.architecture-family-resource-icon .tn-lens-line {
  stroke: #61a7d6;
  stroke-width: 1.45;
}

.architecture-family-resource span {
  overflow: hidden;
  font-size: .73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inspector starts with only the resource name and its association map. */
.architecture-inspector-heading-minimal {
  display: block;
  padding: 13px 0 8px;
}

.architecture-inspector-heading-minimal h3 {
  margin: 0;
  color: #f1f1f3;
  font-size: .94rem;
  font-weight: 650;
}

.architecture-association-map-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.architecture-association-map {
  min-height: 220px;
}

.architecture-association-map-svg {
  min-height: 218px;
}

/* Keep blade/path labels readable and distinct. */
.architecture-blade-button,
.architecture-tour-button {
  min-height: 34px;
  padding-inline: 12px;
  font-size: .72rem;
}

.architecture-blade-segment {
  min-width: 150px;
  min-height: 34px;
  padding-inline: 13px 30px;
  font-size: .74rem;
}

/* Lens controls stay in the established strip but stop reading as cramped icon buttons. */
.architecture-lens-button {
  min-width: 78px;
  font-size: .68rem;
}

@media (max-width: 1450px) {
  :root {
    --tn-v3-nav-width: 305px;
    --tn-v3-inspector-width: 360px;
  }
}