/* System website plate bodies beyond the grid: gantt and load, the dispatch tablet, the approval
   inbox, the kanban board, the record form, the BOM tree, the ledger table, the permission matrix
   and the entity diagram. Loaded after home-netflix.css, sys/base.css, sys/doc.css and sys/home.css
   on nx-system pages; every selector is scoped under .nx. White plates on paper, 1px --line borders.
   Signal red only on: the hold bar and its label, the today-adjacent over-capacity segment, the
   red-light column rule of a board, the in-plate action button, the required-field dot, the ladder's
   gate diamond and the act glyph of the matrix. */

/* -- Gantt and the load variant: an SVG inside the window body */
.nx .gantt {
  width: 100%;
  min-width: 480px;
  height: auto;
  display: block;
}
.nx .gantt .axis-today {
  font: 10.5px var(--mono);
  fill: var(--ink);
}
.nx .gantt .band {
  fill: #fff;
}
.nx .gantt .band.alt {
  fill: #fbfaf7;
}
.nx .gantt .lbl {
  font: 11px var(--mono);
  fill: var(--ink-2);
}
.nx .gantt .axis text {
  font: 10.5px var(--mono);
  fill: var(--ink-3);
}
.nx .gantt .bar {
  stroke-width: 1;
}
.nx .gantt .bar.planned {
  fill: #eceef1;
  stroke: #c9cdd2;
}
.nx .gantt .bar.inprogress {
  fill: #eaece2;
  stroke: #c5cbb4;
}
.nx .gantt .bar.released {
  fill: #e6eff3;
  stroke: #b6d0d8;
}
.nx .gantt .bar.completed {
  fill: #e4ece7;
  stroke: #c8d6ce;
}
.nx .gantt .bar.hold {
  fill: #fff;
  stroke: var(--red);
  stroke-width: 1.5;
}
/* over capacity on the load variant: an ink hatch, so the plate's one red stays with the callout */
.nx .gantt .bar.over {
  fill: url('#sys-hatch');
  stroke: var(--ink);
  stroke-width: 1;
}
.nx .gantt .hatch-line {
  stroke: var(--ink);
  stroke-width: 1;
}
.nx .gantt .bar-lbl {
  font: 10.5px var(--mono);
  fill: var(--ink);
  pointer-events: none;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.nx .gantt .bar-lbl.out {
  fill: var(--ink-2);
}
.nx .gantt .bar-lbl.red {
  fill: var(--red);
}
.nx .gantt .today {
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

/* -- Dispatch: a portrait tablet, one card per operation; a plain list (no operations) has no buttons */
.nx .win[data-kind='dispatch'] {
  max-width: 400px;
  border: 5px solid var(--dark-2);
  border-radius: 18px;
}
/* the tablet bar is 390px wide: the view name wins over the source label */
.nx .win[data-kind='dispatch'] .win-src {
  display: none;
}
.nx .dispatch {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nx .dispatch.plain .op {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'b pill' 'wc pill' 'when pill';
}
.nx .op {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'b btn' 'wc btn' 'when pill';
  gap: 2px 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  align-items: center;
}
.nx .op:first-child {
  border-top: 0;
}
.nx .op.now {
  background: #fbfaf7;
}
.nx .op b {
  grid-area: b;
  font: 600 13.5px var(--display);
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nx .op .wc {
  grid-area: wc;
  font: 11px var(--mono);
  color: var(--ink-2);
}
.nx .op .when {
  grid-area: when;
  font: 11px var(--mono);
  color: var(--ink-2);
}
.nx .op .pill {
  grid-area: pill;
  justify-self: end;
}
.nx .op .btn {
  grid-area: btn;
}
.nx .btn.xs {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 6px;
  pointer-events: none;
}

/* -- Inbox: the waiting list beside the selected record */
.nx .inbox {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
.nx .inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-right: 1px solid var(--line);
}
.nx .inbox-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid #f0efe9;
  align-items: baseline;
  font-size: 12.5px;
}
.nx .inbox-list li:last-child {
  border-bottom: 0;
}
.nx .inbox-list li.on {
  background: #fbfaf7;
  box-shadow: inset 2px 0 0 var(--ink);
}
.nx .inbox-list .id {
  font: 500 12px var(--mono);
}
.nx .inbox-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nx .inbox-list em {
  font: 12px var(--mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.nx .inbox-list small {
  font: 10.5px var(--mono);
  color: var(--ink-3);
}
.nx .inbox-detail {
  padding: 12px 14px;
  min-width: 0;
}
.nx .inbox-detail > .id {
  display: block;
  font: 600 14px var(--display);
  margin-bottom: 8px;
}
.nx .kv {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 12px;
  margin: 0;
  font-size: 12.5px;
  align-items: center;
}
.nx .kv dt {
  font: 11px var(--mono);
  color: var(--ink-3);
}
.nx .kv dd {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nx .win .kv dd.n {
  text-align: left;
  font-family: var(--mono);
}
.nx .rule {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 10px 0;
}
.nx .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* -- Board: one column per status value (column heads are plain <b>, outside the heading outline) */
.nx .board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: 12px;
  padding: 12px;
  background: #fbfaf7;
  overflow-x: auto;
}
.nx .board .col {
  min-width: 0;
}
.nx .board .col .colh {
  display: block;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}
.nx .board .col.light .colh {
  border-bottom: 1.5px solid var(--red);
}
.nx .bcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  display: grid;
  gap: 2px;
  font-size: 12.5px;
  min-width: 0;
}
.nx .bcard > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nx .bcard .id {
  font: 500 12px var(--mono);
}
.nx .win .bcard em.n {
  font: 11px var(--mono);
  color: var(--ink-2);
  text-align: left;
}
.nx .bcard.empty {
  border-style: dashed;
  min-height: 44px;
  background: transparent;
}

/* -- Form: one record with its status ladder (the chip ladder and field grid come from sys/home.css) */
.nx .form-body {
  padding: 14px 16px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.nx .form-id {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nx .form-id .id {
  font: 600 14px var(--display);
  letter-spacing: -0.01em;
}
.nx .ladder li.done {
  border-color: var(--ink);
  color: var(--ink);
}
.nx .form-body .audit {
  margin: 0;
  color: var(--ink-3);
}
/* required fields carry an ink hairline dot (the gate diamond on the ladder is the plate's one red) */
.nx .form-body .fields dt.req::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
  margin-left: 4px;
  vertical-align: top;
}
.nx .win dl.form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 14px;
  margin: 0;
  padding: 12px 14px;
  font-size: 12.5px;
  align-items: center;
}
.nx .win dl.form dt {
  font: 11px var(--mono);
  color: var(--ink-2);
  white-space: nowrap;
}
.nx .win dl.form dt.req::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
  margin-left: 4px;
  vertical-align: top;
}
.nx .win dl.form dd {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nx .win dl.form dd.mono,
.nx .win dl.form dd.ref {
  font: 11.5px var(--mono);
  color: var(--ink-2);
}
.nx .seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  max-width: 100%;
}
.nx .seg i {
  font-style: normal;
  padding: 2px 8px;
  font-size: 11.5px;
  white-space: nowrap;
}
.nx .seg i.on {
  background: var(--ink);
  color: #fff;
}

/* -- Tree: the BOM inside a window (tree rules come from home-netflix .nx .bom) */
.nx .win-body.bom {
  padding: 12px 16px;
  font-size: 12.5px;
}
.nx .win-body.bom .row span:first-child {
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.nx .win-body.bom .row .id {
  font: 500 12px var(--mono);
}
.nx .win-body.bom .pill {
  font-size: 10.5px;
  padding: 2px 6px;
}
.nx .win-body.bom > ul > li > .row {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

/* -- Ledger: the postings table */
.nx .win .win-grid.ledger td {
  white-space: normal;
  vertical-align: top;
}
.nx .win .win-grid.ledger td a {
  color: var(--ink);
}
.nx .win .win-grid.ledger code {
  font: 11.5px var(--mono);
  background: #f1f0ec;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  display: inline-block;
  margin: 1px 2px 1px 0;
}
.nx .win .win-grid.ledger tfoot td {
  border-top: 2px solid var(--ink);
  font-weight: 600;
}
.nx .recs-cell .chip {
  display: inline-block;
  margin: 1px 4px 1px 0;
}

/* -- Matrix: tables by role, glyph cells, drawn in full (home-netflix's .matrix grid is undone by
   the base table rule); the ERD keeps .scroll for its horizontal scroll */
.nx .win-body.scroll {
  overflow: auto;
  max-height: 560px;
}
.nx .win .win-grid.matrix {
  font-size: 12px;
}
.nx .win .win-grid.matrix th,
.nx .win .win-grid.matrix td {
  text-align: center;
}
.nx .win .win-grid.matrix thead th {
  background: #fff;
  font-size: 10.5px;
  white-space: normal;
  max-width: 96px;
  vertical-align: bottom;
  line-height: 1.3;
}
.nx .win .win-grid.matrix thead th:first-child {
  text-align: left;
}
.nx .win .win-grid.matrix thead abbr {
  text-decoration: none;
}
.nx .win .win-grid.matrix tbody th {
  background: #fff;
  font-weight: 400;
  text-align: left;
  padding: 7px 12px;
  border-bottom: 1px solid #f0efe9;
  white-space: nowrap;
}
.nx .win .win-grid.matrix tbody th code {
  font: 11.5px var(--mono);
}
.nx .win .win-grid.matrix tbody th a {
  color: var(--ink);
}
.nx .win .win-grid.matrix tr.grp th {
  background: #fbfaf7;
  padding: 6px 12px;
  height: auto;
}
.nx .win .win-grid.matrix tr.grp th .k {
  color: var(--ink-3);
}
.nx .matrix i.m,
.nx .win-note i.m {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--ink);
  vertical-align: middle;
}
.nx .matrix i.v,
.nx .win-note i.v {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--ink);
  box-sizing: border-box;
  vertical-align: middle;
}
.nx .matrix i.a,
.nx .win-note i.a {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--red);
  transform: rotate(45deg);
  vertical-align: middle;
}
.nx .win-note i.m,
.nx .win-note i.v,
.nx .win-note i.a {
  margin-right: 4px;
}
.nx .matrix-acts {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
}
.nx .matrix-acts li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
}
.nx .matrix-acts .k {
  color: var(--ink-3);
  margin-right: 4px;
}

/* -- Entity diagram: banded SVG scrolling inside the frame */
.nx .win[data-kind='erd'] .win-body.scroll {
  max-height: none;
}
.nx .erd {
  display: block;
}
.nx .erd .band {
  font: 11px var(--mono);
  fill: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nx .erd .ent rect {
  fill: #fff;
  stroke-width: 1.2;
}
.nx .erd .master rect {
  stroke: #1e2d26;
}
.nx .erd .txn rect {
  stroke: #193b45;
}
.nx .erd .line rect {
  stroke: #262c33;
}
.nx .erd .fin rect {
  stroke: #302a20;
}
.nx .erd .name {
  font: 600 13px var(--display);
  fill: var(--ink);
}
.nx .erd .kind,
.nx .erd .f {
  font: 10.5px var(--mono);
  fill: var(--ink-2);
}
.nx .erd .kind {
  display: none;
}
.nx .erd .rel {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1;
}
.nx .erd .rel.on {
  stroke: var(--ink);
  stroke-width: 1.5;
}
.nx .erd .crow path {
  fill: none;
  stroke: var(--ink-3);
}
.nx .erd .ent.on rect {
  stroke-width: 2;
}
.nx .erd a:hover rect {
  stroke-width: 2;
}

/* -- KPI board variants: one tile in a doc row, three on an industry page */
.nx .kpis.one {
  grid-template-columns: minmax(0, 1fr);
}
.nx .kpis.one .kpi {
  border: 0;
  padding: 14px 16px;
}
.nx .kpis.one .kpi.tree2 {
  grid-row: auto;
}
.nx .kpis.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* -- Tablets and phones */
@media (max-width: 640px) {
  /* a board stacks its columns on phones instead of forcing two 150px columns into 343px */
  .nx .board {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  .nx .inbox {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx .inbox-list {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .nx .kpis.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .nx .kpis.three {
    grid-template-columns: minmax(0, 1fr);
  }
}