/* Siemens PLC Viewer. Plain panels and native controls in the site's fonts and colours
   (variables from the page's app.css). Every class starts with spv-. */

.spv { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; font-size: 0.9rem; background: #fff; }
.spv-hidden { display: none; }

/* bar */
.spv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 5px 8px; border-bottom: 1px solid var(--line); background: var(--soft); }
.spv-grow { flex: 1; }
.spv-search { display: flex; gap: 4px; flex: 0 1 340px; min-width: 160px; }
.spv-search .spv-q { min-height: 26px; padding: 2px 6px; font-size: 0.85rem; }
.spv-contents { display: none; }

/* body: tree, splitter, main pane */
.spv-body { flex: 1; display: flex; min-height: 0; }
.spv-side { width: 270px; flex: none; overflow: auto; padding: 6px 4px 12px; background: #fbfbfc; border-right: 1px solid var(--line); }
.spv-split { width: 5px; flex: none; cursor: col-resize; background: var(--soft); border-right: 1px solid var(--rule); }
.spv-split:hover, .spv-split:focus-visible { background: var(--band); }
.spv-main { flex: 1; min-width: 0; overflow: auto; position: relative; }
.spv-main:focus { outline: none; }
.spv-crumbs { position: sticky; top: 0; z-index: 2; padding: 4px 14px; font-size: 0.8rem; color: var(--muted); background: #fff; border-bottom: 1px solid #eceff4; min-height: 26px; overflow-wrap: anywhere; }
.spv-crumbs:empty { display: none; }
.spv-content { padding: 10px 14px 28px; }
.spv-empty .spv-side, .spv-empty .spv-split { display: none; }

/* buttons that look like links */
.spv-link { font: inherit; color: var(--link); background: none; border: 0; padding: 0; margin: 0; text-align: left; text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; }
.spv-link:hover { color: var(--hover); }

/* tree */
.spv-tree, .spv-tree ul { list-style: none; margin: 0; padding: 0; }
.spv-tree ul { padding-left: 14px; }
.spv-tree summary { cursor: pointer; padding: 1px 4px; font-weight: bold; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spv-tree summary:hover { background: var(--band); }
.spv-cnt { font-weight: normal; color: var(--muted); font-size: 0.8rem; }
.spv-node { display: flex; align-items: baseline; gap: 6px; width: 100%; font: inherit; text-align: left; background: none; border: 0; padding: 1px 4px 1px 18px; color: var(--link); cursor: pointer; }
.spv-node:hover { background: var(--band); color: var(--hover); }
.spv-node.spv-on { background: var(--navy); color: #fff; }
.spv-node.spv-sys { color: var(--muted); }
.spv-node.spv-sys.spv-on { color: #fff; }
.spv-node-l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spv-tag { flex: none; font-size: 0.7rem; color: var(--muted); border: 1px solid var(--rule); padding: 0 3px; line-height: 1.3; background: #fff; }
.spv-on .spv-tag { color: var(--ink); }

/* start screen */
.spv-start { max-width: 720px; margin: 10px auto; }
.spv-drop { border: 2px dashed #a7b6cc; background: #fafbfd; padding: 16px 14px; text-align: center; margin-bottom: 12px; }
.spv-drop-t { font-size: 1rem; margin-bottom: 6px; }
.spv-dragging .spv-drop { border-color: var(--navy); background: #fffbe0; }
.spv-dropping { display: none; }
.spv-dragging .spv-dropping { display: flex; position: absolute; inset: 0; z-index: 20; align-items: center; justify-content: center; background: rgba(255, 251, 224, 0.92); border: 3px dashed var(--navy); font-size: 1.2rem; font-weight: bold; color: var(--navy); }
.spv-help { color: var(--muted); font-size: 0.85rem; margin: 4px 0 8px; }
.spv-error { color: var(--bad); background: var(--bad-bg); border: 1px solid var(--bad-line); padding: 6px 10px; }
span.spv-error { padding: 1px 6px; display: inline-block; }
.spv-feats { padding-left: 20px; }
.spv-start progress { width: 100%; height: 16px; }
.spv-phone-note { display: none; }

/* views */
.spv-view h2 { font-size: 1.25rem; margin: 2px 0 2px; overflow-wrap: anywhere; }
.spv-view h3 { font-size: 0.95rem; margin: 16px 0 6px; color: var(--navy); }
.spv-sub { color: var(--muted); margin: 0 0 10px; overflow-wrap: anywhere; }
.spv-muted { color: var(--muted); }
.spv-comment { white-space: pre-wrap; margin: 0 0 10px; max-width: 900px; }
.spv-note { color: var(--muted); font-style: italic; margin: 4px 0; }
.spv-loading { color: var(--muted); }
.spv-lang { font: normal 0.75rem var(--ui); color: var(--muted); border: 1px solid var(--rule); padding: 0 4px; margin-left: 8px; vertical-align: middle; }
.spv-warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); padding: 6px 10px; margin: 0 0 10px; }
.spv-warn ul { margin: 4px 0 0; padding-left: 20px; }
.spv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 24px; }
.spv-links { margin: 0; padding-left: 20px; }
.spv-links li { margin-bottom: 3px; }
.spv-card { border: 1px solid var(--line); background: var(--soft); padding: 6px 10px; margin: 0 0 12px; max-width: 760px; }
.spv-card .spv-kv { margin: 4px 0; }
.spv-inline { white-space: nowrap; }
.spv-num { text-align: right; }

/* tables */
.spv-kv { border-collapse: collapse; margin: 0 0 8px; }
.spv-kv th { text-align: left; font-weight: bold; padding: 1px 14px 1px 0; vertical-align: top; white-space: nowrap; }
.spv-kv td { padding: 1px 0; vertical-align: top; overflow-wrap: anywhere; white-space: pre-wrap; }
.spv-kv th.spv-sub-row { font-weight: normal; padding-left: 14px; }
.spv-scroll-x { overflow-x: auto; max-width: 100%; }
.spv-table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.spv-table caption { text-align: left; font-weight: bold; }
.spv-table th, .spv-table td { border: 1px solid var(--rule); padding: 2px 6px; text-align: left; vertical-align: top; }
.spv-table td { white-space: pre-wrap; overflow-wrap: anywhere; }
.spv-table thead th { background: var(--band); }
.spv-table tbody tr:nth-child(even) td { background: #fafbfc; }
.spv-table.spv-narrow { width: auto; min-width: 360px; }
.spv-sort { font: inherit; font-weight: bold; color: var(--navy); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.spv-sort:hover { text-decoration: underline; }
th[aria-sort="ascending"] .spv-sort::after { content: " \25B2"; font-size: 0.7em; }
th[aria-sort="descending"] .spv-sort::after { content: " \25BC"; font-size: 0.7em; }
.spv-dt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; }
.spv-dt-bar select { width: auto; min-height: 26px; padding: 2px 4px; }
.spv-filter { max-width: 300px; min-height: 26px !important; padding: 2px 6px !important; }
.spv-count { color: var(--muted); font-size: 0.85rem; }
.spv-more { margin: 6px 0; color: var(--muted); }
.spv-subrow td { color: #333; }
.spv-indent { padding-left: 22px !important; }
.spv-sec th { background: var(--soft); text-align: left; color: var(--navy); }
.spv-iface .spv-name { white-space: nowrap; }
.spv-tog { font: bold 0.8rem/1 var(--mono); width: 16px; height: 16px; padding: 0; margin-right: 4px; border: 1px solid #999; background: #fff; cursor: pointer; vertical-align: middle; }
.spv-tog-gap { display: inline-block; width: 20px; }

/* boxes */
.spv-box { border: 1px solid var(--line); margin: 0 0 10px; }
.spv-box > summary { cursor: pointer; padding: 3px 8px; background: var(--band); font-weight: bold; color: var(--navy); }
.spv-box[open] > summary { border-bottom: 1px solid var(--line); }
.spv-box > .spv-kv, .spv-box > .spv-scroll-x, .spv-box > .spv-table { margin: 6px 8px; width: calc(100% - 16px); }
.spv-section { margin: 0 0 8px; }

/* block tools */
.spv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 4px 6px; margin: 0 0 10px; border: 1px solid var(--rule); background: var(--soft); }
.spv-modes { border: 0; margin: 0; padding: 0; display: flex; gap: 10px; align-items: center; }
.spv-modes legend { float: left; font-weight: bold; margin-right: 6px; padding: 0; }
.spv-modes label { cursor: pointer; white-space: nowrap; }
.spv-zoom { display: inline-flex; align-items: center; gap: 3px; }
.spv-zoom .btn { min-width: 26px; }
.spv-tools select { width: auto; min-height: 24px; padding: 1px 4px; max-width: 260px; }

/* networks */
.spv-net { margin: 0 0 14px; padding: 4px 0 0; border-top: 1px solid var(--rule); }
.spv-net-h { font: bold 0.9rem/1.3 var(--ui); color: var(--navy); margin: 2px 0; overflow-wrap: anywhere; }
.spv-net-c { white-space: pre-wrap; color: #333; margin: 0 0 4px; font-size: 0.85rem; max-width: 900px; }
.spv-net.spv-hit { background: #fffbe0; outline: 2px solid var(--warn-line); outline-offset: 2px; }
.spv-draw { overflow-x: auto; }
.spv-svg { display: block; }
.spv-svg line, .spv-svg rect, .spv-svg path, .spv-svg circle { stroke: var(--ink); stroke-width: 0.7; fill: none; }
.spv-svg text { fill: var(--ink); font-family: "Arial Narrow", "DejaVu Sans Condensed", "Liberation Sans Narrow", "Roboto Condensed", Arial, sans-serif; }
.spv-svg .spv-tb { font-weight: bold; }
.spv-svg .spv-ti { font-style: italic; }
.spv-svg .spv-tg { font-style: italic; fill: var(--muted); }
.spv-svg .spv-tm { font-family: var(--mono); }
.spv-svg .spv-op { fill: var(--link); cursor: pointer; }
.spv-svg .spv-op:hover { fill: var(--hover); text-decoration: underline; }
.spv-svg .spv-hl { fill: var(--bad); font-weight: bold; }

/* code */
.spv-code { font: 0.82rem/1.45 var(--mono); border: 1px solid var(--rule); background: #fcfcfc; padding: 3px 0; margin: 2px 0 6px; overflow-x: auto; }
.spv-ln { display: flex; white-space: pre; }
.spv-ln.spv-hit { background: #fff3a8; }
.spv-ln.spv-found { background: #fffbe0; }
.spv-no { flex: none; width: 4.2em; padding-right: 0.8em; text-align: right; color: #999; user-select: none; -webkit-user-select: none; }
.spv-tx { flex: 1; padding-right: 8px; }
.spv-kw { color: #00007f; font-weight: bold; }
.spv-in { color: #00007f; }
.spv-ty { color: #6b2a8f; }
.spv-cm { color: #2b6e2b; font-style: italic; }
.spv-st { color: #9a3a00; }
.spv-nu { color: #8a4b00; }
.spv-lb { color: #7a0000; font-weight: bold; }
.spv-code .spv-op { color: var(--link); cursor: pointer; }
.spv-code .spv-op:hover { color: var(--hover); text-decoration: underline; }
.spv-code .spv-hl { background: #ffe08a; font-weight: bold; }
.spv-src-bar { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin: 0 0 2px; }
.spv-mono { font-family: var(--mono); font-size: 0.82rem; }

/* search results */
.spv-results { list-style: none; margin: 0; padding: 0; }
.spv-results li { padding: 3px 0; border-bottom: 1px dotted var(--rule); }
.spv-snip { color: #333; font-size: 0.85rem; overflow-wrap: anywhere; }
.spv-view mark { background: #ffe08a; color: inherit; }

/* export */
.spv-exports { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 18px; }
.spv-ex { border: 1px solid var(--line); padding: 4px 10px 8px; }
.spv-ex h3 { margin-top: 4px; }
.spv-ex p { margin: 0 0 6px; }
.spv-ex select { width: auto; min-height: 24px; padding: 1px 4px; }
.spv-ex-state progress { width: 60%; vertical-align: middle; }
.spv-dl { margin: 4px 0 10px; }

/* compare */
.spv-field { margin: 0 0 12px; }
.spv-label { display: block; font-weight: bold; }
.spv-field p { margin: 0 0 4px; }
.spv-changes h3 { border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.spv-chg { border: 1px solid var(--rule); border-left-width: 5px; padding: 4px 8px; margin: 0 0 8px; }
.spv-chg-added { border-left-color: var(--good); }
.spv-chg-removed { border-left-color: var(--bad); }
.spv-chg-changed { border-left-color: var(--warn-line); }
.spv-chg-h { overflow-wrap: anywhere; }
.spv-chg-b { min-height: 4px; }
.spv-lbl { font-size: 0.8rem; color: var(--muted); margin: 6px 0 2px; font-weight: bold; }
.spv-delta, .spv-pre { font: 0.8rem/1.4 var(--mono); white-space: pre-wrap; margin: 2px 0; padding: 3px 6px; background: #fcfcfc; border: 1px solid var(--rule); overflow-wrap: anywhere; }
.spv-del { color: var(--bad); }
.spv-ins { color: var(--good); }
.spv-pair { display: grid; grid-template-columns: 1fr; gap: 4px; }

/* phones and narrow windows: one pane at a time, the tree opens with "Contents" */
@media (max-width: 700px) {
  .spv-contents { display: inline-block; }
  .spv-phone-note { display: block; }
  .spv-split { display: none; }
  .spv-side { display: none; position: absolute; z-index: 5; top: 0; bottom: 0; left: 0; width: 88% !important; max-width: 360px; box-shadow: 2px 0 6px rgba(0, 0, 0, 0.2); }
  .spv-body { position: relative; }
  .spv-side-open .spv-side { display: block; }
  .spv-search { flex: 1 1 100%; order: 10; }
  .spv-content { padding: 8px 8px 20px; }
  .spv-tools { gap: 6px; }
}

/* printing what is on screen (see print() in app.js) */
.spv-print-root { display: none; }
@media print {
  body.spv-printing > *:not(.spv-print-root) { display: none !important; }
  body.spv-printing .spv-print-root { display: block; font: 10pt/1.35 var(--ui); color: #000; }
  .spv-print-head { font-size: 8pt; color: #555; border-bottom: 1px solid #999; margin: 0 0 8pt; }
  .spv-print-root .spv-tools, .spv-print-root .spv-dt-bar, .spv-print-root .spv-more, .spv-print-root .spv-src-bar .btn,
  .spv-print-root button.btn, .spv-print-root .spv-tog, .spv-print-root .spv-dl { display: none !important; }
  .spv-print-root .spv-link, .spv-print-root .spv-sort { color: #000; text-decoration: none; }
  .spv-print-root .spv-svg { width: 100% !important; height: auto !important; }
  .spv-print-root .spv-svg .spv-op { fill: #000; }
  .spv-print-root .spv-net, .spv-print-root .spv-chg, .spv-print-root tr { break-inside: avoid; }
  .spv-print-root .spv-code { overflow: visible; border-color: #bbb; }
  .spv-print-root .spv-ln { white-space: pre-wrap; }
  .spv-print-root .spv-draw { overflow: visible; }
}