/* ---- Logisnext brand palette (official) ----
   PRIMARY — Blue-Grey #52778B (Pantone 5405C). The primary corporate colour and logo colour.
             Use for brand elements and major components (header, primary structure).

   SECONDARY — White #FFFFFF, Black #000000, Pink #DD2876, Electric Blue #007AA2,
             Houston Blue #002659. Accents alongside photography/text to highlight messaging
             and for call-to-action (CTA) elements (incl. gradient / transparency variations).
             ⚠ Secondary (and tertiary) usage requires Corporate Marketing approval.

   TERTIARY — Forest Green #147F79, Yellow #FABD00, Soft Blue #6DAED4, Mulberry #751748.
             Additional accents — Corporate Marketing approval required.

   Print CMYK values exist in the brand guide; this digital UI uses HEX/RGB. */
:root {
  /* Primary */
  --brand-primary: #52778B;       /* Blue-Grey */
  --brand-primary-dark: #3F5E6E;  /* derived darker shade for hover/active */

  /* Secondary */
  --brand-pink: #DD2876;
  --brand-pink-dark: #C22368;   /* derived darker shade for hover/active */
  --brand-electric-blue: #007AA2;
  --brand-houston-blue: #002659;
  --brand-ink: #000000;
  --brand-white: #FFFFFF;

  /* Tertiary */
  --brand-forest-green: #147F79;
  --brand-yellow: #FABD00;
  --brand-soft-blue: #6DAED4;
  --brand-mulberry: #751748;

  /* Map Bootstrap's primary onto the brand primary. */
  --bs-primary: #52778B;
  --bs-primary-rgb: 82, 119, 139;
  --bs-link-color: #52778B;
  --bs-link-color-rgb: 82, 119, 139;
  --bs-link-hover-color: #3F5E6E;
}

html {
  font-size: 14px;
}

/* Header / navbar */
.brand-navbar {
  background-color: var(--brand-primary);
}

.brand-navbar .navbar-brand,
.brand-navbar .nav-link,
.brand-navbar .nav-item {
  color: #fff;
}

.brand-navbar .navbar-brand {
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Primary buttons */
.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-dark);
  --bs-btn-hover-border-color: var(--brand-primary-dark);
  --bs-btn-active-bg: var(--brand-primary-dark);
  --bs-btn-active-border-color: var(--brand-primary-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-bg: var(--brand-primary);
  --bs-btn-active-border-color: var(--brand-primary);
}

/* Call-to-action button — Logisnext Pink (secondary palette; needs Corporate Marketing approval) */
.btn-cta {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-pink);
  --bs-btn-border-color: var(--brand-pink);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-pink-dark);
  --bs-btn-hover-border-color: var(--brand-pink-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-pink-dark);
  --bs-btn-active-border-color: var(--brand-pink-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand-pink);
  --bs-btn-disabled-border-color: var(--brand-pink);
}

a {
  color: var(--brand-primary);
}

a:hover {
  color: var(--brand-primary-dark);
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ---- Relationship map (Details pages) ----
   A center node with up to two branches of neighbour nodes, connected by SVG lines drawn in JS
   (site.js). Node colour is keyed to entity kind using the brand palette. */
.relation-graph { position: relative; padding: 0.5rem 0; }

.relation-graph .relation-cols {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem 3.5rem;
  align-items: center;
}

.relation-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

.relation-links path { fill: none; stroke: var(--brand-primary); stroke-width: 2; opacity: 0.45; }

.relation-col { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; z-index: 1; }
.relation-col.left { align-items: flex-end; }
.relation-col.right { align-items: flex-start; }
.relation-col.center { align-items: center; }

.relation-col-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color, #6c757d);
}
.relation-col.left .relation-col-title { text-align: right; }

.relation-node {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid #dee2e6;
  border-left: 4px solid #adb5bd;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  max-width: 260px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}
a.relation-node:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); transform: translateY(-1px); }
/* A node the viewer has no permission to open: still shown, but not clickable. */
a.relation-node-static { pointer-events: none; cursor: default; opacity: 0.75; }
.relation-node .rn-label { font-weight: 600; color: #212529; line-height: 1.2; word-break: break-word; }
.relation-node .rn-sub { font-size: 0.75rem; color: #6c757d; }

.relation-node.node-group { border-left-color: var(--brand-primary); }
.relation-node.node-model { border-left-color: var(--brand-forest-green); }
.relation-node.node-document { border-left-color: var(--brand-electric-blue); }

.relation-center.relation-node {
  border-width: 2px;
  border-left-width: 6px;
  background: #f8f9fa;
  padding: 0.7rem 1rem;
}
.relation-center .rn-label { font-size: 1.05rem; }

.relation-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.75rem; color: #6c757d; margin-top: 1.25rem; }
.relation-legend .rl-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.relation-legend .rl-dot { width: 0.7rem; height: 0.7rem; border-radius: 2px; display: inline-block; }
.rl-dot.node-group { background: var(--brand-primary); }
.rl-dot.node-model { background: var(--brand-forest-green); }
.rl-dot.node-document { background: var(--brand-electric-blue); }

.relation-empty { color: #6c757d; font-style: italic; }

/* Clickable dashboard stat rows (each links to its filtered list) */
.stat-row { padding-left: 0.25rem; padding-right: 0.25rem; border-radius: 0.25rem; transition: background-color 0.1s ease; }
.stat-row:hover { background-color: rgba(0, 0, 0, 0.04); }

/* Model and model-group list search controls. */
.filter-search-input { width: 16rem; }

/* Model-group tick list on the document form: scrolls instead of pushing the rest of the form down. */
.model-group-list { max-height: 16rem; overflow-y: auto; }

.table-sort-link { color: inherit; text-decoration: none; }
.table-sort-link:hover, .table-sort-link.active { color: var(--brand-primary-dark); text-decoration: underline; }

@media (max-width: 768px) {
  .relation-graph .relation-cols { grid-template-columns: 1fr; gap: 1rem; }
  .relation-col.left, .relation-col.right, .relation-col.center { align-items: stretch; }
  .relation-col.left .relation-col-title { text-align: left; }
  .relation-links { display: none; }
  .relation-node { max-width: none; }
  .filter-search-controls { flex-wrap: wrap; }
  .filter-search-input { width: 100%; }
}