/* Integration — the thin app layer above the Nexus Platform design system.
   Everything visual comes from ds/tokens.css and ds/bundle.css; this file only holds what the
   system deliberately leaves to the consumer: document-level resets, the shell affordances Integration
   uses (a linked brand with a tenant logo, an account menu that opens upward), and the bridge from
   ASP.NET validation classes onto the system's field states. */

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

/* ---------- shell affordances ---------- */

.up-sidebar__brand,
.up-sidebar__brand:hover {
  text-decoration: none;
}

/* A tenant may upload its own mark; it stands in for .up-mark at the same size. */
.up-brand-logo {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  object-fit: contain;
  flex: none;
}

.up-sidebar__footer .up-user {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
}

.up-sidebar__footer .up-menu-wrap {
  display: block;
}

/* Sitting at the foot of the sidebar, the account menu opens upward or it would fall off-screen. */
.up-sidebar__footer .up-menu {
  top: auto;
  bottom: calc(100% + 4px);
  left: 0;
  right: auto;
  min-width: 100%;
}

.up-sidebar__footer .up-menu form {
  margin: 0;
  width: 100%;
}

/* ---------- ASP.NET validation ---------- */

/* Tag-helper validation writes these classes; map them onto the system's error states so a
   server-rendered error looks like a designed one. */
.field-validation-error {
  display: block;
  margin-top: var(--space-1);
  font-size: 13px;
  line-height: 18px;
  color: var(--danger-ink);
}

.field-validation-valid {
  display: none;
}

.input-validation-error,
.up-input.input-validation-error,
.up-select.input-validation-error,
.up-textarea.input-validation-error {
  border-color: var(--danger);
}

.input-validation-error:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.validation-summary-valid {
  display: none;
}

/* ---------- design-system compatibility: anchors used as components ----------

   bundle.css colours every anchor inside .up-root with `.up-root a { color: var(--link) }`.
   That selector (one class + one element) outranks the single-class component rules, so an
   <a class="up-btn up-btn--primary">, a nav item or a menu item comes out link-blue instead of
   taking its component colour. These rules restore the component colour at matching specificity.
   Delete this block once the design system fixes the upstream selector. */

.up-root a.up-btn,
.up-auth a.up-btn {
  color: var(--ink);
}

.up-root a.up-btn--primary,
.up-root a.up-btn--danger,
.up-auth a.up-btn--primary,
.up-auth a.up-btn--danger {
  color: var(--ink-on-fill);
}

.up-root a.up-btn--secondary,
.up-auth a.up-btn--secondary {
  color: var(--ink);
}

.up-root a.up-btn--ghost {
  color: var(--ink-secondary);
}

.up-root a.up-btn--ghost:hover {
  color: var(--ink);
}

.up-root a.up-btn--danger-quiet {
  color: var(--danger-ink);
}

.up-root a.up-btn--link {
  color: var(--link);
}

.up-root a.up-nav-item {
  color: var(--shell-ink-muted);
}

.up-root a.up-nav-item:hover,
.up-root a.up-nav-item.is-active {
  color: var(--shell-ink);
}

.up-root a.up-sidebar__brand {
  color: var(--shell-ink);
}

.up-root a.up-menu__item,
.up-root a.up-switcher__item {
  color: var(--ink);
}

.up-root a.up-menu__item--danger {
  color: var(--danger-ink);
}

.up-root a.up-pagination__page {
  color: var(--ink-secondary);
}


/* ---------- relationship diagram ----------

   The force-layout canvas has no counterpart in the design system, so its styling lives here —
   built from platform tokens so it follows the theme like everything else. Node cards echo
   .up-card, the selected stroke is the platform accent, and connector lines are line-strong. */

.diagram-canvas {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.diagram-canvas svg {
  display: block;
  width: 100%;
  height: 520px;
  cursor: grab;
}

.diagram-canvas svg:active {
  cursor: grabbing;
}

.diagram-zoom {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  display: flex;
  gap: var(--space-1);
  background: var(--surface-overlay);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 2px;
  box-shadow: var(--shadow-sm);
}

.diagram-node {
  cursor: grab;
}

.diagram-node:active {
  cursor: grabbing;
}

.diagram-node rect.card {
  fill: var(--surface-raised);
  stroke: var(--line);
}

.diagram-node rect.header {
  fill: var(--surface-sunken);
}

.diagram-node text.title {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
}

.diagram-node text.meta {
  fill: var(--ink-muted);
  font-size: 10px;
  font-family: var(--font-mono);
}

.diagram-node.selected rect.card {
  stroke: var(--primary);
  stroke-width: 1.5;
}

.diagram-edge-line {
  stroke: var(--line-strong);
  stroke-width: 1.2;
}

.diagram-edge-line.selected {
  stroke: var(--primary);
  stroke-width: 1.8;
}

.diagram-edge-hit {
  stroke: transparent;
  stroke-width: 14px;
  cursor: pointer;
}

.diagram-edge-badge rect {
  fill: var(--surface-raised);
  stroke: var(--line);
}

.diagram-edge-badge.selected rect {
  stroke: var(--primary);
}

.diagram-edge-badge text {
  fill: var(--ink-muted);
  font-size: 10px;
  font-family: var(--font-mono);
}

.diagram-detail {
  margin-top: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-size: 13px;
  color: var(--ink-secondary);
  min-height: 44px;
  flex-wrap: wrap;
}

.diagram-detail .up-btn-group,
.diagram-detail > div:last-child {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}


/* ---------- consumer-side additions ---------- */

/* A long field table pushes its own submit off-screen, so the action bar stays in view. */
.up-form-actions--sticky {
  position: sticky;
  bottom: 0;
  margin-top: var(--space-6);
  padding: var(--space-3) 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  z-index: var(--z-sticky);
}

/* The row of a picker table whose object is already chosen. */
.up-table tr.is-selected > td {
  background: var(--surface-selected);
}

/* A caret that rotates as its group expands. */
.rel-group-caret {
  transition: transform .12s ease;
}