/* Lxn.Diagram — diagram.host.css
   Minimal SVG chrome for Host B (and greenfield hosts) without a full Teams diagram.css.
   Link with data-lxn="diagram" so PDF export discovers this sheet:
     <link href="_content/Lxn.Diagram/css/diagram.host.css" rel="stylesheet" data-lxn="diagram" />
   Theme: define --primary-color, --secondary-color, --background-color, --border-color,
   --error-color on :root (or a global sheet with data-lxn="global").
   Teams hosts that already ship wwwroot/css/diagram.css should NOT also load this file.
*/

.diagram-host {
  position: relative;
  width: 100%;
  overflow: auto;
  overflow-anchor: none;
  background: #fafbfd;
  cursor: grab;
}

.diagram-host.dragging {
  cursor: grabbing;
}

.lxn-diagram {
  display: block;
  user-select: none;
}

.lxn-diagram text,
.diagram-host text {
  pointer-events: none;
}

.node-box {
  fill: #fff;
  stroke: #cfe3f7;
  stroke-width: 2;
}

.node-main .node-box {
  fill: var(--background-color, #fff);
  stroke: var(--border-color, #cfe3f7);
}

.node-main {
  filter: drop-shadow(0 1px 1px rgba(16, 24, 40, 0.06)) drop-shadow(0 3px 8px rgba(16, 24, 40, 0.08));
}

.node-main:hover .node-box {
  stroke: var(--primary-color, #0f5fb2);
  stroke-width: 2;
}

.node.clickable {
  cursor: pointer;
}

.node .icon,
.node-icon {
  color: var(--primary-color, #0f5fb2);
  fill: var(--primary-color, #0f5fb2);
  paint-order: stroke;
}

.node .icon.icon-ban,
.node .icon.icon-overlay,
.node use.icon-ban {
  color: var(--error-color, #dc3545) !important;
  fill: var(--error-color, #dc3545) !important;
}

.node-queue,
.node-overflow,
.node-queue .icon,
.node-overflow .icon {
  overflow: visible;
}

.node-title,
.node-sub,
.node-connecting-type,
.node-connecting-id,
.node-label {
  fill: var(--primary-color, #0f5fb2);
}

.node-title {
  font-weight: 500;
  font-size: 19px;
}

.node-sub {
  font-weight: 400;
  font-size: 14px;
}

.node-connecting-type {
  font-weight: 400;
  font-size: 12px;
}

.node-connecting-id {
  font-weight: 400;
  font-size: 10px;
}

/* User foot chrome shares connecting-type/id fills; keep aliases for hosts that style them. */
.node-foot-label,
.node-phone {
  fill: var(--primary-color, #0f5fb2);
}

.node-foot-label {
  font-weight: 400;
  font-size: 12px;
}

.node-phone {
  font-weight: 400;
  font-size: 10px;
}

.node-connecting .connecting-hit,
.node-footer .indicator-hit {
  cursor: default;
}

.node-footer use.footer-icon,
.node-footer .footer-badge,
.node-footer .footer-badge-text {
  pointer-events: none;
}

.node-label {
  font: 600 14px/1.2 system-ui, sans-serif;
}

.edge {
  fill: none;
  stroke: #8aaecf;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.edge.green {
  stroke: rgb(165, 187, 92);
}

.group,
.group .group-box {
  pointer-events: none;
}

.groups-hidden .group {
  display: none;
}

.group-box {
  fill: #f6fbff;
  fill-opacity: 0.6;
  stroke: #bcd7f1;
  stroke-dasharray: 4 4;
}

.group-label {
  font: 700 12px system-ui;
  fill: #6e8199;
}

.node-key .key-bg {
  fill: var(--primary-color, #0f5fb2);
  stroke: var(--primary-color, #0f5fb2);
}

.node-key .key-label {
  fill: var(--background-color, #fff);
  font-size: 24px;
}

.node-addconnectingaction .add-bg {
  fill: #1fa971;
  stroke: #1fa971;
}

.node-addconnectingaction .add-plus {
  stroke: var(--background-color, #fff);
}

.node-addconnectingaction .icon {
  fill: #1fa971;
  color: #1fa971;
}

.metric-text {
  fill: var(--primary-color, #0f5fb2);
  font: 600 18px system-ui, sans-serif;
}

.time-bg {
  stroke: var(--primary-color, #0f5fb2);
  stroke-width: 2;
  fill: #fff;
}

.time-text {
  fill: var(--primary-color, #0f5fb2);
  font: 700 18px system-ui, sans-serif;
}

.time-arc {
  stroke: var(--primary-color, #0f5fb2);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
}

.node-footer .footer-icon {
  fill: var(--secondary-color, #00aeef);
  color: var(--secondary-color, #00aeef);
}

.node-footer .footer-badge {
  fill: #fff;
  stroke: var(--secondary-color, #00aeef);
  stroke-width: 2;
}

.node-footer .footer-badge-text,
.node-footer .footer-metric {
  fill: var(--secondary-color, #00aeef);
}

.presence-dot {
  stroke: #fff;
  stroke-width: 2;
}

.presence-dot.online {
  fill: #19c37d;
}

.presence-dot.away {
  fill: #f6c444;
}

.presence-dot.busy {
  fill: #ef4444;
}

.presence-dot.dnd {
  fill: #a21caf;
}

.presence-dot.offline {
  fill: #94a3b8;
}

use.footer-icon,
use.icon,
g.icon use {
  fill: currentColor;
  /* Do not force stroke:none — routing / transfer symbols need authored strokes.
     Shared Illustrator .cls-N names are scoped per symbol in sprite.svg / host-sprite.svg. */
}

/* Floating tip layer + diagram Tooltip chrome.
   Host B (Lexcen) often does not load RCL scoped CSS bundles; keep these in the linked host sheet
   so tooltips match Teams ScreenPoint UX (visible tip near the card icon). */
.diagram-viewer-root {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.diagram-viewer-root > .diagram-host {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow-anchor: none;
}

.diagram-surface {
  position: relative;
  display: inline-block;
  min-width: 100%;
  min-height: 100%;
}

.diagram-floating-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}

.diagram-floating-transform {
  transform-origin: 0 0;
  transform: scale(var(--diagram-scale, 1));
  width: var(--diagram-content-w, 1600px);
  height: var(--diagram-content-h, 900px);
}

.diagram-floating-pan {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translate(var(--diagram-pan-x, 0px), var(--diagram-pan-y, 0px));
}

.diagram-float-item {
  position: absolute;
  pointer-events: auto;
  z-index: 6;
}

.diagram-float-item:not(.diagram-float-item--center-x) {
  transform: translateX(calc(-10px / var(--diagram-scale, 1))) scale(calc(1 / var(--diagram-scale, 1)));
  transform-origin: top left;
}

.diagram-float-item--center-x {
  transform: translateX(-50%);
}

.ui-tooltip.ui-tooltip--diagram {
  position: relative;
  opacity: 0;
  visibility: hidden;
  min-width: 0;
  width: max-content;
  max-width: var(--max-width, 520px);
  padding: 0;
  --lxn-tooltip-arrow-size: 10px;
  --lxn-tooltip-arrow-gap: 1px;
  --lxn-tooltip-notch-left: 24px;
}

.ui-tooltip.ui-tooltip--diagram.visible {
  opacity: 1;
  visibility: visible;
}

.ui-tooltip.ui-tooltip--diagram .ui-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
  top: calc(-1 * (var(--lxn-tooltip-arrow-size) + var(--lxn-tooltip-arrow-gap)));
  bottom: auto;
  left: var(--lxn-tooltip-notch-left);
  right: auto;
  transform: translateX(-50%);
  border-left: var(--lxn-tooltip-arrow-size) solid transparent;
  border-right: var(--lxn-tooltip-arrow-size) solid transparent;
  border-bottom: var(--lxn-tooltip-arrow-size) solid var(--primary-color, #0b65b4);
  border-top: none;
}

.ui-tooltip .tip-card {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(16, 42, 67, .12);
  overflow: visible;
  border: 1px solid var(--primary-color, #0f5fb2);
}

.ui-tooltip .tip-card .header {
  background: var(--primary-color, #0f5fb2);
  color: #fff;
  font-weight: 600;
  padding: 8px 12px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.ui-tooltip .tip-card .body {
  padding: 8px 12px;
  color: #24292f;
  font-size: 0.85rem;
}