/* network section: styles only this section uses. */

/* Health: the 12-column board of cards; rows keep a floor so short windows scroll. */
.nw-health { flex-grow: 1; padding: 16px 18px 18px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(360px, 1fr) minmax(360px, 1fr); gap: 14px; background: var(--canvas); }
.nw-stack { display: flex; height: 12px; gap: 2px; border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.nw-stack > span { display: block; }

/* Links that read as plain text: rows and figures that open a filtered list. */
a.nw-plain, a.nw-plain:hover { color: var(--text); text-decoration: none; }
a.nw-hov { transition: background-color 80ms; }
a.nw-hov:hover { background: var(--hover); }

/* Executors: Online / Offline group heads inside the list. */
.nw-group { padding: 9px 18px 6px; background: var(--panel-2); border-bottom: 1px solid var(--line-2); display: flex; gap: 8px; align-items: center; }

.nw-more > summary { cursor: pointer; }
.nw-more[open] > summary { display: none; }
.nw-textbtn { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.nw-textbtn:hover { color: var(--text); text-decoration-color: currentColor; }

/* Proxy types: the fields under the row being edited. */
.nw-edit-more { display: flex; align-items: flex-end; gap: 10px; padding: 8px 18px 12px 54px; background: var(--cur-bg); box-shadow: inset 3px 0 0 var(--accent); border-bottom: 1px solid var(--line-2); }
.nw-edit-more .field { gap: 4px; }
.nw-edit-more .lbl { font-size: 11.5px; }

/* Number fields in the row editor: no spinners; bare ones read as the plain value until touched. */
.nw input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.nw input[type=number]::-webkit-inner-spin-button, .nw input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.nw .inp.nw-bare { height: 30px; padding: 0 6px; margin-right: -7px; text-align: right; border-color: transparent; background: transparent; font-size: 13px; }
.nw .inp.nw-bare:hover { border-color: var(--btn-line); background: var(--input-bg); }
.nw .inp.nw-bare:focus { border-color: var(--accent); background: var(--input-bg); color: var(--text) !important; }
@supports (field-sizing: content) { .nw .inp.nw-bare { field-sizing: content; width: auto !important; min-width: 22px; } }

/* Gateways bulk edit: the box before each field decides whether it changes; an
   unticked field reads as off. */
.nw-bulk { display: flex; flex-direction: column; gap: 14px; }
.nw-set-head, .nw-bulk-reset { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.nw-set-head .lbl { cursor: pointer; }
.nw-set:has(.nw-set-head .cb:not(:checked)) > :not(.nw-set-head) { opacity: .5; transition: opacity 80ms; }

/* Filtered delete: the filters it applies. */
.nw-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 22px 0 72px; }

/* Fingerprint import: the source picks which fields show; schedules only for URLs and S3. */
.fp-imp { display: flex; flex-direction: column; gap: 14px; }
.fp-imp > .seg { align-self: flex-start; }
.fp-pane, .fp-sched { display: none; flex-direction: column; gap: 12px; }
.fp-imp:has(input[name=mode][value=files]:checked) .fp-files,
.fp-imp:has(input[name=mode][value=json]:checked) .fp-json,
.fp-imp:has(input[name=mode][value=urls]:checked) .fp-urls,
.fp-imp:has(input[name=mode][value=s3]:checked) .fp-s3,
.fp-imp:has(input[name=mode][value=urls]:checked) .fp-sched,
.fp-imp:has(input[name=mode][value=s3]:checked) .fp-sched { display: flex; }
.fp-sched-fields { display: none; }
.fp-sched:has(input[name=schedule]:checked) .fp-sched-fields { display: grid; }
#fp-import .fp-go-sched { display: none; }
#fp-import:has(input[name=schedule]:checked):has(input[name=mode][value=urls]:checked, input[name=mode][value=s3]:checked) .fp-go-import { display: none; }
#fp-import:has(input[name=schedule]:checked):has(input[name=mode][value=urls]:checked, input[name=mode][value=s3]:checked) .fp-go-sched { display: inline; }
.fp-file { font: inherit; font-size: 12.5px; color: var(--text-2); padding: 12px; border: 1px dashed var(--btn-line); border-radius: 4px; background: var(--panel-2); }
.fp-file::file-selector-button { height: 28px; padding: 0 10px; margin-right: 10px; border: 1px solid var(--btn-line); border-radius: 3px; background: var(--btn-bg); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.fp-s3-src { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fp-s3-src code { font-size: 12px; background: var(--neu-bg); padding: 2px 6px; border-radius: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-s3-load { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px dashed var(--btn-line); border-radius: 4px; background: var(--panel-2); }
.fp-sched-tbl td { height: 46px; }

/* the health board: three cards a row, two in a narrow window, one on a phone */
.nw-w5 { grid-column: span 5; }
.nw-w4 { grid-column: span 4; }
.nw-w3 { grid-column: span 3; }
@container content (width < 900px) {
  .nw-health { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(320px, auto); }
  .nw-health > .card { grid-column: auto; }
}
@container content (width < 600px) {
  .nw-health { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; }
}