/* Komari Next + Nexus map-view merge patch */
.knm-map-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
  color: hsl(var(--foreground));
}

.knm-map-toggle:hover {
  background: hsl(var(--accent));
}

.knm-node-display-root[data-knm-view="map"] .knm-map-toggle,
.knm-map-toggle.is-active {
  background: hsl(var(--card));
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

.knm-node-display-root[data-knm-view="map"] [data-knm-grid-button],
.knm-node-display-root[data-knm-view="map"] [data-knm-table-button] {
  background: transparent !important;
  box-shadow: none !important;
}

.knm-map-panel {
  display: none;
  width: 100%;
  animation: knm-panel-in .18s ease-out;
}

.knm-node-display-root[data-knm-view="map"] .knm-map-panel {
  display: block;
}

@keyframes knm-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.knm-map-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

@media (min-width: 1180px) {
  .knm-map-shell {
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, .68fr);
  }
}

.knm-map-canvas,
.knm-map-details {
  border: 1px solid hsl(var(--border) / .72);
  border-radius: 1.5rem;
  background: hsl(var(--card) / .96);
  box-shadow: 0 12px 38px rgba(15, 23, 42, .08);
  overflow: hidden;
}

.knm-map-canvas {
  min-height: 420px;
}

.knm-map-canvas .node-map-view {
  height: 100%;
  min-height: 420px;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.knm-map-canvas .node-map-view__surface {
  border-radius: 1.5rem !important;
  min-height: 420px;
}

.knm-map-canvas .node-map-view__country.is-active {
  cursor: pointer;
}

.knm-map-canvas .node-map-view__country.is-selected {
  stroke-width: 2.2 !important;
  filter: drop-shadow(0 4px 8px rgba(14, 165, 233, .25));
}

.knm-map-canvas .node-map-view__hover-card {
  display: none !important;
}

.knm-map-details {
  padding: 1rem;
  min-height: 420px;
}

.knm-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid hsl(var(--border) / .65);
}

.knm-detail-eyebrow {
  margin-bottom: .35rem;
  color: hsl(var(--muted-foreground));
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.knm-detail-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}

.knm-detail-title h3 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 1.25rem;
  line-height: 1.65rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.knm-detail-flag {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 0 0 1px hsl(var(--border));
}

.knm-status-badge {
  flex: none;
  border-radius: 999px;
  padding: .28rem .58rem;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.knm-status-badge.online,
.knm-node-status.online {
  color: rgb(4, 120, 87);
  background: rgba(16, 185, 129, .13);
}

.knm-status-badge.partial {
  color: rgb(180, 83, 9);
  background: rgba(245, 158, 11, .15);
}

.knm-status-badge.offline,
.knm-node-status.offline {
  color: rgb(190, 18, 60);
  background: rgba(244, 63, 94, .13);
}

.dark .knm-status-badge.online,
.dark .knm-node-status.online { color: rgb(110, 231, 183); background: rgba(16, 185, 129, .18); }
.dark .knm-status-badge.partial { color: rgb(252, 211, 77); background: rgba(245, 158, 11, .2); }
.dark .knm-status-badge.offline,
.dark .knm-node-status.offline { color: rgb(253, 164, 175); background: rgba(244, 63, 94, .2); }

.knm-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin: 1rem 0;
}

.knm-stat {
  border: 1px solid hsl(var(--border) / .62);
  border-radius: 1rem;
  background: hsl(var(--muted) / .34);
  padding: .7rem .75rem;
}

.knm-stat span {
  display: block;
  color: hsl(var(--muted-foreground));
  font-size: .72rem;
  line-height: 1rem;
}

.knm-stat strong {
  display: block;
  margin-top: .15rem;
  color: hsl(var(--foreground));
  font-size: 1.1rem;
  line-height: 1.45rem;
}

.knm-node-list-title {
  margin: .6rem 0 .65rem;
  color: hsl(var(--muted-foreground));
  font-size: .8rem;
  font-weight: 700;
}

.knm-node-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  max-height: 310px;
  overflow: auto;
  padding-right: .15rem;
}

.knm-node-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  border: 1px solid hsl(var(--border) / .55);
  border-radius: 1rem;
  background: hsl(var(--background) / .55);
  padding: .72rem .78rem;
  text-decoration: none;
  color: inherit;
}

.knm-node-item:hover {
  border-color: hsl(var(--primary) / .45);
  background: hsl(var(--primary) / .06);
}

.knm-node-main {
  min-width: 0;
}

.knm-node-name {
  color: hsl(var(--foreground));
  font-size: .9rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knm-node-meta {
  margin-top: .12rem;
  color: hsl(var(--muted-foreground));
  font-size: .75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knm-node-status {
  flex: none;
  border-radius: 999px;
  padding: .22rem .48rem;
  font-size: .7rem;
  font-weight: 700;
}

.knm-empty,
.knm-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  padding: 1.25rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
}

.knm-unmapped {
  margin-top: .85rem;
  border-top: 1px solid hsl(var(--border) / .55);
  padding-top: .75rem;
  color: hsl(var(--muted-foreground));
  font-size: .76rem;
}

/* v2 visual fixes: theme tokens in Komari Next are direct colors, not HSL triples. */
.knm-map-toggle {
  color: var(--foreground) !important;
  border-radius: 0.5rem !important;
}

.knm-map-toggle svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.knm-map-toggle:hover {
  background: var(--accent) !important;
  color: var(--accent-foreground, var(--foreground)) !important;
}

.knm-node-display-root[data-knm-view="map"] .knm-map-toggle,
.knm-map-toggle.is-active {
  background: var(--card) !important;
  color: var(--card-foreground, var(--foreground)) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12) !important;
}

.knm-map-canvas,
.knm-map-details {
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--card-foreground, var(--foreground)) !important;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .14) !important;
}

@supports (background: color-mix(in srgb, white 50%, transparent)) {
  .knm-map-canvas,
  .knm-map-details {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--card) 96%, transparent),
      color-mix(in srgb, var(--card) 88%, var(--background))
    ) !important;
    border-color: color-mix(in srgb, var(--border) 82%, transparent) !important;
  }
}

.dark .knm-map-canvas,
.dark .knm-map-details {
  box-shadow: 0 18px 46px rgba(0, 0, 0, .34) !important;
}

.knm-map-details {
  backdrop-filter: blur(14px);
}

.knm-detail-header {
  border-bottom-color: var(--border) !important;
}

.knm-detail-eyebrow,
.knm-node-list-title,
.knm-node-meta,
.knm-empty,
.knm-loading,
.knm-unmapped {
  color: var(--muted-foreground) !important;
}

.knm-detail-title h3,
.knm-stat strong,
.knm-node-name {
  color: var(--foreground) !important;
}

.knm-stat {
  border-color: var(--border) !important;
  background: var(--muted) !important;
}

@supports (background: color-mix(in srgb, white 50%, transparent)) {
  .knm-stat {
    background: color-mix(in srgb, var(--muted) 70%, transparent) !important;
  }
}

.knm-stat span {
  color: var(--muted-foreground) !important;
}

.knm-node-item {
  border-color: var(--border) !important;
  background: var(--background) !important;
}

@supports (background: color-mix(in srgb, white 50%, transparent)) {
  .knm-node-item {
    background: color-mix(in srgb, var(--background) 72%, transparent) !important;
  }
  .knm-node-item:hover {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border)) !important;
    background: color-mix(in srgb, var(--primary) 10%, var(--background)) !important;
  }
}

.knm-detail-flag {
  box-shadow: 0 0 0 1px var(--border) !important;
}

.knm-cloned-map,
.knm-cloned-map *,
.knm-cloned-map .node-map-view__country,
.knm-cloned-map .node-map-view__country:focus,
.knm-cloned-map .node-map-view__country:focus-visible,
.knm-cloned-map svg:focus,
.knm-cloned-map svg:focus-visible {
  outline: none !important;
}

.knm-cloned-map .node-map-view__country::-moz-focus-inner {
  border: 0 !important;
}


/* v4 cache-busted performance/focus/modal fixes */
.knm-node-display-root[data-knm-view="map"] > [data-knm-original-display="true"] { display: none !important; }
.knm-map-toggle [class*="lucide-map"], .knm-map-toggle svg { width: 1rem !important; height: 1rem !important; display: block !important; }
.knm-map-toggle span { font-weight: 600; }
.knm-map-canvas, .knm-map-canvas *, .knm-map-canvas svg, .knm-map-canvas path, .knm-map-canvas g, .knm-map-canvas rect,
.knm-map-canvas *:focus, .knm-map-canvas *:focus-visible, .knm-map-canvas *:active,
.knm-cloned-map, .knm-cloned-map *, .knm-cloned-map *:focus, .knm-cloned-map *:focus-visible {
  outline: 0 !important; outline-width: 0 !important; outline-color: transparent !important; box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important; user-select: none !important;
}
.knm-map-canvas .node-map-view__country.is-selected { stroke: var(--primary, #10b981) !important; stroke-width: 1.8px !important; filter: none !important; }
.knm-map-canvas .node-map-view__hover-card { display: none !important; visibility: hidden !important; }
.knm-map-details { position: relative; border-radius: 1.5rem !important; border: 1px solid var(--border, rgba(148,163,184,.28)) !important; background: var(--card, rgba(24,24,27,.94)) !important; color: var(--card-foreground, var(--foreground,#f8fafc)) !important; box-shadow: 0 18px 48px rgba(0,0,0,.24) !important; }
.knm-node-item { cursor: pointer; }
.knm-node-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 1.25rem; }
.knm-node-modal.is-open { display: flex; }
.knm-node-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.58); backdrop-filter: blur(12px); }
.knm-node-modal__dialog { position: relative; z-index: 1; width: min(1120px, calc(100vw - 2rem)); height: min(820px, calc(100vh - 2rem)); overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--border, rgba(148,163,184,.28)); background: var(--background,#0b0b0c); box-shadow: 0 28px 90px rgba(0,0,0,.46); display: flex; flex-direction: column; }
.knm-node-modal__bar { height: 3rem; flex: none; display: flex; align-items: center; gap: .75rem; padding: 0 .7rem 0 1rem; border-bottom: 1px solid var(--border, rgba(148,163,184,.28)); background: var(--card, rgba(24,24,27,.96)); }
.knm-node-modal__title { min-width: 0; flex: 1; color: var(--foreground,#fff); font-size: .9rem; }
.knm-node-modal__open { border-radius: .55rem; padding: .35rem .6rem; color: var(--muted-foreground,#94a3b8); font-size: .8rem; text-decoration: none; }
.knm-node-modal__open:hover { background: var(--muted, rgba(148,163,184,.12)); color: var(--foreground,#fff); }
.knm-node-modal__body { flex: 1; min-height: 0; }
.knm-node-modal__frame { width: 100%; height: 100%; border: 0; background: var(--background,#0b0b0c); }
.knm-node-modal__close { width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--border, rgba(148,163,184,.35)); background: var(--background,rgba(9,9,11,.9)); color: var(--foreground,#fff); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.knm-node-modal__close:hover { background: var(--muted, rgba(39,39,42,.96)); }
html.knm-modal-open, html.knm-modal-open body { overflow: hidden !important; }




/* v6 deterministic view-state fixes */
.knm-node-display-root .node-map-view:not(.knm-cloned-map),
.knm-node-display-root [data-knm-source-map="true"],
.knm-node-display-root [data-knm-source-map-wrapper="true"] {
  display: none !important;
  visibility: hidden !important;
}

.knm-node-display-root:not([data-knm-view="map"]) .knm-map-panel {
  display: none !important;
  visibility: hidden !important;
}

.knm-node-display-root[data-knm-view="map"] .knm-map-panel {
  display: block !important;
  visibility: visible !important;
}

.knm-node-display-root[data-knm-view="map"] > [data-knm-native-content="true"] {
  display: none !important;
  visibility: hidden !important;
}

.knm-node-display-root[data-knm-view="map"] > [data-knm-keep-content],
.knm-node-display-root:not([data-knm-view="map"]) > [data-knm-native-content="true"] {
  visibility: visible !important;
}

.knm-node-display-root[data-knm-view="map"] [data-knm-grid-button],
.knm-node-display-root[data-knm-view="map"] [data-knm-table-button] {
  background: transparent !important;
  box-shadow: none !important;
}

.knm-node-display-root[data-knm-view="map"] .knm-map-toggle,
.knm-map-toggle.is-active {
  background: var(--card) !important;
  color: var(--card-foreground, var(--foreground)) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12) !important;
}

.knm-map-canvas .knm-cloned-map {
  display: block !important;
  visibility: visible !important;
}

.knm-map-canvas .node-map-view__layout,
.knm-map-canvas .node-map-view__layout--map-only {
  min-height: 420px;
}

.knm-map-canvas .node-map-view__surface {
  min-height: 420px !important;
}

.knm-map-canvas svg,
.knm-map-canvas path,
.knm-map-canvas g,
.knm-map-canvas rect,
.knm-map-canvas *:focus,
.knm-map-canvas *:focus-visible,
.knm-map-canvas *:active {
  outline: 0 !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}


/* v8: hide the built-in dashboard map safely.
   v7 hid an auto-detected wrapper and could collapse the whole page when the
   wrapper was the main container. This version hides only native map elements;
   the merged map clone remains visible inside .knm-map-canvas. */
body .node-map-view:not(.knm-cloned-map) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.knm-map-canvas .node-map-view.knm-cloned-map,
.knm-map-canvas .knm-cloned-map {
  display: block !important;
  visibility: visible !important;
  height: 100% !important;
  min-height: 420px !important;
  max-height: none !important;
  pointer-events: auto !important;
}

/* Only wrappers inside the node display root are allowed to be collapsed. */
body [data-knm-source-map-wrapper="true"]:not(.knm-node-display-root > *) {
  display: revert !important;
  visibility: revert !important;
  height: revert !important;
  min-height: revert !important;
  max-height: revert !important;
  margin: revert !important;
  padding: revert !important;
  border: revert !important;
  overflow: revert !important;
}