/* DCWatch dark theme. Dense, tabular, status colour is the signal. */
:root {
    --bg: #1b1b1b; --panel: #242424; --line: #333; --text: #d8d8d8; --muted: #8a8a8a;
    --up: #a8c525; --down: #e5282f; --downack: #f06070; --warning: #ffd400; --unusual: #ff8c00; --paused: #4a90e2; --unknown: #8a8a8a;
    /* The one colour that is DCWatch's own, not a status colour: links, buttons, the brand mark, the active tab. */
    --accent: #a9b7c6; --accent-fill: #5c7086; --radius: 4px;
}
/* An acknowledged Down keeps its red but lighter, as PRTG shows it, everywhere a state is coloured. */
.state.Down.ack, .statehead.Down.ack, .glyphbox.Down.ack, .statepill.Down.ack, .sq.Down.ack,
.tile.Down.ack .bar, .gcard.Down.ack .bar { background: var(--downack); }
table.sensors td.statecell.down.ack { color: var(--downack); }
.ptile.Down.ack, .favrow.Down.ack { border-left-color: var(--downack); background: #3a2426; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.35 Segoe UI, Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { display: flex; align-items: center; gap: 18px; padding: 6px 12px; background: #111; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.topbar .brand { font-weight: 700; font-size: 15px; color: #fff; }
.topbar nav a { margin-right: 14px; }
main { padding: 10px 12px; }
.counters { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.counter { padding: 2px 8px; border-radius: var(--radius); color: #000; font-weight: 600; }
.counter.up { background: var(--up); } .counter.down { background: var(--down); color: #fff; }
.counter.warning { background: var(--warning); } .counter.unknown { background: var(--unknown); }
.counter.paused { background: var(--paused); color: #fff; } .counter.suppressed { background: #555; color: #fff; }
.banner { background: var(--paused); color: #fff; padding: 6px 12px; font-weight: 600; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 3px 8px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
td.msg { white-space: normal; color: var(--muted); }
th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--bg); }
tr.device td { background: var(--panel); font-weight: 700; padding-top: 6px; }
.state { display: inline-block; min-width: 76px; padding: 1px 6px; border-radius: var(--radius); color: #000; font-weight: 600; text-align: center; }
.state.Up { background: var(--up); } .state.Down { background: var(--down); color: #fff; }
.state.Warning { background: var(--warning); } .state.Unknown { background: var(--unknown); }
.state.Paused { background: var(--paused); color: #fff; } .state.Suppressed { background: #555; color: #fff; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
form.inline { display: inline; }
button { background: #333; color: var(--text); border: 1px solid #555; padding: 1px 7px; border-radius: var(--radius); cursor: pointer; font-size: 12px; }
button:hover { background: #444; }
input, select { background: #111; color: var(--text); border: 1px solid #555; padding: 3px 6px; border-radius: var(--radius); }
/* Plain checkboxes render as a large native white box regardless of the dark theme; draw our own instead. */
input[type=checkbox] {
    appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; padding: 0;
    background: #111; border: 1px solid #555; border-radius: 3px; vertical-align: middle; cursor: pointer; position: relative; flex: 0 0 auto;
}
input[type=checkbox]:hover { border-color: var(--accent); }
input[type=checkbox]:checked { background: var(--accent-fill); border-color: var(--accent-fill); }
input[type=checkbox]:checked::after {
    content: ""; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.filter { margin: 6px 0; }
.note { color: var(--muted); margin: 6px 0; }
@media (max-width: 700px) { th, td { padding: 3px 4px; } .hide-narrow { display: none; } }

/* Tree page */
.crumbs { color: var(--muted); margin: 4px 0; }
.crumbs a { color: var(--muted); }
.objhead { font-size: 22px; font-weight: 400; margin: 4px 0 8px; color: var(--accent); }
.objhead .kind { font-style: italic; color: #4a8fd6; margin-right: 6px; }
.tabs { border-bottom: 1px solid var(--line); margin-bottom: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.tabs a, .tabs span { padding: 5px 12px; color: var(--text); }
.tabs a.on { border-bottom: 3px solid var(--accent); }
.tabs .off { color: #555; cursor: default; }
.treepage { display: flex; gap: 12px; align-items: flex-start; }
.treepane { flex: 1 1 auto; min-width: 0; background: var(--panel); border: 1px solid var(--line); padding: 6px; }
.sidepane { flex: 0 0 300px; }
.treebar { display: flex; align-items: center; gap: 6px; padding: 4px 6px; margin-bottom: 4px; }
.treebar .sizes { display: flex; gap: 2px; }
.treebar .size { padding: 2px 8px; background: #333; border-radius: var(--radius); color: var(--text); font-weight: 600; font-size: 12px; }
.treebar .size.on { background: #444; color: #fff; outline: 1px solid #777; }
.treebar input[type=search] { margin-left: auto; width: 220px; }
.counters .total { background: #333; color: #ccc; }
ul.tree, ul.tree ul { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid #3a3a3a; }
ul.tree { padding-left: 4px; border: 0; }
li.group, li.device { margin: 2px 0; }
.node { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.node .toggle { width: 16px; height: 16px; padding: 0; line-height: 12px; font-size: 13px; border: 1px solid #666; background: #222; color: #ccc; border-radius: 4px; }
.node .icon { color: #9a9a9a; }
.node .gname { color: #d8d8d8; font-weight: 600; font-size: 15px; }
.node .dname { color: #d8d8d8; font-size: 14px; }
.node .host { color: var(--muted); font-size: 12px; }
.badge { display: none; padding: 1px 8px; border-radius: var(--radius); color: #000; font-size: 12px; font-weight: 600; margin-left: 4px; }
.badge.up { background: var(--up); } .badge.down { background: var(--down); color: #fff; } .badge.warning { background: var(--warning); }
.badge.unknown { background: var(--unknown); } .badge.paused, .badge.suppressed { background: var(--paused); color: #fff; }
li.collapsed > ul, li.collapsed > .tiles { display: none; }
li.collapsed > .node .badge { display: inline-block; }
.tiles { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 6px 22px; }
.tile { position: relative; display: block; background: #2b2b2b; border: 1px solid #444; color: var(--text); text-decoration: none; overflow: hidden; border-radius: var(--radius); }
.tile.empty { border-style: dashed; color: var(--muted); } .tile.empty .bar { background: #444; }
.tile:hover { text-decoration: none; border-color: #888; }
.tile .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 14px; }
.tile .glyph { position: absolute; left: 0; top: 0; width: 14px; text-align: center; font-size: 11px; font-weight: 700; color: #000; }
.tile.Up .bar { background: var(--up); } .tile.Down .bar { background: var(--down); } .tile.Warning .bar { background: var(--warning); }
.tile.Unknown .bar { background: var(--unknown); } .tile.Paused .bar, .tile.Suppressed .bar { background: var(--paused); }
.tile.Down .glyph, .tile.Paused .glyph, .tile.Suppressed .glyph { color: #fff; }
.tile .name { position: absolute; left: 20px; right: 16px; top: 3px; line-height: 1.2; overflow: hidden; }
.tile .val { position: absolute; right: 6px; bottom: 3px; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile .flag { position: absolute; right: 4px; top: 1px; color: #555; font-size: 11px; }
.tile .flag.hi { color: #bbb; }
.tiles.s .tile { width: 120px; height: 44px; font-size: 11px; } .tiles.s .name { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; }
.tiles.m .tile { width: 170px; height: 56px; font-size: 12px; } .tiles.m .name { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; }
.tiles.l .tile { width: 214px; height: 70px; font-size: 13px; } .tiles.l .name { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; }
.tiles.xl .tile { width: 300px; height: 84px; font-size: 14px; } .tiles.xl .name { -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; }
.hidden { display: none !important; }
.facts { width: 100%; background: var(--panel); border: 1px solid var(--line); margin-bottom: 8px; }
.facts th { text-align: left; color: var(--muted); width: 45%; font-weight: 400; border: 0; padding: 6px 10px; }
.facts td { border: 0; padding: 6px 10px; }
.addbtn { display: block; text-align: center; background: var(--accent-fill); color: #fff; padding: 8px; font-weight: 600; margin-bottom: 8px; text-decoration: none; border-radius: var(--radius); }.addbtn:hover { background: #2494cf; }
.graphbox { background: var(--panel); border: 1px solid var(--line); padding: 30px 10px; color: var(--muted); text-align: center; }
@media (max-width: 900px) { .treepage { flex-direction: column; } .sidepane { flex-basis: auto; width: 100%; } .treebar input[type=search] { width: 140px; } ul.tree ul { padding-left: 10px; } .tiles { padding-left: 8px; } }

/* Device page */
.statehead { padding: 6px 10px; color: #000; border-radius: var(--radius); }
.statehead .kind { color: rgba(0,0,0,0.6); }
.statehead .host { font-size: 13px; margin-left: 10px; color: rgba(0,0,0,0.7); }
.statehead.Up { background: var(--up); } .statehead.Down { background: var(--down); color: #fff; } .statehead.Down .kind, .statehead.Down .host { color: rgba(255,255,255,0.8); }
.statehead.Warning { background: var(--warning); } .statehead.Unknown { background: var(--unknown); }
.statehead.Paused, .statehead.Suppressed { background: var(--paused); color: #fff; }
.tabs .right { margin-left: auto; color: var(--accent); }
/* Floats, not flex: small cards fill the space beside a tall five-star card and then flow under it, as in PRTG */
.gauges { display: block; overflow: hidden; background: var(--panel); border: 1px solid var(--line); padding: 4px; margin-bottom: 10px; }
.gcard { position: relative; float: left; margin: 4px; display: flex; align-items: center; gap: 6px; background: #2b2b2b; border: 1px solid #444; border-radius: var(--radius); overflow: hidden; padding: 6px 8px 6px 22px; }
.gcard .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 14px; }
.gcard .glyph { position: absolute; left: 0; top: 2px; width: 14px; text-align: center; font-size: 11px; font-weight: 700; color: #000; }
.gcard.Up .bar { background: var(--up); } .gcard.Down .bar { background: var(--down); } .gcard.Warning .bar { background: var(--warning); }
.gcard.Unknown .bar { background: var(--unknown); } .gcard.Paused .bar, .gcard.Suppressed .bar { background: var(--paused); }
.gcard .gtext { flex: 1 1 auto; min-width: 0; }
.gcard .gname { font-weight: 600; color: #e8e8e8; }
.gcard .gstate { color: var(--muted); font-size: 12px; }
.gcard .gchan { color: var(--muted); font-size: 12px; }
.gcard .gval { color: #fff; font-weight: 600; }
.bulkbar { display: none; gap: 6px; align-items: center; padding: 6px 8px; background: #2b2b2b; border: 1px solid #555; margin-bottom: 6px; }
.bulkbar.show { display: flex; }
table.sensors td.pos, table.sensors th.pos { width: 60px; color: var(--muted); }
table.sensors .handle { cursor: grab; color: #888; margin-right: 4px; }
table.sensors tr[draggable] { cursor: default; }
table.sensors td.name a { color: var(--accent); }
.glyphbox { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; font-size: 11px; font-weight: 700; color: #000; vertical-align: middle; margin-right: 4px; border-radius: 4px; }
.glyphbox.Up { background: var(--up); } .glyphbox.Down { background: var(--down); color: #fff; } .glyphbox.Warning { background: var(--warning); }
.glyphbox.Unknown { background: var(--unknown); } .glyphbox.Paused, .glyphbox.Suppressed { background: var(--paused); color: #fff; }
table.sensors td.statecell { text-transform: none; font-weight: 600; }
table.sensors td.statecell.up { color: var(--up); } table.sensors td.statecell.down { color: var(--down); } table.sensors td.statecell.warning { color: var(--warning); }
table.sensors td.statecell.paused, table.sensors td.statecell.suppressed { color: var(--paused); }
/* Fixed layout, every column but Graph gets a real width; Graph is left unset so it alone takes up
   whatever the others don't, filling the table's full 100% width with no gap and no blank margin beside it. */
table.sensors { table-layout: fixed; }
/* Column widths and gutters as variables, so the tuning panel on the device page (?tune=1) can drag them live. */
/* The px values are the ceiling on a big screen; below that each scales down with the viewport so a
   tablet or a narrower window never has to scroll sideways to see the Priority column. */
:root {
    --tbl-name-w: clamp(220px, 30vw, 425px); --tbl-status-w: clamp(70px, 10vw, 152px);
    --tbl-msg-w: clamp(140px, 25vw, 429px); --tbl-pad-r: clamp(12px, 3vw, 41px);
    --spark-stroke: 0.8; --spark-fill-op: 0; --spark-height: 25px;
}
table.sensors th, table.sensors td { padding: 8px var(--tbl-pad-r) 8px 8px; }
.tunepanel { position: sticky; top: 0; z-index: 5; background: #111; border: 1px solid var(--accent); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 10px; font-size: 12px; }
.tunehead { font-weight: 600; margin-bottom: 6px; color: var(--accent); }
.tunehead button { float: right; background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; line-height: 1; padding: 0 4px; }
.tunereadout { color: #ccc; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
table.sensors th.name, table.sensors th.statecell, table.sensors th.msg { position: relative; }
.colgrip { position: absolute; right: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 3; }
.colgrip:hover, .colgrip.dragging { background: var(--accent); opacity: 0.5; }
body.colresizing { cursor: col-resize; user-select: none; }
.tunerow { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.tunerow label { width: 160px; color: var(--muted); flex: 0 0 auto; }
.tunerow input[type=range] { flex: 1 1 auto; accent-color: var(--accent); }
.tunerow output { width: 50px; text-align: right; font-variant-numeric: tabular-nums; }
table.sensors td { vertical-align: middle; }
table.sensors td.name, table.sensors th.name { width: var(--tbl-name-w); }
table.sensors td.name a { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
table.sensors td.statecell, table.sensors th.statecell { width: var(--tbl-status-w); }
table.sensors td.msg, table.sensors th.msg { width: var(--tbl-msg-w); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.sensors td.graph, table.sensors th.graph { vertical-align: top; padding-top: 8px; }
.sparkhead { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.sparkhead .last { color: #ddd; }
svg.spark { display: block; width: 100%; height: var(--spark-height); background: #222; }
table.sensors td.prio, table.sensors th.prio { width: 110px; white-space: nowrap; }
.star { background: none; border: 0; padding: 0; color: #666; font-size: 15px; cursor: pointer; line-height: 1; }
.star.on { color: #ddd; }
.star:hover { color: #fff; }
table.sensors td.sel, table.sensors th.sel { width: 30px; text-align: center; }
@media (max-width: 700px) { table.sensors td.graph, table.sensors th.graph, table.sensors td.msg, table.sensors th:nth-child(4) { display: none; } .gcard { min-width: 100%; } }

/* Gauge cards, PRTG layout: fixed widths, name truncated, dial centred, channel and value bottom left */
.gauges { align-items: flex-start; }
.gcard { display: block; padding: 6px 8px 6px 24px; }
.gcard.big { width: 300px; height: 232px; position: relative; }
.gcard.big .ghead { height: 34px; }
.gcard.big .gname { display: block; font-weight: 600; color: #e8e8e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard.big .gstate { color: var(--muted); font-size: 12px; }
.gcard.big .gdial { text-align: center; }
.gcard.big .gdial svg { display: inline-block; }
.gcard.big .gfoot { position: absolute; left: 24px; bottom: 6px; }
.gcard.big .gchan { color: var(--muted); font-size: 11px; }
.gcard.big .gval { color: #fff; font-weight: 600; font-size: 15px; }
.gcard.small { width: 210px; height: 76px; display: flex; align-items: center; gap: 6px; }
.gcard.small .gtext { flex: 1 1 auto; min-width: 0; }
.gcard.small .gname { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e8e8e8; }
.gcard.small .gstate, .gcard.small .gchan { font-size: 11px; color: var(--muted); }
.gcard.small .gval { font-size: 12px; color: #fff; font-weight: 600; }
.gcard.small svg { flex: 0 0 auto; }
@media (max-width: 700px) { .gcard.big { width: 100%; } }

/* Sensor page */
.sensorhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin: 4px 0 8px; }
.sensorhead .shleft { display: flex; gap: 10px; align-items: flex-start; }
.sensorhead .shglyph { font-size: 20px; font-weight: 700; line-height: 1.3; }
.sensorhead .shname { font-size: 22px; }
.sensorhead .shstatus { font-size: 13px; margin-left: 2px; }
.sensorhead .stars { margin-left: 8px; }
.sensorhead .star { color: rgba(0,0,0,0.35); font-size: 15px; } .sensorhead .star.on { color: #000; }
.sensorhead.Down .star.on, .sensorhead.Paused .star.on { color: #fff; }
.sensorhead .flag { background: none; border: 0; cursor: pointer; color: rgba(0,0,0,0.35); font-size: 15px; } .sensorhead .flag.on { color: #000; }
.sensorhead .shactions { display: flex; gap: 6px; align-items: center; }
form.inline { display: inline; }
.act { background: rgba(0,0,0,0.25); color: inherit; border: 0; border-radius: var(--radius); padding: 4px 8px; cursor: pointer; font-size: 12px; }
.act:hover { background: rgba(0,0,0,0.4); }
.pausemenu { position: relative; }
.pausemenu summary { list-style: none; display: inline-block; }
.pausemenu form { position: absolute; right: 0; top: 26px; background: #2b2b2b; border: 1px solid #555; display: flex; flex-direction: column; min-width: 150px; z-index: 5; }
.pausemenu form button { background: none; border: 0; color: var(--text); text-align: left; padding: 6px 10px; cursor: pointer; }
.pausemenu form button:hover { background: #3a3a3a; }
.tabs a b { font-weight: 700; }
.panel { background: var(--panel); border: 1px solid var(--line); padding: 8px; margin-bottom: 10px; border-radius: var(--radius); }
.overview { display: flex; gap: 10px; align-items: flex-start; }
.ovleft { flex: 1 1 auto; min-width: 0; }
.ovright { flex: 0 0 520px; min-width: 0; }
.gaugepanel { display: flex; gap: 16px; flex-wrap: wrap; }
.primgauge { flex: 0 0 300px; display: flex; flex-direction: column; align-items: center; }
.primgauge .gtitle { align-self: flex-start; font-weight: 600; }
.primgauge .gval { align-self: flex-start; font-size: 16px; font-weight: 600; margin-top: -8px; }
.minigauges { flex: 1 1 300px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 16px; align-content: start; }
.minigauge { border-bottom: 1px solid #444; padding: 6px 0 2px; }
.minigauge .gtitle { color: #ccc; font-size: 13px; }
.minigauge .mgrow { display: flex; justify-content: space-between; align-items: flex-end; }
.minigauge .gval { font-size: 13px; font-weight: 600; }
table.channels th.num, table.channels td.num, table.log td.num, table.log th.num { text-align: right; }
table.channels tr.primary td { font-weight: 600; }
table.channels td.muted { color: var(--muted); text-align: center; }
.minichart { padding: 4px 6px; }
.minichart .ctitle { display: block; font-size: 15px; color: #ddd; margin: 2px 0 2px 4px; }
.minichart canvas { width: 100% !important; height: 150px !important; }
.factrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 12px; background: var(--panel); border: 1px solid var(--line); padding: 8px 10px; margin-bottom: 10px; }
.factrow .flabel { display: block; color: var(--muted); font-size: 12px; }
.factrow .fval { font-weight: 600; }
.bigchart .ctop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.bigchart .ctitle { font-size: 16px; }
.bigchart .act { background: #333; }
.bigchart canvas { width: 100% !important; height: 420px !important; }
.cnav { display: flex; justify-content: center; gap: 6px; align-items: center; margin: 8px 0; }
.cnav button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #666; background: #2b2b2b; color: #ddd; cursor: pointer; font-size: 15px; }
.cnav button:hover { background: #3a3a3a; }
.cnav .crange { color: var(--muted); font-size: 12px; margin-left: 12px; }
.clegend { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; margin-top: 6px; }
.clegend label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.clegend .sw { display: inline-block; width: 12px; height: 12px; }
.clegend .unit { color: var(--muted); margin-left: auto; }
.clegendall { text-align: right; margin-top: 6px; }
.clegendall a { margin-left: 12px; color: var(--accent); }
.statepill { padding: 1px 6px; border-radius: var(--radius); color: #000; font-size: 12px; }
.statepill.Up { background: var(--up); } .statepill.Down { background: var(--down); color: #fff; } .statepill.Warning { background: var(--warning); }
.statepill.Unknown { background: var(--unknown); } .statepill.Paused, .statepill.Suppressed { background: var(--paused); color: #fff; }
.statepill.edit { background: var(--accent-fill); color: #fff; }
.settings .kv th { width: 260px; }
@media (max-width: 1100px) { .overview { flex-direction: column; } .ovright { flex: 1 1 auto; width: 100%; } }
@media (max-width: 700px) { .bigchart canvas { height: 260px !important; } .sensorhead { flex-direction: column; } }
.ctable { overflow-x: auto; }
.ctable table { width: auto; margin: 0 auto; min-width: 480px; }
.ctable th, .ctable td { padding: 5px 12px; }
.ctable th.sortable { cursor: pointer; color: var(--accent); }
.ctable th.sortable:hover { color: #fff; }
.ctable td.num, .ctable th.num { text-align: right; }
.ctable tr.avg td { font-weight: 600; border-bottom: 2px solid #444; }
.ctable table + table { margin-top: 14px; }

/* Port Wall */
.walltabs .right { margin-left: auto; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 6px; }
.ptile { display: block; background: #2b2b2b; border: 1px solid #444; border-left: 8px solid var(--unknown); padding: 4px 6px; color: var(--text); text-decoration: none; }
.ptile:hover { border-color: #666; border-left-color: inherit; text-decoration: none; }
.ptile.Up { border-left-color: var(--up); } .ptile.Down { border-left-color: var(--down); background: #3a1c1d; }
.ptile.Warning { border-left-color: var(--warning); } .ptile.Unusual { border-left-color: var(--unusual); background: #3a2a14; }
.ptile.Paused { border-left-color: var(--paused); }
.ptile .pthead { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; }
.ptile .ptname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptile .ptdev { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.ptile .tspark { display: block; width: 100%; height: 48px; background: #1e1e1e; margin: 3px 0; }
.ptile .ptvals { display: flex; justify-content: space-between; font-size: 12px; color: #bbb; }
.ptile .ptvals b { color: #fff; }
.ptile .ptwhy { font-size: 11px; color: var(--unusual); }
.walledit .wallhead { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); padding: 8px; margin-bottom: 8px; }
.walledit input[type=text], .walledit input[type=search], .walledit input:not([type]) { background: #1b1b1b; color: var(--text); border: 1px solid #555; padding: 4px 6px; }
.walledit input[type=number] { width: 60px; background: #1b1b1b; color: var(--text); border: 1px solid #555; padding: 4px; }
.walledit button.primary { background: var(--accent-fill); color: #fff; border: 0; padding: 6px 12px; font-weight: 600; cursor: pointer; }
.walledit button.danger { background: #552222; color: #fff; border: 0; padding: 6px 12px; cursor: pointer; margin-left: auto; }
.wallpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 16px; }
.pickdev summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.pick { display: block; padding: 2px 0 2px 16px; font-size: 13px; cursor: pointer; }
.muted { color: var(--muted); }

/* Traffic Grapher */
.tg { display: flex; gap: 8px; align-items: flex-start; }
.tgleft { flex: 0 0 560px; max-width: 70%; background: var(--panel); border: 1px solid var(--line); max-height: calc(100vh - 70px); overflow: auto; }
.tgright { flex: 1 1 auto; min-width: 0; background: var(--panel); border: 1px solid var(--line); padding: 0 8px 8px; }
.tgpanehead { background: #3a3a3a; color: #fff; font-weight: 600; padding: 4px 8px; margin: 0 -8px 6px; display: flex; justify-content: space-between; align-items: center; }
.tgleft .tgpanehead { margin: 0; position: sticky; top: 0; z-index: 2; }
.tgpanehead input { background: #1b1b1b; color: var(--text); border: 1px solid #555; padding: 2px 6px; font-weight: 400; }
table.tgtree { font-size: 12px; }
table.tgtree th { top: 29px; background: var(--panel); }
table.tgtree td, table.tgtree th { padding: 2px 6px; }
table.tgtree td.num, table.tgtree th.num { text-align: right; }
table.tgtree tr.tgdev td { font-weight: 700; background: #2b2b2b; cursor: pointer; }
table.tgtree tr.tgport td:first-child { padding-left: 22px; }
table.tgtree tr.sel td { background: #1f5c99; color: #fff; }
table.tgtree tr.sel td a, table.tgtree tr.sel td.muted { color: #fff; }
table.tgtree tr.st-Down td:first-child a { color: var(--down); } table.tgtree tr.st-Unknown td:first-child a { color: var(--muted); }
.tgtabs { margin-top: 0; }
.tghead { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.tggraphs { display: flex; flex-direction: column; gap: 10px; }
.tgg { background: #1e1e1e; border: 1px solid #3a3a3a; padding: 4px 8px 6px; }
.tgg .tgtitle { text-align: center; font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.tgg canvas { width: 100% !important; height: 190px !important; }
.tgtablehead { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 6px; font-weight: 600; }
.tgtablehead .act { background: #333; text-decoration: none; }
table.tgtable td.num, table.tgtable th.num { text-align: right; }
@media (max-width: 1000px) { .tg { flex-direction: column; } .tgleft { flex: 1 1 auto; max-width: 100%; max-height: 300px; width: 100%; } .tgright { width: 100%; } }

/* Favourites (phone sized, PWA) */
.favbody { margin: 0; }
.fav { max-width: 520px; margin: 0 auto; min-height: 100vh; background: var(--bg); }
/* On a desktop the phone column would sit alone in the middle: fill the width with as many columns as fit instead. */
@media (min-width: 900px) {
    .fav { max-width: none; margin: 0; }
    .favlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 1px; background: var(--line); }
    .favrow { border-bottom: 0; }
}
.favhead { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #111; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.favhead .favback { color: #ccc; font-size: 20px; text-decoration: none; }
.favhead .favtitle { font-weight: 700; font-size: 17px; }
.favhead .favcounts { margin-left: auto; display: flex; gap: 6px; }
.favbanner { background: var(--paused); color: #fff; padding: 6px 12px; font-weight: 600; }
.favlist { list-style: none; margin: 0; padding: 0; }
.favrow { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); border-left: 10px solid var(--unknown); background: var(--panel); border-radius: var(--radius); overflow: hidden; margin-bottom: 2px; }
.favrow.Up { border-left-color: var(--up); } .favrow.Down { border-left-color: var(--down); background: #3a1c1d; }
.favrow.Warning { border-left-color: var(--warning); } .favrow.Paused, .favrow.Suppressed { border-left-color: var(--paused); }
.favrow .favmain { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 10px; color: var(--text); text-decoration: none; }
.favrow .favglyph { width: 22px; text-align: center; font-weight: 700; font-size: 16px; flex: 0 0 auto; }
.favrow .favtext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.favrow .favname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.favrow .favdev { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.favrow .favmsg { color: #bbb; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.favrow.Down .favmsg { color: #f4b4b8; }
.favrow .favval { flex: 0 0 auto; font-weight: 600; color: #fff; }
.favrow .favacts { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 8px; border-left: 1px solid var(--line); }
.favrow .favacts button { background: #333; color: #ddd; border: 1px solid #555; border-radius: var(--radius); width: 36px; height: 30px; cursor: pointer; font-size: 15px; }
.favrow .favacts button.star { background: none; border: 0; color: #ffd400; font-size: 20px; }
.favnote { padding: 8px 12px; }
.starbtn { background: none; border: 0; cursor: pointer; color: #555; font-size: 15px; padding: 0 4px; }
.starbtn.on { color: #ffd400; }
.starbtn:hover { color: #fff; }

/* State Change Log */
.logfilter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); padding: 8px 10px; margin-bottom: 8px; font-size: 13px; }
.logfilter label { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.logfilter input, .logfilter select { background: #1b1b1b; color: var(--text); border: 1px solid #555; padding: 4px 6px; font-size: 13px; }
.logfilter button { background: #333; color: #ddd; border: 1px solid #555; padding: 5px 12px; cursor: pointer; }
.logfilter .act { background: #333; text-decoration: none; }
table.log td.num, table.log th.num { text-align: right; }
.pager { display: flex; gap: 16px; align-items: center; justify-content: center; padding: 10px; }

/* Alerts and maintenance */
.pauseall { border-left: 6px solid #555; }
.pauseall.on { border-left-color: var(--paused); background: #1d2a3a; }
.pauseform { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pauseform label { display: flex; gap: 4px; align-items: center; }
.pauseform input[type=text], .pauseform input:not([type]), .pauseform input[type=datetime-local] { background: #1b1b1b; color: var(--text); border: 1px solid #555; padding: 4px 6px; }
button.primary { background: var(--accent-fill); color: #fff; border: 0; padding: 5px 12px; font-weight: 600; cursor: pointer; }
button.danger { background: #552222; color: #fff; border: 0; padding: 5px 12px; cursor: pointer; }
h2.sub { font-size: 16px; margin: 14px 0 6px; color: #ddd; }
table.alerts td.acts, table.windows td.acts { white-space: nowrap; }
table.alerts td.acts button, table.windows td.acts button { background: #333; color: #ddd; border: 1px solid #555; padding: 3px 8px; cursor: pointer; margin-right: 4px; }
table.windows td.acts button.danger { background: #552222; border: 0; }
table.alerts .raised { color: var(--down); }
table.windows tr.active td { background: #1d2a3a; }
table.windows tr.off td, table.windows tr.done td { color: var(--muted); }
.addwindow .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.addwindow label { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.addwindow label.day { color: var(--text); }
.addwindow input, .addwindow select { background: #1b1b1b; color: var(--text); border: 1px solid #555; padding: 4px 6px; }
.pausebanner { background: var(--paused); color: #fff; padding: 6px 12px; font-weight: 600; text-align: center; }
.pausebanner a { color: #fff; text-decoration: underline; margin-left: 10px; }

/* Setup pages */
.setupgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 12px; }
.setupcard { display: flex; flex-direction: column; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; color: var(--text); text-decoration: none; }
.setupcard:hover { border-color: var(--accent); text-decoration: none; }
.setupcard span { color: var(--muted); font-size: 12px; }
.setupcard.off { opacity: 0.5; }
.setupform .row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.setupform label { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.setupform input:not([type=checkbox]):not([type=radio]), .setupform select, .filterbox { background: #1b1b1b; color: var(--text); border: 1px solid #555; padding: 4px 6px; font-size: 13px; }
.setupform input[type=number] { width: 80px; }
.setupform button { background: #333; color: #ddd; border: 1px solid #555; padding: 5px 12px; cursor: pointer; }
.setupform button.primary { background: var(--accent-fill); color: #fff; border: 0; font-weight: 600; }
.setupform button.danger { background: #552222; color: #fff; border: 0; }
.note.inline { display: inline; margin-left: 8px; }
.note.ok { color: var(--up); } .note.err { color: var(--down); }
table.kvedit input, table.chedit input:not([type=checkbox]), table.chedit select { background: #1b1b1b; color: var(--text); border: 1px solid #555; padding: 3px 5px; font-size: 12px; }
table.chedit input.num { text-align: right; }
table.chedit th.num, table.chedit td.num { text-align: right; }
table.chedit td { vertical-align: middle; }
details.inherited { margin: 8px 0; color: var(--muted); }
details.inherited table td { padding: 2px 8px; }
.tagslayout { display: flex; gap: 12px; align-items: flex-start; }
.tagslayout .taglist { flex: 0 0 360px; }
.tagslayout .taglist tr.sel td { background: #1f5c99; }
.tagslayout .taglist tr.sel td a { color: #fff; }
.tagslayout .panel { flex: 1 1 auto; }
.tagedit form.row span { min-width: 220px; color: var(--muted); }
pre.logtail { background: #111; border: 1px solid var(--line); padding: 8px; font-size: 12px; max-height: 70vh; overflow: auto; white-space: pre-wrap; word-break: break-all; }
pre.logtail .lerr { color: #ff6b6b; } pre.logtail .lwarn { color: #ffd400; }
code { background: #111; padding: 1px 4px; }
@media (max-width: 900px) { .tagslayout { flex-direction: column; } .tagslayout .taglist { flex: 1 1 auto; width: 100%; } }

/* Settings editors, PRTG layout: label column left, control right, one section per panel */
.settings-form section.panel h2.sub { margin-top: 0; color: var(--accent); font-weight: 400; font-size: 17px; }
.grid2 { display: grid; grid-template-columns: 240px 1fr; gap: 10px 16px; align-items: center; max-width: 1100px; }
.grid2 > label { color: #bbb; text-align: right; }
.grid2 > input, .grid2 > select { max-width: 520px; }
.grid2 input:not([type=checkbox]):not([type=radio]), .grid2 select { background: #1b1b1b; color: var(--text); border: 0; border-bottom: 1px solid #666; padding: 5px 6px; font-size: 13px; }
.grid2 input:focus, .grid2 select:focus { outline: 0; border-bottom-color: var(--accent); }
.grid2 input[type=number] { width: 90px; }
.grid2 label.opt { display: inline-flex; gap: 6px; align-items: center; margin-right: 14px; color: var(--text); text-align: left; }
.starpick label.opt { color: #ddd; letter-spacing: 1px; }
.settings-form .row { display: flex; gap: 12px; align-items: center; margin: 6px 0 14px; }
.settings-form button { background: #333; color: #ddd; border: 1px solid #555; padding: 6px 14px; cursor: pointer; }
.settings-form button.primary { background: var(--accent-fill); color: #fff; border: 0; font-weight: 600; }
.settings-form button.danger { background: #552222; color: #fff; border: 0; }
.settings-form .act { text-decoration: none; }
details.other summary { cursor: pointer; color: var(--muted); }
a.cog { color: #8a8a8a; text-decoration: none; font-size: 14px; margin-left: 6px; }
a.cog:hover { color: #fff; }
.minigauge .mgrow a.cog { align-self: flex-end; }
@media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } .grid2 > label { text-align: left; } }
.gcard { position: relative; }
.gcard .gcover { position: absolute; inset: 0; z-index: 1; }
.gcard .gname, .gcard .gval { position: relative; z-index: 2; }
.gcard:hover { border-color: var(--accent); }
.headedit { float: right; font-size: 13px; font-weight: 400; color: #fff; background: rgba(0,0,0,0.38); padding: 3px 8px; border-radius: var(--radius); margin-top: 2px; }
.node .gname + .cog { font-size: 12px; }
table.schedgrid { width: auto; border-collapse: separate; border-spacing: 2px; margin: 10px 0; user-select: none; }
table.schedgrid th { position: static; background: none; color: var(--muted); font-size: 11px; padding: 2px 4px; cursor: pointer; text-align: center; }
table.schedgrid tbody th { text-align: right; }
table.schedgrid td { width: 26px; height: 22px; padding: 0; border: 0; background: #3a3a3a; cursor: pointer; }
table.schedgrid td.on { background: var(--up); }
table.schedgrid td input { display: none; }
.headscan { float: right; margin-right: 6px; }
button.headedit { border: 0; cursor: pointer; font: inherit; font-size: 13px; }
.sensorhead .shmsg { font-size: 13px; margin-left: 2px; margin-top: 2px; font-weight: 600; max-width: 900px; }
table.devlist tr.off td { color: #666; }
.headpause { float: right; margin-right: 6px; margin-top: 2px; }
.headpause summary { display: inline-block; font-size: 13px; font-weight: 400; }
.headpause form { top: 24px; }
table.log td.err, table.alerts td.err { color: var(--down); }
h2.sub form.inline { margin-left: 12px; }
.topbar .counters { margin-left: auto; }
.topbar .counter { text-decoration: none; }
.topbar .counter:hover { filter: brightness(1.15); text-decoration: none; }
.counter.ack { background: #f06070; color: #fff; }
.topsearch input { background: #1b1b1b; color: var(--text); border: 0; border-bottom: 1px solid #666; padding: 4px 8px; width: 180px; font-size: 13px; }
.topsearch input:focus { outline: 0; border-bottom-color: var(--accent); }
.searchhits { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.searchhits a { background: var(--panel); border: 1px solid var(--line); padding: 4px 10px; }
@media (max-width: 700px) { .topsearch input { width: 110px; } .topbar .counters { margin-left: 0; } }
.tokenbox { border-left: 6px solid var(--up); }
.tokenbox .token code { font-size: 18px; padding: 6px 10px; user-select: all; }
.cmpcounts { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.cmpcounts .counter { text-decoration: none; }
table.cmpcollectors td.ok { color: var(--up); }
table.cmp tr.v-Mismatch td:first-child { border-left: 4px solid var(--down); }
table.cmp tr.v-Migrated td:first-child { border-left: 4px solid var(--paused); }

/* Sign in */
.loginbody { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; }
.loginbox { background: var(--panel); border: 1px solid var(--line); padding: 24px 28px; width: 340px; display: flex; flex-direction: column; gap: 12px; }
.loginbox h1 { margin: 0 0 6px; font-size: 24px; color: var(--up); }
.loginbox label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 13px; }
.loginbox label.opt { flex-direction: row; align-items: center; gap: 8px; }
.loginbox input:not([type=checkbox]) { background: #111; color: var(--text); border: 0; border-bottom: 1px solid #666; padding: 8px 6px; font-size: 15px; }
.loginbox input:focus { outline: 0; border-bottom-color: var(--accent); }
.loginbox button.primary { background: var(--accent-fill); color: #fff; border: 0; padding: 10px; font-weight: 600; font-size: 15px; cursor: pointer; }
.topuser { color: var(--muted); font-size: 13px; margin-left: 8px; }
.enrol { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.enrol .qr { background: #fff; padding: 8px; width: 200px; }
.enrol .qr svg { width: 184px; height: 184px; display: block; }
.enrol .token code { font-size: 16px; user-select: all; }

/* Zero counters stay out of the bar, so red or yellow only ever means something is actually in that state */
.counter.zero { display: none; }

/* Devices page list view: one row per device, sensors as small state squares */
.views { margin-left: 12px; }
table.devrows { width: 100%; border-collapse: collapse; margin-top: 6px; }
table.devrows th, table.devrows td { padding: 4px 8px; border-bottom: 1px solid #333; text-align: left; vertical-align: middle; }
table.devrows th { color: #aaa; font-weight: normal; }
table.devrows td.num, table.devrows th.num { text-align: right; }
table.devrows td.squares { line-height: 1; }
.sq { display: inline-block; width: 16px; height: 16px; margin: 1px; border-radius: 4px; text-align: center; font-size: 11px; line-height: 16px; color: #000; text-decoration: none; background: var(--unknown); }
.sq.Up { background: var(--up); } .sq.Down { background: var(--down); color: #fff; } .sq.Warning { background: var(--warning); }
.sq.Paused, .sq.Suppressed { background: var(--paused); color: #fff; } .sq.Unknown { background: var(--unknown); }

/* Device header actions: the same buttons, order and spacing as the sensor page header */
.statehead .headactions { float: right; display: flex; gap: 6px; align-items: center; margin-top: 2px; font-weight: 400; font-size: 13px; }
/* A solid dark chip with white text reads clearly against any status colour; translucent dark text on
   lime or yellow was nearly invisible, so this is no longer conditional on which state the header is in.
   Scoped to any .act inside a status header, not just .headactions: the sensor page's own action row
   (.shactions, no .headactions) had the same problem under the generic .act rule. */
.statehead .act { text-decoration: none; color: #fff; background: rgba(0,0,0,0.38); }
.statehead .act:hover { background: rgba(0,0,0,0.55); }

/* Traffic Grapher: splitter and favourites */
.tgsplit { flex: 0 0 6px; align-self: stretch; cursor: col-resize; background: #333; border-radius: var(--radius); }
.tgsplit:hover { background: #4a90e2; }
.tgfilter { font-weight: 400; font-size: 12px; margin-left: 8px; color: #bbb; text-decoration: none; padding: 1px 6px; border-radius: var(--radius); }
.tgfilter.on { background: #555; color: #fff; }
.tgtree td.tgstar { width: 18px; padding-right: 0; }
.tgtree .star { background: none; border: 0; color: #666; cursor: pointer; font-size: 14px; padding: 0 2px; }
.tgtree .star.on { color: #e0a800; }

/* Custom graph on a light background */
.tggraphs.light .tgg { border-color: #cfcfcf; color: #222; }
.tggraphs.light .tgg .tgtitle { color: #222; }

/* Welcome page: the two donuts, as PRTG's home */
.welcome { max-width: 1400px; }
.welcomehead { display: flex; align-items: center; gap: 60px; padding: 10px 0 24px; }
.wordmark { font-weight: 800; font-size: 26px; line-height: 1; color: #fff; letter-spacing: 1px; }
.wordmark span { color: var(--accent); }
.wordmark small { display: block; font-weight: 400; font-size: 11px; color: #aaa; letter-spacing: 2px; margin-top: 4px; text-transform: uppercase; }
.welcomehead h1 { font-weight: 400; font-size: 28px; margin: 0; }
.welcomedonuts { display: flex; flex-wrap: wrap; gap: 80px; justify-content: center; padding: 10px 20px 40px; }
.wdonut { display: flex; gap: 24px; align-items: flex-start; }
.wdonut .donutwrap { text-align: center; }
.wdonut .donutname { font-size: 20px; color: #ccc; margin-top: 4px; }
.wdonut .donutlegend { display: flex; flex-direction: column; gap: 8px; font-size: 14px; padding-top: 12px; }
.wdonut .donutlegend a { display: flex; gap: 10px; align-items: center; color: #d8d8d8; text-decoration: none; }
.wdonut .donutlegend a:hover span:last-child { text-decoration: underline; }
.wdonut .donutlegend .badge { min-width: 16px; text-align: center; font-size: 11px; font-weight: 700; color: #000; padding: 1px 3px; border-radius: 4px; }
.wdonut .badge.Down { background: #e5282f; color: #fff; } .wdonut .badge.DownAck { background: #f06070; color: #fff; } .wdonut .badge.Warning { background: #ffd400; }
.wdonut .badge.Up { background: #a8c525; } .wdonut .badge.Paused { background: #4a90e2; color: #fff; } .wdonut .badge.Unknown { background: #8a8a8a; }
.wbtn { display: inline-block; margin-top: 6px; background: var(--accent-fill); color: #fff !important; padding: 6px 12px; border-radius: var(--radius); font-weight: 600; width: max-content; }

/* Tree: drag handle on a device node, and the row being dragged */
.tree li.device > .node .handle { cursor: grab; color: #666; margin-right: 4px; user-select: none; }
.tree li.device > .node .handle:hover { color: #ddd; }
.tree li.device.dragging { opacity: 0.5; }