[hidden] { display:none !important; }
body { margin:8px; }
#pre.select { width:100px;}
.super { border-spacing:2px; }
#ttle { border-radius:5px; background:linear-gradient(to right,#000,#005,#000); border:2px solid #200; height:30px; vertical-align:middle; }
.title-left { float:left; margin:1px 0 0 10px; white-space:nowrap; }
.title { color:#ff0; }
#status { float:right; margin:1px 8px 0 0; }
#status table { border-spacing:0; }
#prst { display:inline-block; vertical-align:middle; }
#prst button { padding:0; background:none; border:0; cursor:pointer; }
#prst img { width:14px; margin:1px 0 0 4px; }
.measurement-grid { padding:0; margin:0; border-spacing:0; }
.output { width:99%; float:right; background:linear-gradient(to right,#444444,#2a2a3a); border-left:0; }
td.opisb.has-alarm { border-left-color:#777; }
.output.high { background:linear-gradient(to right,#2a2a3a,red,#2a2a3a); }
.output.low { background:linear-gradient(to right,#2a2a3a,blue,#2a2a3a); }
.output.stale { opacity:0.1; filter:blur(0.2px); }
.reading-link { color:#fff; text-decoration:none; display:block; white-space:nowrap; }
.trend { width:12px; padding:0; float:left; }
.reading-unit:not(:empty)::before { content:' '; }
#seld { text-align:center; padding-top:6px; }
.range-buttons { display:flex; justify-content:center; align-items:center; gap:4px; }
button { cursor:pointer; font-family:Verdana,sans-serif; }
button.tsel { box-shadow:0 0 0 2px #111; border:1px solid #000; font-size:11px; width:80px; font-weight:bold; background:#2a2a3a; border-radius:7px; color:#555; padding:2px 0; }
button.tsel:hover { color:#ff0; }
button.tsel.active { background:#060; color:white; }
#zakr { width:80px; }
#grub { width:20px; }
.thickness { display:flex; }
button.grub { border:0; background:none; color:#aa0; padding:2px; font-size:14px; font-weight:bold; }
#logr,#LINE,#AREA,#RESET { border:0; border-radius:5px; background:#221133; color:#999; height:23px; min-width:25px; padding:0 3px; }
#LINE img,#AREA img { margin:0; padding:0; }
#LINE.selected,#AREA.selected,#logr.selected { background:#006; color:#fff; }
#RESET { color:red; }
.graph-container { text-align:center; padding-top:18px; min-height:20px; }
#wykres { margin:0; max-width:100%; height:auto; }
#graphError,#message { color:#ffb; font:12px Verdana; padding:6px; }
#message { position:fixed; right:10px; bottom:10px; background:#322; border:1px solid #a44; z-index:100; }
hr { border:0; height:1px; background:linear-gradient(to right,#006,#060,#006); }
#onln { font:10px Verdana; color:#777; padding-top:8px; }
@media (max-width:1600px) {
 table.super { width:100%; box-shadow:none; }
 #status { float:none; clear:both; overflow-x:auto; max-width:calc(100vw - 60px); }
 hr,#seld,.graph-container { grid-column:1 / -1; width:100%; }
 .range-buttons { flex-wrap:wrap; }
}
#ttle.lightning { background:linear-gradient(to right,#000,#900,#000); }

@media (max-width:1600px) {
 table.super,table.super>tbody,table.super>tbody>tr { display:block; width:100%; box-sizing:border-box; }
 table.super { position:relative; }
 #ttle { display:block; width:100%; height:auto; min-height:30px; box-sizing:border-box; padding-right:0; }
 .title-left { float:none; white-space:normal; display:flex; flex-wrap:wrap; align-items:center; }
 #prst { display:inline-flex; align-items:center; }
 #prst select { margin-left:4px; width:130px; }
 #status { max-width:100%; margin-right:0; }
 td.super { width:100%; box-sizing:border-box; }
 td.wynik { display:block; min-width:0; }




}
#prst { display:inline-flex; align-items:center; gap:4px; vertical-align:middle; }
#prst button { display:inline-flex; align-items:center; justify-content:center; width:18px; height:20px; padding:0; vertical-align:middle; }
#prst button img { display:block; width:14px; height:14px; object-fit:contain; margin:0; }
td.opis { position:relative; padding-left:16px; box-sizing:border-box; } button.color-picker { position:absolute; left:2px; top:50%; transform:translateY(-50%); display:block; width:9px; min-width:9px; height:9px; padding:0; border:0; outline:1px solid #10234b; border-radius:50%; margin:0; cursor:pointer; box-shadow:none; }
.nm-color-panel { position:fixed; z-index:1000; width:220px; box-sizing:border-box; background:#26262e; border:1px solid #777; padding:10px; border-radius:5px; box-shadow:0 8px 24px #000b; color:#ddd; }
.nm-color-sv { position:relative; height:140px; background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent); touch-action:none; cursor:crosshair; }
.nm-color-cursor { position:absolute; width:8px; height:8px; border:1px solid #fff; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 2px 1px #000; pointer-events:none; }
.nm-color-hue { display:block; appearance:none; width:100%; height:12px; margin:12px 0; padding:0; border:0; border-radius:3px; background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red); }
.nm-color-hue::-webkit-slider-thumb { appearance:none; width:8px; height:18px; border:1px solid #fff; background:#777; border-radius:2px; }
.nm-color-hue::-moz-range-thumb { width:8px; height:18px; border:1px solid #fff; background:#777; border-radius:2px; }
.nm-color-swatches { display:grid; grid-template-columns:repeat(8,1fr); gap:5px; margin-bottom:10px; }
.nm-color-swatches button { width:18px; height:18px; border-radius:50%; padding:0; border:1px solid #999; }
.nm-color-controls { display:flex; gap:5px; align-items:center; }
.nm-color-hex { width:75px; min-width:0; font:12px monospace; background:#111; border:1px solid #888; color:#fff; padding:4px; }
.nm-color-controls button { background:#444; border:1px solid #666; border-radius:3px; color:#fff; font-size:11px; padding:5px; }
.status-row { display:flex; align-items:center; white-space:nowrap; height:24px; font-size:10px; color:#aaa; }
.status-clock { color:#ff0; font:12px monospace; flex:0 0 8ch; margin-right:5px; font-variant-numeric:tabular-nums; }
.status-energy { flex:0 0 150px; width:150px; margin-right:6px; text-align:right; font-weight:normal; cursor:pointer; font-variant-numeric:tabular-nums; }
.status-energy b { color:#0c0; }
.status-devices { display:flex; flex:none; height:18px; align-items:center; }
.status-badge { display:flex; flex:0 0 20px; width:20px; height:18px; align-items:center; justify-content:center; padding:0; border:1px solid #000; color:#aaf; font-size:9px; cursor:help; box-sizing:border-box; overflow:hidden; } .status-badge[data-status-id^="lora-"] { flex-basis:18px; width:18px; } .status-badge[data-status-id="lightning"],.status-badge[data-status-id="timelapse"],.status-badge[data-status-id="icecast"] { flex-basis:28px; width:28px; }
.status-badge[data-action]:not([data-action=""]) { cursor:alias; }
.status-cpu { flex:0 0 64px; width:64px; text-align:right; margin:0 4px; font-size:10px; font-weight:normal; font-variant-numeric:tabular-nums; }
.status-update { flex:0 0 10px; width:10px; height:18px; border:1px solid #006; box-sizing:border-box; }
.status-tooltip { position:fixed; z-index:1100; background:#212121; color:#ffd; font:10px Verdana,sans-serif; border:1px solid #a00; border-radius:3px; box-shadow:8px 8px 18px #0009; padding:6px; white-space:pre-wrap; max-width:min(420px,calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto; pointer-events:none; }

.chart-frame { position:relative; width:100%; min-width:0; height:330px; margin:0; background:#111123; }

#graphStats { color:#ccc; font:11px Verdana,sans-serif; white-space:pre-wrap; margin:4px 0; }
.date-navigation{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:6px 0;color:#999;font:11px Verdana,sans-serif}
.date-navigation[hidden]{display:none}
.date-navigation label{display:flex;align-items:center;gap:5px}
.date-navigation input{font:inherit;color:#aaa;background:#2a2a3a;border:1px solid #000;box-shadow:0 0 0 2px #111;border-radius:7px;padding:2px 5px;color-scheme:dark;min-width:0}
.date-navigation button.tsel{color:#999;cursor:pointer;width:auto;min-width:28px;padding:2px 8px}
.date-navigation button.tsel:hover{color:#ddd;background:#3a3a4a}
#wykres{touch-action:pan-y;cursor:grab}#wykres.dragging{cursor:grabbing}
#toggleGraphTooltip{border:0;border-radius:5px;background:#221133;font-weight:bold;color:#999;height:23px;width:100px;padding:0 6px;cursor:pointer;font:11px Verdana,sans-serif}#toggleGraphTooltip.selected{color:#ddd;background:#060;color:#fff;}#zakr[hidden]{display:none}

#graphLoading{display:inline-flex;flex:0 0 23px;align-items:center;justify-content:center;width:23px;height:23px;vertical-align:middle;color:#ffff00}
#graphLoading[hidden]{display:inline-flex !important;visibility:hidden}
.graph-clock{position:relative;display:block;width:13px;height:13px;border:1px solid currentColor;border-radius:50%;box-sizing:border-box}
.graph-clock::before{content:'';position:absolute;left:5px;top:2px;width:1px;height:4px;background:currentColor;transform-origin:50% 4px;animation:graph-spin 1.2s linear infinite}
.graph-clock::after{content:'';position:absolute;left:5px;top:5px;width:4px;height:1px;background:currentColor}
@keyframes graph-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.graph-clock::before{animation:none}}
span.reading-link{cursor:default}

/* Extra scroll room below the chart. */
body::after{content:'';display:block;height:250px;pointer-events:none}

.admin-link{color:#9ab5dd;font:10px Verdana,sans-serif;margin-left:7px;text-decoration:none}.admin-link:hover{text-decoration:underline}

#graphStats{font-weight:700}

/* Fixed measurement pairs wrap as whole columns instead of shrinking. */
table.super{display:block;width:100%;max-width:1616px;box-sizing:border-box}
table.super>tbody,table.super>tbody>tr{display:block;width:100%;box-sizing:border-box}
#ttle{display:block;box-sizing:border-box;height:auto;min-height:30px;overflow:hidden}
.measurement-grid,.measurement-grid>tbody,.measurement-grid>tbody>tr{display:contents}
td.super{display:grid;grid-template-columns:repeat(auto-fill,320px);gap:0;width:100%;height:auto;box-sizing:border-box}
td.wynik{display:block;width:320px;min-width:320px}
table.opis{table-layout:fixed;width:320px;border-spacing:2px}
td.opis{box-sizing:border-box;width:174px;min-width:174px;overflow-wrap:anywhere}
td.opisb{box-sizing:border-box;width:140px;min-width:140px}
.reading-link{white-space:nowrap}
hr,#seld,.graph-container{grid-column:1/-1;width:100%;min-width:0}
.range-buttons{flex-wrap:wrap}
/* Stable responsive board and compact chart toolbar. */
.measurement-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),320px));grid-column:1/-1;min-width:0;align-items:start}
.measurement-board td.wynik{width:100%;min-width:0;box-sizing:border-box}
.measurement-board.editing [data-tile]{cursor:grab;touch-action:none;outline:1px dashed #7a91b0;outline-offset:-2px;user-select:none}
.measurement-board.editing [data-tile] *{cursor:grab}
.measurement-board.editing [data-tile]:focus-visible{outline:2px solid #b4d4ff}
.measurement-board .tile-placeholder{opacity:0}
.measurement-board.saving{pointer-events:none;opacity:.8}
.tile-ghost{position:fixed!important;z-index:2000;pointer-events:none;display:block;box-shadow:0 12px 25px #0009;opacity:.95;transform:scale(1.03)}
.edit-order{display:inline-flex;align-items:center;gap:3px;font:10px Verdana;color:#ccc;white-space:nowrap}
.edit-order input{margin:0;width:13px;height:13px}
td.super{grid-template-columns:minmax(0,1fr)}
.range-buttons{gap:3px;flex-wrap:wrap;max-width:100%}
.range-buttons .tsel{flex:1 1 48px;max-width:80px;width:auto;min-width:0}
.chart-export{display:inline-flex;align-items:center;justify-content:center;gap:2px;border:0;border-radius:5px;background:#221133;color:#a9bfd9;height:23px;min-width:25px;padding:0 4px;font-size:16px}
.chart-export small{font:8px Verdana}.chart-export:hover{background:#334;color:#fff}
#graphLoading{order:1}#exportCsv{order:2}#exportPng{order:3}#toggleGraphTooltip{order:4;flex:none;width:82px}
#seld input{min-width:0}#message{max-width:calc(100vw - 32px);box-sizing:border-box}
@media(max-width:350px){table.opis{width:100%;table-layout:fixed}td.opis{width:55%;min-width:0}td.opisb{width:45%;min-width:0}.reading-link{font-size:10px}.measurement-board{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1200px){#status{overflow:visible;max-width:100%}.status-row{height:auto;min-height:24px;flex-wrap:wrap;gap:4px 0}.status-devices{flex:0 1 auto;flex-wrap:wrap;height:auto;min-height:18px;max-width:100%}}

/* Highlight the swap destination without moving surrounding measurements. */
.measurement-board.editing .tile-drop-target{outline:2px solid #87b8df;outline-offset:-2px;box-shadow:inset 0 0 0 2px #87b8df55}

/* Header controls and status wrap in complete, aligned groups. */
#ttle{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:5px 8px;overflow:visible}
.title-left{float:none;display:flex;flex:0 1 auto;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0;margin:0;white-space:normal}
.title-left .title{flex:none;line-height:28px}
#prst{display:flex;flex:1 1 230px;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
#pre.select{flex:1 1 100px;width:120px;min-width:80px;max-width:220px;height:28px;margin:0;padding:3px 6px;color:#bbc0d4;background:#11112b;border:1px solid #38384d;box-sizing:border-box}
.preset-actions{display:flex;flex:none;align-items:center;gap:3px}
#prst button,#prst .admin-link{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:28px;height:28px;margin:0;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;color:#a9aec9;text-decoration:none}
#prst button:hover,#prst .admin-link:hover{background:#25253b;border-color:#45455a;color:#ddd}
#prst .admin-link svg{display:block}
label.edit-order{display:inline-flex;align-items:center;gap:4px;min-height:28px;margin:0 0 0 4px;color:#a9aec9;font:10px Verdana,sans-serif;white-space:nowrap;cursor:pointer;user-select:none}
label.edit-order input[type="checkbox"]{appearance:none;-webkit-appearance:none;display:grid;place-content:center;flex:none;width:13px;height:13px;margin:0;border:1px solid #65657c;border-radius:3px;background:#11112b;cursor:pointer}
label.edit-order input[type="checkbox"]::before{content:'';width:6px;height:3px;border:solid #ddd;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg);visibility:hidden}
label.edit-order input[type="checkbox"]:checked{background:#424269;border-color:#9191b5}
label.edit-order input[type="checkbox"]:checked::before{visibility:visible}
label.edit-order:has(input:checked){color:#ddd}
#prst button:focus-visible,#prst .admin-link:focus-visible,#pre:focus-visible,label.edit-order input:focus-visible{outline:2px solid #a9aec9;outline-offset:2px}
#status{float:none;clear:none;flex:1 1 760px;min-width:0;max-width:100%;margin:0;overflow:visible}
.status-row{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;height:auto;min-height:28px;white-space:nowrap}
.status-clock{margin:0}
.status-energy{flex:0 1 auto;width:auto;min-width:125px;margin:0;text-align:right}
.status-devices{flex:0 1 auto;flex-wrap:wrap;gap:2px;min-width:0;max-width:100%;height:auto;min-height:18px}
.status-cpu{margin:0}
@media(max-width:650px){
 .title-left{flex:1 1 100%}
 #status{flex-basis:100%;border-top:1px solid #38384d;padding-top:6px}
 .status-row{display:grid;grid-template-columns:minmax(0,1fr) auto 10px;gap:7px 6px}
 .status-clock{grid-column:1;grid-row:1}
 .status-cpu{grid-column:2;grid-row:1}
 .status-update{grid-column:3;grid-row:1}
 .status-energy{min-width:0;width:auto;text-align:left}
 .status-energy:nth-child(2){grid-column:1;grid-row:2}
 .status-energy:nth-child(3){grid-column:2/4;grid-row:2}
 .status-devices{grid-column:1/-1;grid-row:3;width:100%}
}
/* Stable pitch and gaps, snapped to physical pixels by measurement-order.js. */
.measurement-board{--measurement-row-height:24px;--measurement-gap:1px;grid-auto-rows:var(--measurement-row-height)}
.measurement-board [data-tile]{height:var(--measurement-row-height);min-height:0}
.measurement-board table.opis{height:var(--measurement-row-height);border-spacing:var(--measurement-gap)}
.measurement-board td.opis,.measurement-board td.opisb{height:calc(var(--measurement-row-height) - 2 * var(--measurement-gap));line-height:16px}
.measurement-board td.opis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom-width:var(--measurement-gap)}
.measurement-board .output{border-spacing:0;height:16px;line-height:16px}
.measurement-board .reading-link{line-height:16px}
.measurement-board .state-icon,.measurement-board .trend{max-height:14px;object-fit:contain;vertical-align:middle}
:root{--find-rgb:102,187,255;--find-light:186,224,255;--find-dark:41,62,79}
/* Type anywhere outside a form field to highlight matching measurements. */
.measurement-board [data-tile]{transition:opacity .4s ease,filter .4s ease,box-shadow .4s ease}
.measurement-board.quick-finding [data-tile]:not(.quick-match){opacity:.25;filter:saturate(.25)}
.measurement-board.quick-finding .quick-match{position:relative;z-index:1;border-radius:4px;box-shadow:inset 0 0 0 1px rgb(var(--find-rgb)),0 0 11px rgba(var(--find-rgb),.5)}
.measurement-board.quick-finding .quick-match td.opis{background:rgb(var(--find-dark));transition:background .22s ease}
.measurement-board.quick-finding .quick-current{z-index:2;box-shadow:inset 0 0 0 2px rgb(var(--find-light)),0 0 16px rgba(var(--find-rgb),.7)}
.measurement-board.quick-finding.quick-animate .quick-match{animation:quick-find-breathe 1.8s ease-in-out infinite}
@keyframes quick-find-breathe{0%,100%{filter:brightness(1);box-shadow:inset 0 0 0 1px rgba(var(--find-rgb),.7),0 0 5px rgba(var(--find-rgb),.2)}50%{filter:brightness(1.35);box-shadow:inset 0 0 0 2px rgb(var(--find-light)),0 0 20px rgba(var(--find-rgb),.9)}}
.measurement-board.quick-finding .quick-current{outline:2px solid rgb(var(--find-light));outline-offset:-2px}
.quick-find{position:fixed;z-index:2100;left:50%;bottom:20px;transform:translate(-50%,16px);display:grid;grid-template-columns:20px minmax(70px,1fr) auto 28px;align-items:center;gap:8px;width:min(500px,calc(100vw - 24px));box-sizing:border-box;padding:10px 12px;border:1px solid rgba(var(--find-rgb),.7);border-radius:10px;background:rgba(var(--find-dark),.97);color:rgb(var(--find-light));box-shadow:0 10px 36px #000a,0 0 18px rgba(var(--find-rgb),.25);opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease;font:12px Verdana,sans-serif}
.quick-find.is-open{opacity:1;visibility:visible;transform:translate(-50%,0)}
.quick-find-icon{display:flex;color:rgb(var(--find-rgb))}
.quick-find-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#quickFindInput{width:100%;min-width:0;box-sizing:border-box;border:0;border-bottom:1px solid rgba(var(--find-rgb),.6);border-radius:0;padding:5px 0;background:transparent;color:#fff;font:14px Verdana,sans-serif;outline:none}
#quickFindInput:focus-visible{border-bottom-color:rgb(var(--find-rgb));box-shadow:0 1px rgb(var(--find-rgb))}
#quickFindCount{white-space:nowrap;color:rgb(var(--find-light));font-size:11px}
#quickFindClose{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:5px;background:rgba(var(--find-rgb),.2);color:rgb(var(--find-light));font-size:22px}
#quickFindClose:hover{background:rgba(var(--find-rgb),.35)}#quickFindClose:focus-visible{outline:2px solid rgb(var(--find-rgb))}
.quick-find small{grid-column:1/-1;color:rgba(var(--find-light),.7);font-size:10px;text-align:center}
.quick-no-results{border-color:#ba7a73}.quick-no-results #quickFindCount{color:#ffb1a4}
@media(max-width:420px){.quick-find{bottom:10px;gap:6px;padding:9px}.quick-find small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.measurement-board [data-tile],.measurement-board.quick-finding .quick-match td.opis,.quick-find{transition:none}}
#quickFindInput::-webkit-search-cancel-button{appearance:none}
.measurement-board.editing [data-tile]{position:relative;outline:none}
.measurement-board.editing [data-tile]::after {
content: '';
position: absolute;
inset: 0;
z-index: 5;
box-sizing: border-box;
border-radius: 5px;
pointer-events: none;
background-image: 
linear-gradient(90deg, #000 50%, transparent 50%),
linear-gradient(90deg, #000 50%, transparent 50%),
linear-gradient(0deg,  #000 50%, transparent 50%),
linear-gradient(0deg,  #000 50%, transparent 50%);
background-size: 8px 2px, 8px 2px, 2px 8px, 2px 8px;
bckground-position: 0 0, 0 100%, 0 0, 100% 0;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
animation: march-ants 1s linear infinite;
transition: box-shadow .3s ease;
}
@keyframes march-ants {
  0% {
  background-position: 0 0, 0 100%, 0 0, 100% 0;
    }
  100% {
  background-position: 16px 0, -16px 100%, 0 -16px, 100% 16px;
}
}

.measurement-board.editing [data-tile]:focus-visible{outline:none}
.measurement-board.editing [data-tile]:focus-visible::after{border:2px solid #c2e2ff}
.measurement-board.editing .tile-drop-target::after{border:2px solid #b5deff;box-shadow:inset 0 0 8px #87b8df70,0 0 9px #87b8df80}
.measurement-board .tile-landed{position:relative;z-index:3}
.measurement-board .tile-landed>table.opis{transform-origin:center;animation:tile-seat .6s .16s ease-out both}
.measurement-board.editing .tile-landed::after{animation:tile-seat-glow .85s ease-out}
@keyframes tile-seat{0%{transform:scale(1);filter:brightness(1)}25%{transform:scale(.975,.88);filter:brightness(1.3)}55%{transform:scale(1.012,1.06);filter:brightness(1.15)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes tile-seat-glow{0%,20%{border-color:#e3f4ff;box-shadow:inset 0 0 8px #8bcaff70,0 0 16px #8bcaffcc}100%{border-color:#a5bfdc;box-shadow:inset 0 0 0 transparent,0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.measurement-board .tile-landed>table.opis,.measurement-board.editing .tile-landed::after{animation:none}.measurement-board.editing [data-tile]::after{transition:none}}