/*
  The look of the web page is the one of the shared UI library (css/beees.css of Beees.Mob.Ui): the tokens, the header, the menu, the buttons, the fields, the tabs and
  the notes. This file holds only what the web page needs besides, written in the tokens of the library and never in colors of its own (WEB-PLT-001, MOB-UIC-012).
*/
:root { --column: 1100px; }

.app-header .link { background: none; border: 0; padding: 0; color: var(--brand-gold-light); font: inherit; font-size: var(--size-small); text-decoration: underline; cursor: pointer; }

.app-header .app-controls { flex-wrap: wrap; justify-content: flex-end; }

.meta { color: var(--muted); font-size: var(--size-small); }

.button.small { height: 36px; min-width: 0; padding: 0 var(--space-3); font-size: var(--size-small); }

.field .input, .field textarea.input { max-width: 560px; }

textarea.input { height: auto; padding: var(--space-2) var(--space-3); }

table.nodes, table.alerts { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-small); overflow: hidden; }

table.nodes th, table.nodes td, table.alerts th, table.alerts td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); vertical-align: top; }

table.nodes th, table.alerts th { background: var(--surface-2); color: var(--muted); font-size: var(--size-xs); font-weight: var(--weight-strong); text-transform: uppercase; letter-spacing: 0.04em; }

.reading { font-size: var(--size-small); }

/* The table of the nodes is a grid of equal columns: a fixed layout, the same width for every column, the same size for every chip, no wrapped line, a tooltip on every
   element instead of a text. The readings of a node stand one under another, so a row is as high as its readings; a narrow window scrolls the table itself. */
table.nodes { table-layout: fixed; min-width: 40rem; overflow: visible; }

table.nodes th, table.nodes td { padding: var(--space-2); vertical-align: middle; white-space: nowrap; overflow: visible; text-overflow: ellipsis; }

table.nodes th { overflow: hidden; }

table.nodes tr.node-row { height: 56px; }

.node-name, .node-id { display: block; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }

.cell-chips { display: flex; align-items: center; gap: var(--space-1); }

.reading-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }

/* A chip: the status, the type, the last time heard and a reading are all of one size. */
.chip { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: var(--space-1); box-sizing: border-box; width: 7rem; max-width: 100%; height: 28px; padding: 0 var(--space-2); border: 1px solid currentColor; border-radius: 999px; background: transparent; font-size: var(--size-xs); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }

.chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Next to the acknowledge button the chip gives way, so that the two stay in the column. */
.cell-chips .chip { flex: 0 1 7rem; }

a.chip { text-decoration: none; }

.tone-ok { color: var(--live); }

.tone-warning { color: var(--warning); }

.tone-alarm { color: var(--alarm); }

.tone-none { color: var(--muted); }

.type-chip .channel-icon { width: 20px; height: 20px; }

.channel-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The tooltip: a bubble above the element that opens on hover and on focus, with the explanation in the language of the page. */
.tip { position: relative; cursor: default; }

.tip:hover, .tip:focus-visible { filter: brightness(1.3); outline: none; }

.tip::after { content: attr(data-tip); position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); width: max-content; max-width: 16rem; padding: var(--space-2) var(--space-3); background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-small); box-shadow: var(--shadow); font-size: var(--size-small); font-weight: var(--weight-body); line-height: 1.35; text-align: left; text-transform: none; white-space: pre-line; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s; }

.tip:hover::after, .tip:focus-visible::after { opacity: 1; visibility: visible; }

.tip-end::after { left: auto; right: 0; transform: none; }

.channel-history { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); margin: var(--space-3) 0; }

.channel-history h2 { margin-top: 0; }

svg.chart { width: 100%; height: auto; display: block; }

svg.chart .grid { stroke: var(--line); stroke-width: 1; }

svg.chart .tick, svg.chart .unit { fill: var(--muted); font-size: 11px; }

svg.chart .line { fill: none; stroke: var(--accent-ink); stroke-width: 2; stroke-linejoin: round; }

svg.chart .dot { fill: var(--accent-ink); }

svg.chart .band { fill: var(--accent); fill-opacity: 0.25; stroke: none; }

.stats { margin: var(--space-1) 0 0; font-size: var(--size-small); }

ul.events { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-small); }

ul.events li { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }

details.values { margin-top: var(--space-2); }

details.values summary { cursor: pointer; color: var(--accent-ink); }

table.values-table { border-collapse: collapse; margin-top: var(--space-2); font-variant-numeric: tabular-nums; }

table.values-table th, table.values-table td { padding: 2px var(--space-3) 2px 0; text-align: left; font-size: var(--size-small); }

.filters { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-2) 0 var(--space-3); }

.filters .tabs { margin-bottom: 0; }

.level-badge { display: inline-block; padding: 1px var(--space-2); border: 1px solid currentColor; border-radius: 999px; font-size: var(--size-xs); font-weight: var(--weight-strong); color: var(--live); }

.level-badge.level-1 { color: var(--warning); }

.level-badge.level-2 { color: var(--alarm); }

tr.alert-row.state-2 td { color: var(--muted); }

.pager { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; }

@media (max-width: 640px) {
    table.alerts th:nth-child(2), table.alerts td:nth-child(2) { display: none; }
}

.views { margin-top: var(--space-2); }

.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }

.filter-bar .field { margin: 0; }

.filter-bar .field .input { max-width: 220px; }

.filter-bar .check { min-height: var(--touch); }

/* The hierarchy is the same table as the list: the same columns and rows, one indentation in the first column, and a line from an open hub to the nodes that belong to it. */
.tree-options { display: flex; gap: var(--space-2); margin-left: auto; }

.name-cell { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding-left: calc(var(--depth, 0) * var(--space-4)); }

.name-block { min-width: 0; overflow: hidden; }

.tree-toggle { flex: none; width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface-2); color: var(--text); font: inherit; line-height: 1; cursor: pointer; }

.tree-toggle-space { flex: none; display: inline-block; width: 24px; }

table.nodes.tree { --tree-line: color-mix(in srgb, var(--muted) 65%, transparent); }

table.nodes td.node-cell { position: relative; }

tr.tree-parent > td.node-cell::before { content: ""; position: absolute; left: 19px; top: calc(50% + 14px); bottom: -1px; border-left: 2px solid var(--tree-line); }

tr.tree-child > td.node-cell::before { content: ""; position: absolute; left: 19px; top: -1px; bottom: -1px; border-left: 2px solid var(--tree-line); }

tr.tree-last > td.node-cell::before { bottom: 50%; }

tr.tree-child > td.node-cell::after { content: ""; position: absolute; left: 19px; top: calc(50% - 1px); width: 30px; border-top: 2px solid var(--tree-line); }

tr.tree-context > td { opacity: 0.6; }

.filter-actions { display: flex; gap: var(--space-2); margin-left: auto; }

.arrange-wrap { display: block; }

.arrange-select { box-sizing: border-box; width: 100%; max-width: 12rem; height: 28px; padding: 0 var(--space-2); border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--size-xs); font-weight: var(--weight-strong); }

.arrange-select:disabled { opacity: 0.6; cursor: not-allowed; }

tr.tree-group td { padding: var(--space-2) var(--space-3); background: var(--surface-2); }

ul.node-alerts { list-style: none; margin: 0 0 var(--space-3); padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-small); }

.node-alert-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }



@media (max-width: 720px) {
    .table-scroll { overflow-x: auto; padding-top: var(--space-4); }
}

.ack-all { margin-left: auto; }

tr.alert-focus td { background: var(--surface-2); }

/* The panel of the updates: the chips that are buttons and the choice of the version. */
button.chip { cursor: pointer; font-family: inherit; }

button.chip:hover { filter: brightness(1.2); }

.target-select { max-width: 100%; }

/* The page of the configuration: a setting is a number, its unit and Save on one line. */
.setting { margin-bottom: var(--space-4); }

.setting-edit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }

.setting-input { width: 7rem; max-width: 100%; }

.setting-unit { opacity: 0.8; }

/* The parts of a node on its page: one line each, the name first. */
ul.parts { list-style: none; margin: 0 0 var(--space-3); padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-small); }

.part { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }

.part:last-child { border-bottom: 0; }

.part-name { min-width: 8rem; opacity: 0.8; }

.part-value { font-weight: 600; }

/* The measuring range, accuracy and resolution of a sensor under its line; a number that no datasheet or measurement backs is marked. */
.measure { flex-basis: 100%; list-style: none; margin: 0; padding: 0 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--size-small); }

.measure-label { color: var(--muted); }

.measure-unverified { margin-left: var(--space-1); padding: 0 var(--space-1); border: 1px solid var(--warning); border-radius: var(--radius-small); color: var(--warning); font-size: var(--size-small); }

/* The overview: cards of figures and short lists. */
.overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); }

.overview-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-small); padding: var(--space-3); }

.overview-card h2 { margin-top: 0; }

.overview-figure { font-size: 2rem; font-weight: 700; margin: 0; }

.overview-list { list-style: none; margin: 0; padding: 0; }

.overview-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) 0; }

/* The bubble of a chip at the right edge of a card opens to the left, so that it does not widen the page. */
.overview-hub .tip::after { left: auto; right: 0; transform: none; }

/* The lines of the alert limits on a chart. */
svg.chart .limit { stroke-width: 1.5; stroke-dasharray: 6 4; }

svg.chart .limit-warning { stroke: var(--warning); }

svg.chart .limit-alarm { stroke: var(--alarm); }

svg.chart .limit-label { font-size: 11px; fill: currentColor; opacity: 0.8; }

/* The board labels of the configuration panel: a node, its label and Save on one line. */
.label-list { display: grid; gap: var(--space-2); }

.label-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }

.label-node { min-width: 12rem; }

.label-input { width: 9rem; max-width: 100%; text-transform: uppercase; }

/* The editor of the alert limits of a channel: five numbers and two buttons. */
.limits-editor { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-small); padding: var(--space-3); margin-bottom: var(--space-3); }

.limits-editor h3 { margin: 0 0 var(--space-1); }

.limits-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-2) var(--space-3); margin: var(--space-2) 0; }

.limits-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }

/* The calibration of a sensor: the editor, the text on the page of a node and the tones of its state. */
.calibration-editor { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-small); padding: var(--space-3); margin-bottom: var(--space-3); }

.calibration-editor h3 { margin: 0 0 var(--space-1); }

.calibration-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-2) var(--space-3); margin: var(--space-2) 0; }

.calibration-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }

.calibration-text.calibration-overdue, .overview-due.calibration-overdue { color: var(--alarm); }

.calibration-text.calibration-soon, .overview-due.calibration-soon { color: var(--warning); }