/* Piwnica Dyzson'a (dyzson.pl): additions on top of detailing style.css (reuses its :root vars) */

/* the hidden attribute must beat component display rules (.modal/.console/.login-overlay set display) */
[hidden]{display:none !important}
.page-header{margin-bottom:16px}
.page-header+.sec-title,.page-main>.sec-title:first-child{margin-top:0}

.top-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.health-dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.upd-dot{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:color-mix(in srgb,var(--yellow) 22%,var(--bg3));border:1px solid color-mix(in srgb,var(--yellow) 45%,var(--border));color:var(--yellow);font:700 11px 'JetBrains Mono',monospace;cursor:pointer;transition:.15s}
.upd-dot:hover{background:color-mix(in srgb,var(--yellow) 32%,var(--bg3))}
.health-dot.warn{background:var(--yellow);box-shadow:0 0 8px var(--yellow)}
.health-dot.bad{background:var(--red);box-shadow:0 0 8px var(--red);animation:hdotpulse 1.6s ease-in-out infinite}
@keyframes hdotpulse{0%,100%{box-shadow:0 0 8px var(--red)}50%{box-shadow:0 0 16px var(--red),0 0 6px var(--red)}}
.reset-btn{padding:7px 13px;border-radius:var(--r);border:1px solid var(--border2);background:var(--bg3);color:var(--text2);font:600 12.5px Inter,sans-serif;cursor:pointer;transition:.2s}
.reset-btn:hover{border-color:var(--border3);color:var(--text)}
.muted{color:var(--muted);font-size:12.5px}
.loading{color:var(--muted);padding:40px;text-align:center}
.brand-img{width:30px;height:30px;border-radius:8px;object-fit:contain;flex-shrink:0}
.login-img{width:72px;height:72px;border-radius:18px;object-fit:contain;margin:0 auto;display:block}
#refresh-info{font-size:12px;white-space:nowrap}
#btn-refresh{padding:6px 11px;font-size:14px;line-height:1}
#btn-refresh.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:var(--r-md);border:1px solid var(--border2);background:linear-gradient(135deg,var(--bg3),var(--bg2));color:var(--text);font:600 13.5px Inter,sans-serif;cursor:pointer;transition:.18s var(--ease-out);text-align:left}
.btn:hover{border-color:var(--border3);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{background:linear-gradient(135deg,var(--blue2),var(--blue3));border-color:var(--blue3);color:#fff}
.btn-danger{background:linear-gradient(135deg,#e0564f,#b3322c);border-color:#b3322c;color:#fff}
.btn .tag{margin-left:auto;font:600 11px 'JetBrains Mono',monospace;padding:1px 7px;border-radius:10px;background:var(--bg4)}
.btn.has-upd{border-color:color-mix(in srgb,var(--yellow) 50%,var(--border2));box-shadow:0 0 0 1px color-mix(in srgb,var(--yellow) 25%,transparent) inset}

/* LOGIN */
.login-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--bg);padding:20px}
.login-card{width:100%;max-width:360px;background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--border);border-radius:var(--r-xl);padding:34px 30px;box-shadow:var(--shadow-lg);text-align:center;display:flex;flex-direction:column;gap:14px}
.login-mark{width:52px;height:52px;border-radius:14px;margin:0 auto;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue2),var(--blue3));color:#fff;font:800 18px 'JetBrains Mono',monospace}
.login-card h1{font-size:21px;font-weight:700}
.login-card p{color:var(--muted);font-size:13.5px;margin-top:-6px}
.login-card input{padding:12px 14px;border-radius:var(--r);border:1px solid var(--border2);background:var(--bg);color:var(--text);font-size:14px;font-family:inherit}
.login-card input:focus{outline:none;border-color:var(--blue)}
.login-err{color:var(--red);font-size:12.5px;min-height:16px}

/* STATUS GRID */
.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.scard{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;isolation:isolate;transition:.18s var(--ease-out)}
.scard::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(106,166,255,.09) 50%,transparent 65%);transform:translateX(-110%);transition:transform .85s var(--ease-out);pointer-events:none;mix-blend-mode:screen}
.scard:hover{transform:translateY(-1px);border-color:var(--border2);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.scard:hover::after{transform:translateX(110%)}
.scard h3{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.scard h3::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--muted);box-shadow:0 0 5px var(--muted);flex-shrink:0}
.kv{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.kv .v{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:2px 10px;border-radius:11px;font:700 11px 'JetBrains Mono',monospace;white-space:nowrap}
.pill.ok{color:var(--green);background:color-mix(in srgb,var(--green) 16%,transparent)}
.pill.warn{color:var(--yellow);background:color-mix(in srgb,var(--yellow) 16%,transparent)}
.pill.bad{color:var(--red);background:color-mix(in srgb,var(--red) 16%,transparent)}
.pill.idle{color:var(--muted);background:var(--bg4)}
.pill.spin{color:var(--blue);background:color-mix(in srgb,var(--blue) 16%,transparent)}
.bar{height:8px;border-radius:99px;background:var(--bg);border:1px solid var(--border);overflow:hidden;margin-top:6px}
.bar > i{display:block;height:100%;border-radius:99px}
.poolrow{margin:10px 0}
.poolrow .top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:0 10px;font-size:12.5px;margin-bottom:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* UPDATES */
.upd-toolbar{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.updates-list{display:flex;flex-direction:column;gap:10px}
.ugroup{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--ug-c,var(--border3));border-radius:var(--r-lg);padding:14px 18px;transition:border-color .2s}
.ugroup:hover{border-color:var(--border2);border-left-color:var(--ug-c,var(--border3))}
.ugroup-ok{opacity:.45;transition:opacity .25s}
.ugroup-ok:hover{opacity:.8}
.ugroup-apt{--ug-c:var(--blue)}
.ugroup-docker{--ug-c:var(--teal)}
.ugroup-haos{--ug-c:var(--purple)}
.ugroup h4{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ug-c,var(--muted));margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace}
.ubadge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;border-radius:9px;font:700 10.5px 'JetBrains Mono',monospace;background:color-mix(in srgb,var(--ug-c,var(--muted)) 18%,transparent);color:var(--ug-c,var(--muted));border:1px solid color-mix(in srgb,var(--ug-c,var(--muted)) 28%,transparent);margin-left:auto}
.ubadge.ok{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green);border-color:color-mix(in srgb,var(--green) 25%,transparent)}
.ugrp-btn{font:600 10.5px Inter,sans-serif;text-transform:none;letter-spacing:0;padding:3px 10px;border-radius:8px;border:1px solid color-mix(in srgb,var(--ug-c,var(--muted)) 35%,var(--border));background:color-mix(in srgb,var(--ug-c,var(--muted)) 8%,var(--bg3));color:var(--ug-c,var(--muted));cursor:pointer;transition:.15s;flex-shrink:0}
.ugrp-btn:hover{background:color-mix(in srgb,var(--ug-c,var(--muted)) 14%,var(--bg3));border-color:var(--ug-c,var(--muted));color:var(--text)}
.ugroup ul{list-style:none;margin:0;padding:0}
.ugroup li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--border)}
.ugroup li:last-child{border-bottom:none}
.uver-pkg{font:600 12px 'JetBrains Mono',monospace;color:var(--text2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.uver-val{display:flex;align-items:center;gap:5px;flex-shrink:0}
.uver-old{font:500 11px 'JetBrains Mono',monospace;color:var(--faint);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--faint) 50%,transparent)}
.uver-sep{color:var(--blue);font-size:11px;font-weight:700;flex-shrink:0}
.uver-new{font:700 11px 'JetBrains Mono',monospace;color:var(--green)}
.uver-img{font:500 11px 'JetBrains Mono',monospace;color:var(--faint);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ugroup.none h4{color:var(--text2);border-bottom:none;margin-bottom:0;padding-bottom:0;text-transform:none;font-size:13.5px;letter-spacing:0;font-family:inherit}

/* HISTORY */
.history-list{display:flex;flex-direction:column;gap:8px}
.hrow{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--border3);border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s,border-left-color .2s}
.hrow:hover{border-color:var(--border2)}
.hrow.hrow-ok{border-left-color:color-mix(in srgb,var(--green) 55%,var(--border3))}
.hrow.hrow-err{border-left-color:color-mix(in srgb,var(--red) 55%,var(--border3))}
.hrow-head{display:flex;align-items:center;gap:14px;padding:10px 16px;cursor:pointer;transition:background .15s}
.hrow-head:hover{background:var(--bg3)}
.hrow-head::after{content:'›';margin-left:auto;color:var(--faint);font-size:16px;line-height:1;flex-shrink:0;transition:transform .2s,color .15s}
.hrow-head:hover::after{color:var(--muted)}
.hrow.expanded .hrow-head::after{transform:rotate(90deg);color:var(--text2)}
.hrow-when{font:600 12px 'JetBrains Mono',monospace;color:var(--muted);min-width:108px}
.hrow-label{font-weight:600;font-size:13.5px;flex:1}
.hrow-meta{display:flex;align-items:center;gap:8px;font:600 12px 'JetBrains Mono',monospace;color:var(--muted)}
.hrow-out{margin:0;padding:12px 16px;border-top:1px solid var(--border);background:#070a10;color:#cfe3ff;font:500 11.5px/1.5 'JetBrains Mono',monospace;white-space:pre-wrap;word-break:break-word;max-height:300px;overflow:auto}

/* ACTIONS */
.actions-wrap{display:flex;flex-direction:column;gap:12px}
.agroup{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--ag-c,var(--blue));border-radius:var(--r-lg);padding:16px 18px;transition:border-color .2s}
.agroup:hover{border-color:var(--border2);border-left-color:var(--ag-c,var(--blue))}
.agroup-apt{--ag-c:var(--blue)}
.agroup-docker{--ag-c:var(--teal)}
.agroup-haos{--ag-c:var(--purple)}
.agroup-all{--ag-c:var(--green)}
.agroup-maint{--ag-c:var(--orange)}
.agroup-host{--ag-c:var(--red)}
.agroup .agroup-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ag-c,var(--blue));margin-bottom:12px;font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:7px}
.agroup .agroup-title::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ag-c,var(--blue));box-shadow:0 0 6px var(--ag-c,var(--blue));flex-shrink:0}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
/* buttons: left-align only inside action grids */
.agrid .btn{justify-content:flex-start}
.btn-d2{border-color:color-mix(in srgb,var(--yellow) 35%,var(--border2))}
.btn-d2:hover{border-color:var(--yellow);color:var(--yellow);box-shadow:0 0 0 1px color-mix(in srgb,var(--yellow) 14%,transparent) inset,var(--shadow)}
.btn-d3{border-color:color-mix(in srgb,var(--red) 40%,var(--border2));color:var(--red)}
.btn-d3:hover{border-color:var(--red);box-shadow:0 0 0 1px color-mix(in srgb,var(--red) 14%,transparent) inset,var(--shadow)}
/* has-upd: green badge (was yellow border) */
.btn.has-upd{border-color:color-mix(in srgb,var(--green) 35%,var(--border2));box-shadow:none}
.btn.has-upd:hover{border-color:var(--green)}
.btn.has-upd .tag{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green);border:1px solid color-mix(in srgb,var(--green) 28%,transparent)}

/* MODAL */
.modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgba(4,6,11,.72);backdrop-filter:blur(4px);padding:20px}
.modal-card{width:100%;max-width:440px;background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--border2);border-radius:var(--r-xl);padding:26px 26px;box-shadow:var(--shadow-lg)}
.modal-card h2{font-size:18px;font-weight:700;margin-bottom:10px}
.modal-card p{color:var(--text2);font-size:14px;line-height:1.55}
.modal-card #modal-type{width:100%;margin-top:12px;padding:10px 12px;border-radius:var(--r);border:1px solid var(--border3);background:var(--bg);color:var(--text);font-family:'JetBrains Mono',monospace}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

/* CONSOLE */
.console{position:fixed;left:0;right:0;bottom:0;z-index:150;max-height:46vh;display:flex;flex-direction:column;background:#070a10;border-top:1px solid var(--border3);box-shadow:0 -10px 40px rgba(0,0,0,.5)}
.console-head{display:flex;align-items:center;gap:12px;padding:9px 16px;border-bottom:1px solid var(--border);background:var(--bg2)}
.console-head #console-title{font:600 13px Inter,sans-serif}
.console-head .badge{margin-left:0;padding:2px 9px;border-radius:10px;font:700 11px 'JetBrains Mono',monospace}
.badge-run{color:var(--blue);background:color-mix(in srgb,var(--blue) 18%,transparent)}
.badge-ok{color:var(--green);background:color-mix(in srgb,var(--green) 18%,transparent)}
.badge-err{color:var(--red);background:color-mix(in srgb,var(--red) 18%,transparent)}
.console-head #console-close{margin-left:auto}
.console-head .console-meta{font:500 11px 'JetBrains Mono',monospace;color:var(--muted);font-variant-numeric:tabular-nums}
/* a job can be silent for 30 s during apt/initramfs; the pulse says "alive" */
.console-head .badge-run{animation:cpulse 1.4s ease-in-out infinite}
@keyframes cpulse{0%,100%{opacity:1}50%{opacity:.45}}
.console-body,#console-body{margin:0;padding:14px 16px;overflow:auto;font:500 12px/1.5 'JetBrains Mono',monospace;color:#cfe3ff;white-space:pre-wrap;word-break:break-word}

/* PULPIT */
.sec-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--page-c,var(--blue));margin:28px 0 14px;font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:10px}
.sec-title::before{content:'';flex:0 0 22px;height:1px;background:var(--page-c,var(--blue));box-shadow:0 0 6px var(--page-glow,var(--blue-glow))}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:12px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 12px;background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--border);border-radius:var(--r-lg);text-decoration:none;color:var(--text);transition:.18s var(--ease-out);overflow:hidden;isolation:isolate}
.tile::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(106,166,255,.13) 50%,transparent 65%);transform:translateX(-110%);transition:transform .8s var(--ease-out);pointer-events:none;mix-blend-mode:screen}
.tile:hover{transform:translateY(-3px);border-color:var(--border3);box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--blue) 8%,transparent)}
.tile-up::after{background:linear-gradient(115deg,transparent 35%,color-mix(in srgb,var(--green) 12%,transparent) 50%,transparent 65%)}
.tile-up:hover{box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--green) 10%,transparent)}
.tile-upd::after{background:linear-gradient(115deg,transparent 35%,color-mix(in srgb,var(--yellow) 14%,transparent) 50%,transparent 65%)}
.tile-upd:hover{box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--yellow) 10%,transparent)}
.tile-down::after{background:linear-gradient(115deg,transparent 35%,color-mix(in srgb,var(--red) 15%,transparent) 50%,transparent 65%)}
.tile-down:hover{box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--red) 14%,transparent)}
.tile:hover::after{transform:translateX(110%)}
.tile img{width:42px;height:42px;object-fit:contain;position:relative;z-index:1}
.tile .tfb{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:var(--bg4);color:var(--blue);font:800 18px 'JetBrains Mono',monospace;position:relative;z-index:1}
.tile span{font-size:12.5px;font-weight:600;text-align:center;position:relative;z-index:1}
/* .sdot is a GENERIC status dot: it also sits next to Proxmox guests and Siec
   ports. Scoped to .tile it left those <i> elements sizeless and invisible. */
.sdot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;vertical-align:middle}
.sdot.up{background:var(--green)}
.sdot.upd{background:var(--yellow)}
.sdot.down{background:var(--red);animation:sdotpulse 1.4s ease-in-out infinite}
.tile .sdot{position:absolute;top:8px;right:8px;box-shadow:0 0 0 2px var(--bg2);z-index:2}
@keyframes sdotpulse{0%,100%{opacity:1}50%{opacity:.3}}

.pmx-widget{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.pmx-card{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;position:relative;overflow:hidden;isolation:isolate;transition:.18s var(--ease-out)}
.pmx-card::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(106,166,255,.09) 50%,transparent 65%);transform:translateX(-110%);transition:transform .85s var(--ease-out);pointer-events:none;mix-blend-mode:screen}
.pmx-card:hover{transform:translateY(-1px);border-color:var(--border2);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.pmx-card:hover::after{transform:translateX(110%)}
.pmx-card h3{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.pmx-card h3::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--muted);box-shadow:0 0 5px var(--muted);flex-shrink:0}
.gline{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px;gap:10px}
.gline:last-child{border-bottom:none}
.gline .gn{font-weight:600}

.dtable-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg2)}
table.dock{width:100%;border-collapse:collapse;font-size:13px}
table.dock th{text-align:left;padding:10px 14px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border)}
table.dock td{padding:9px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table.dock tbody tr{transition:background .12s}
table.dock tbody tr:hover td{background:color-mix(in srgb,var(--bg3) 60%,var(--bg2))}
table.dock tr:last-child td{border-bottom:none}
table.dock td.name{font-weight:600}
table.dock tr.dr-run td:first-child{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--green) 50%,transparent)}
table.dock tr.dr-stop td:first-child{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--red) 35%,transparent)}
.dctl{display:flex;gap:6px}
.dctl button{width:30px;height:28px;border-radius:7px;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:13px;transition:.15s}
.dctl button:hover{border-color:var(--border3);color:var(--text);background:var(--bg4)}
.dctl button.stop:hover{color:var(--red);border-color:var(--red)}

@media(max-width:760px){.pmx-widget{grid-template-columns:1fr}}
@media(max-width:640px){
  .topbar-inner{padding:0 16px;gap:12px}
  .page{padding:28px 16px 120px}
}

/* PAGE LAYOUT — main + sidebar */
.page-layout{display:grid;grid-template-columns:1fr 288px;gap:28px;align-items:stretch}
.page-main{min-width:0}
/* min-width:0 is NOT cosmetic: at <=1000px the sidebar shares a 1fr track and
   its nowrap content (port device lists) otherwise blows the whole page wider
   than the phone, pushing every right-aligned value off-screen */
.page-sidebar{position:sticky;top:72px;display:flex;flex-direction:column;gap:10px;min-width:0}
/* sec-title w kolumnie flex nie zwija marginesow, a gap:10px dochodzi do marginesu.
   Dobrane tak, by dac te same 28px nad i 14px pod naglowkiem co w .page-main. */
.page-sidebar > .sec-title{margin:18px 0 4px}
.page-sidebar > .sec-title:first-child{margin-top:0}
/* wysokosc rowna kartom routera ustawia syncPortsHeight() w JS (mierzy, nie zgaduje) */
#net-ports{overflow-y:auto;box-sizing:border-box}
/* Sieć to jedyny widok dwukolumnowy. "Urządzenia w sieci" ma w naglowku pole szukania
   (~27px), "Ochrona i kopie" sam tekst (~13px), a .sec-title centruje tresc w pionie,
   wiec tekst siedzial 7px nizej po lewej. Wspolna dolna granica wysokosci zrownuje oba. */
#page-siec .sec-title{min-height:30px}
.sidebar-section{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--border);border-left:3px solid var(--page-c,var(--border3));border-radius:var(--r-lg);padding:14px 16px}
.sidebar-sec-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.sidebar-sec-head h3{margin:0;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--page-c,var(--muted));font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:6px}
.sidebar-sec-head h3::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--page-c,var(--muted));box-shadow:0 0 4px var(--page-glow,transparent);flex-shrink:0}
.sidebar-actions{display:flex;flex-direction:column;gap:6px}
.sidebar-actions .btn{justify-content:flex-start;padding:8px 11px;font-size:12.5px;width:100%}
.btn-sm{padding:3px 9px;font-size:11.5px;border-radius:7px;line-height:1.5;height:auto;min-height:0}
.upd-ctrl{display:flex;align-items:center;gap:6px;flex-shrink:0}
.upd-ts{font:500 10px 'JetBrains Mono',monospace;color:var(--faint);white-space:nowrap}
/* compact updates inside sidebar */
.page-sidebar .updates-list{gap:7px}
.page-sidebar .ugroup{padding:10px 12px}
.page-sidebar .ugroup h4{font-size:10px;margin-bottom:6px;padding-bottom:6px}
.page-sidebar .ugroup li{padding:3px 0;font-size:11.5px}
.page-sidebar .uver-pkg{font-size:10.5px}
.page-sidebar .uver-old,.page-sidebar .uver-new{font-size:10px}
@media(max-width:1000px){.page-layout{grid-template-columns:1fr}.page-sidebar{position:static}}

/* MONITORING WIDGETS */
.widgets-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wcard{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;isolation:isolate;transition:.18s var(--ease-out)}
.wcard::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(106,166,255,.09) 50%,transparent 65%);transform:translateX(-110%);transition:transform .85s var(--ease-out);pointer-events:none;mix-blend-mode:screen}
.wcard:hover{transform:translateY(-1px);border-color:var(--border2);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.wcard:hover::after{transform:translateX(110%)}
.wcard h3{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.wcard h3::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--muted);box-shadow:0 0 5px var(--muted);flex-shrink:0}
.km-group-label{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:10px 0 4px;margin-bottom:2px;border-bottom:1px solid var(--border)}
.km-group-label:first-child{padding-top:2px}
.km-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}
.km-row:last-child{border-bottom:none}
.km-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.km-dot.up{background:var(--green)}
.km-dot.down{background:var(--red);animation:sdotpulse 1.4s ease-in-out infinite}
.km-dot.unknown{background:var(--muted)}
.km-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.km-uptime{font:600 12px 'JetBrains Mono',monospace;color:var(--muted);min-width:46px;text-align:right}
.km-ms{font:600 12px 'JetBrains Mono',monospace;color:var(--muted);min-width:52px;text-align:right}
.ag-top{list-style:none;margin:4px 0 0;padding:0}
.ag-top li{font:500 11.5px 'JetBrains Mono',monospace;color:var(--text2);padding:4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--border)}
.ag-top li:last-child{border-bottom:none}
@media(max-width:760px){.widgets-row{grid-template-columns:1fr}}

/* Motywy stron i zakladek zyja W JEDNYM miejscu, nizej w tym pliku.
   Byla tu ich starsza kopia (bez Sieci i Aktualizacji, Historia na zolto),
   martwa bo nadpisywana, ale mylaca przy kazdej kolejnej edycji. */
.nav-cnt{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:14px;padding:0 4px;border-radius:7px;background:color-mix(in srgb,var(--yellow) 22%,var(--bg3));border:1px solid color-mix(in srgb,var(--yellow) 40%,var(--border));color:var(--yellow);font:700 9.5px 'JetBrains Mono',monospace;margin-left:5px;vertical-align:middle;line-height:1}

/* SERVER STATS panel (Pulpit — task-manager rows) */
.sstat-panel{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--border);border-radius:var(--r-lg);padding:4px 20px}
/* tabela: nazwa | pasek | % | DUZY wykres | temperatura | reszta do prawej.
   Stale szerokosci kolumn = piony rownaja sie miedzy wierszami. */
.sstat-row{display:grid;grid-template-columns:142px minmax(70px,1fr) 56px 200px 96px 250px;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--border)}
.sstat-pct{justify-self:start}
.sstat-chart{min-width:0}
.sstat-chart svg.spark{width:100%;height:26px;opacity:.9;display:block}
.sstat-temp{justify-self:start;white-space:nowrap}
.sstat-rest{display:flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap;min-width:0}
@media(max-width:1240px){.sstat-row{grid-template-columns:130px minmax(60px,1fr) 52px 150px 90px 235px;gap:10px}}
.sstat-row:last-child{border-bottom:none}
.sstat-rname{font:600 12.5px Inter,sans-serif;color:var(--text2);white-space:nowrap}
.sstat-rbar{min-width:0}
.sstat-rbar.bar{margin-top:0;height:6px}
.sstat-rval{font:600 12px/1.2 'JetBrains Mono',monospace;color:var(--text);display:flex;align-items:center;gap:6px;white-space:nowrap;justify-content:flex-end}
.sstat-sub2{font:500 11px 'JetBrains Mono',monospace;color:var(--muted)}

/* HA VM single-card layout */
.pmx-single{grid-template-columns:1fr !important}

#proxmox-storage{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}

/* CSP-clean utility classes (inline-style removal) */
.km-empty{padding:8px 0}
.sub-head{font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.sub-head-a{margin:10px 0 4px}
.sub-head-b{margin-bottom:6px}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mt-14{margin-top:14px}
.mb-8{margin:4px 0 8px}
.fs-11{font-size:11px}
.note-inline{font-size:11px;margin-left:6px}
.c-red{color:var(--red)}
.c-yellow{color:var(--yellow)}
.c-green{color:var(--green)}
.modal-desc{color:var(--text2)}
.warn-line{color:var(--yellow);font-weight:600}
.warn-strong{font-weight:700}
.warn-strong.d3{color:var(--red)}
.warn-strong.d2{color:var(--yellow)}
.ml-auto{margin-left:auto}


/* ---------- siec / router ---------- */
.net-ports { display: flex; flex-direction: column; gap: 6px; }
/* keep the Kuma group labels from stretching a lone monitor across a whole row */
.km-row { min-width: 0; }
.net-port { display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.03); }
.np-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.np-label { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-if { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--muted); margin-left: auto; }
.np-rate { display: flex; gap: 10px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--muted); }
.np-dn, .np-up { white-space: nowrap; }
.np-rate .np-up { margin-left: auto; }
.cli-unknown td.name { color: var(--yellow); }
.mono { font-family: "JetBrains Mono", monospace; }
table.dock td.mono { font-size: 11px; }

.np-dev { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-free { font-style: italic; opacity: .6; }
.np-idle { opacity: .55; }
.np-bar { height: 3px; margin-top: 2px; }
.cli-filter { background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 8px; color: inherit; font: inherit; font-size: 12px; padding: 5px 10px; min-width: 220px; }
.cli-filter:focus { outline: none; border-color: var(--blue); }
.ugroup-note { font-size: 11px; color: var(--muted); padding: 6px 10px 2px; font-style: italic; }

.infra-src { opacity: .7; }
.refresh-sel { color-scheme: dark; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 8px; color: var(--text); font: inherit; font-size: 11px; font-weight: 600;
  padding: 4px 6px; cursor: pointer; }
.refresh-sel:hover { border-color: var(--border3); background: var(--bg4); }
.refresh-sel:focus { outline: none; border-color: var(--blue); }
.refresh-sel option { background: #10151f; color: #e6edf7; font-weight: 500; }
.refresh-sel option:checked { background: var(--blue); color: #fff; }

/* ---------- etap1: sparklines + attention strip ---------- */
svg.spark { display: inline-block; }
.sstat-spark { display: inline-block; width: 84px; margin-right: 10px; vertical-align: middle; }
.sstat-spark svg.spark { width: 100%; height: 20px; opacity: .8; }
.spark-row { margin-top: 10px; }
.spark-row svg.spark { width: 100%; height: 30px; opacity: .9; }
.attention { margin: 2px 0 20px; }
.att { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.att-all-ok { display: flex; gap: 9px; align-items: center; color: var(--green); font-size: 13px; font-weight: 600; }
.att-chip { border: 1px solid; border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer; background: transparent; }
.att-chip.att-warn { color: var(--yellow); border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.07); }
.att-chip.att-bad { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 9%, transparent); }
.att-chip:hover { filter: brightness(1.25); }

/* ---------- etap2: updates home + full-width info tabs + link-outs ---------- */
.page-layout.single { display: block; }
.page-layout.single > .page-main { max-width: none; }
.lnk { text-decoration: none; font-size: 13px; opacity: .5; margin-left: 4px; }
.lnk:hover { opacity: 1; }
/* this row belongs to the groups above it, so anchor it to them instead of
   letting it float between two sections */
.upd-cats { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ---------- etap4: replicas, skeletons, mobile tables ---------- */
.rep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 6px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.rep-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.rep-svc { font: 600 11px 'JetBrains Mono', monospace; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.skel { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.skel i { display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.11) 37%, rgba(255,255,255,.05) 63%);
  background-size: 400% 100%; animation: skel 1.4s ease infinite; }
.skel i:nth-child(2) { width: 78%; }
.skel i:nth-child(3) { width: 55%; }
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (max-width: 720px) {
  table.dock thead { display: none; }
  table.dock, table.dock tbody, table.dock tr, table.dock td { display: block; width: 100%; }
  table.dock tr { border: 1px solid var(--border2); border-radius: 10px; margin-bottom: 10px;
    padding: 8px 12px; background: var(--bg2); }
  table.dock td { display: flex; justify-content: space-between; align-items: center; gap: 12px;
    border: 0; padding: 5px 0; text-align: right; }
  table.dock td::before { content: attr(data-th); color: var(--muted); font-size: 11px;
    font-weight: 600; text-transform: uppercase; letter-spacing: .04em; text-align: left; }
  table.dock td.name { font-size: 14px; font-weight: 700; padding-bottom: 8px;
    border-bottom: 1px solid var(--border); }
  .cli-filter { min-width: 0; width: 100%; margin-top: 8px; }
  .sstat-spark { display: none; }
}

/* ---------- polish: framed status banner ---------- */
.att { border: 1px solid var(--border2); background: var(--bg2);
  border-radius: 12px; padding: 13px 16px; }
.att.att-all-ok { border-color: color-mix(in srgb, var(--green) 35%, transparent); background: color-mix(in srgb, var(--green) 6%, transparent); }

/* ---------- polish: updates page, compact when everything is current ---------- */
/* Two zones, not one interleaved grid. An expanded group used to take
   `grid-column: 1/-1` mid-flow, which tore the row of chips apart and left dead
   space. Now: things that need action stack full-width on top, things that are
   fine wrap into a strip of content-width pills below. */
#upd-all { display: flex; flex-direction: column; gap: 14px; }
#upd-all .ugroup { margin: 0; }
.upd-pending { display: flex; flex-direction: column; gap: 10px; }
.upd-ok { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 8px; }
/* "nie sprawdzono" is a WARNING, not a tab colour: it stays yellow on every page */
.ubadge.unk { background: color-mix(in srgb, var(--yellow) 18%, transparent);
  color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 32%, transparent); flex-shrink: 0; }
#upd-all .ugroup-unk { --ug-c: var(--yellow); }
.warn-note { color: var(--yellow); font-style: normal; }
/* per-image button sits at the right edge of its row */
.ugrp-btn.item-btn { margin-left: 10px; }

/* ---------- polish: Kuma lists stop stretching across the whole 1080p width ---------- */
#proxmox-kuma, #ha-kuma { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: 12px; row-gap: 6px; align-content: start; }
#proxmox-kuma .km-row, #ha-kuma .km-row { border-bottom: 0; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; }
#proxmox-kuma .km-group-label, #ha-kuma .km-group-label { margin-top: 6px; }
#proxmox-kuma > h3, #ha-kuma > h3,
#proxmox-kuma .km-group-label, #ha-kuma .km-group-label,
#proxmox-kuma .km-empty, #ha-kuma .km-empty { grid-column: 1 / -1; }

/* ---------- polish: side-by-side widget cards size to their own content ---------- */
.widgets-row { align-items: start; }

/* ---------- obs: f2b, incidents, zoom, forecast ---------- */
svg.spark[data-mk] { cursor: pointer; }
.inc-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.inc-row:last-child { border-bottom: none; }
.zoom { position: fixed; inset: 0; z-index: 400; background: rgba(4,6,10,.72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.zoom[hidden] { display: none; }
.zoom-card { width: min(860px, 96vw); background: linear-gradient(135deg,var(--bg2),var(--bg3));
  border: 1px solid var(--border2); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: 0 18px 60px rgba(0,0,0,.5); }
.zoom-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.zoom-head h2 { font-size: 15px; margin: 0; flex: 1; }
.zoom-ranges { display: flex; gap: 6px; }
.zoom-ranges button { font: inherit; font-size: 12px; color: var(--muted); background: var(--bg3);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.zoom-ranges button.on { color: var(--text); border-color: var(--blue); }
.zoom-chart svg.spark { width: 100%; height: 200px; }
#zoom-meta { margin-top: 8px; }
.fc-note { white-space: nowrap; }
.widgets-row { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ---------- one-shot ok toast ---------- */
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: flex; gap: 9px; align-items: center;
  border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); background: rgba(10,18,13,.95); color: var(--green);
  font-size: 13px; font-weight: 600; padding: 12px 18px; border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0,0,0,.55); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease;
  max-width: min(92vw, 520px); pointer-events: none; }
.toast.show { opacity: 1; transform: none; }

/* ---------- list expander, styled like the rest of the panel ---------- */
.ugrp-more { display: block; width: 100%; margin: 6px 0 0; padding: 7px 0 2px;
  background: transparent; border: 0; border-top: 1px solid var(--border);
  color: var(--muted); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  text-align: center; cursor: pointer; transition: color .15s ease; }
.ugrp-more::before { content: "\25be"; margin-right: 6px; display: inline-block;
  transition: transform .18s ease; }
.ugrp-more.open::before { transform: rotate(180deg); }
.ugrp-more:hover { color: var(--blue); }

/* ---------- topbar must survive 7 tabs on one line ---------- */
#refresh-info { white-space: nowrap; }
@media (max-width: 1600px) {
  .topbar-nav button { padding-left: 11px; padding-right: 11px; }
  .topbar-inner { gap: 10px; }
}
@media (max-width: 1360px) {
  #refresh-info { display: none; }
  .topbar-nav button { font-size: 13px; }
}

/* ---------- Aktualizacje: a group with nothing to do is ONE line, not an empty box ---------- */
#upd-all .ugroup-ok { opacity: 1; padding: 10px 14px; background: transparent;
  border-color: var(--border); border-left-width: 3px; }
#upd-all .ugroup-ok:hover { background: var(--bg2); }
#upd-all .ugroup-ok h4 { margin: 0; padding: 0; border-bottom: 0; }
#upd-all .ugroup-ok ul { display: none; }
#upd-all .ugroup:not(.ugroup-ok) { background: var(--bg2); }

/* ---------- Aktualizacje sidebar: per-stack buttons are secondary, so they read as such ------- */
.sidebar-actions .btn-stack { font-size: 12px; font-weight: 500; padding-top: 7px; padding-bottom: 7px;
  color: var(--text2); }

/* ---------- Historia: day separators + filters + output preview ---------- */
.hist-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.hist-f { border: 1px solid var(--border); background: var(--bg2); color: var(--muted);
  font: 600 11px Inter, sans-serif; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  transition: .15s; }
.hist-f:hover { color: var(--text); border-color: var(--border2); }
.hist-f.on { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 45%, transparent);
  background: color-mix(in srgb, var(--yellow) 10%, transparent); }
.hist-count { margin-left: auto; font: 600 11px 'JetBrains Mono', monospace; color: var(--faint); }
.hist-day { font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); padding: 12px 2px 2px; }
.hist-day:first-child { padding-top: 0; }
.hrow-sub { font: 500 11px 'JetBrains Mono', monospace; color: var(--faint); padding: 0 16px 10px 16px;
  margin-top: -4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrow.expanded .hrow-sub { display: none; }

/* replicas card sits next to the summary now, so two chips per row read better than five */
#status-grid .rep-grid { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  margin-top: 0; padding-top: 0; border-top: 0; }
.rep-item .pill { white-space: nowrap; flex-shrink: 0; }
.rep-item .rep-svc { min-width: 0; flex: 1; }

/* ---------- monitoring cards keep one height; the blocked-domain list scrolls inside ---------- */
.widgets-row { align-items: stretch; }
.widgets-row .wcard { display: flex; flex-direction: column; min-width: 0; }
#adguard-widget .ag-top { max-height: 168px; overflow-y: auto; }
#adguard-widget .ag-top::-webkit-scrollbar { width: 6px; }
#adguard-widget .ag-top::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* ---------- Aktualizacje: rows size to their own content ---------- */
/* NO grid-auto-rows:1fr here. It makes every row equal height, so one expanded
   full-width group (a system that actually HAS an update) imposed its height on
   the rows of one-line "aktualne" chips and blew a dead gap into the page. The
   chips keep a common height on their own via min-height below. */
/* even columns, equal heights. The pills stretch to fill their track, so every
   row lines up; the "aktualne" badge is pushed to the right edge of the pill. */
#upd-all .ugroup-ok { display: flex; align-items: center; min-height: 46px; padding: 9px 14px; }
#upd-all .ugroup-ok h4 { width: 100%; }
.stack-label { font: 700 9.5px 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); padding: 12px 2px 6px; }
.stack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.stack-grid .btn { width: 100%; justify-content: center; padding: 7px 6px; font-size: 11.5px; }

/* ---------- history: delete a single entry ---------- */
.hrow-del { flex-shrink: 0; margin-left: 10px; width: 24px; height: 24px; line-height: 1;
  border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--faint);
  font-size: 12px; cursor: pointer; transition: .15s; }
.hrow-del:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent);
  background: color-mix(in srgb, var(--red) 10%, transparent); }
.hrow-head::after { margin-left: 0; }

/* ---------- Aktualizacje: the update card spans the full width, the three
   smaller cards sit in a row underneath. It used to be RESERVED two grid rows
   (grid-row: 1 / span 2) because it carried eighteen buttons; once it dropped
   to six, that reservation left a 245px hole and pushed Restarty into a third
   row of its own. Full width instead: the card sizes itself. ---------- */
.act-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.act-grid .act-card:first-child { grid-column: 1 / -1; }
@media (max-width: 1000px) {
  .act-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .act-grid { grid-template-columns: 1fr; }
}
.act-card h3 { margin-bottom: 12px; }
#upd-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 8px; }
/* one height for every action button, so a label that does wrap can no longer
   make its whole row ragged */
.act-card .btn { min-height: 42px; }
/* the do-everything action gets its own full-width row */
#upd-actions .btn[data-action="update-all"] { grid-column: 1 / -1; }
#upd-actions .stack-label { grid-column: 1 / -1; }
#upd-actions .stack-grid { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---------- sidebar: no visible section titles, but keep the exact height of one so the first
   box lines up with the first card of the main column ---------- */
.page-sidebar > .sec-ghost { visibility: hidden; margin-top: 0; margin-bottom: 4px; }
/* 4px + the sidebar flex gap (10px) = the 14px the main column puts under its sec-title */

/* HA: DOM I URZADZENIA */
#ha-home{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.ha-wide{grid-column:1/-1}
.ha-people{display:flex;flex-direction:column}
.ha-p{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--border)}
.ha-p:last-child{border-bottom:none}
.ha-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ha-dot.on{background:var(--green);box-shadow:0 0 8px var(--green)}
.ha-dot.off{background:var(--border3)}
.ha-pname{font-size:13px;font-weight:600;color:var(--text)}
.ha-pst{margin-left:auto;font-size:12px;color:var(--muted)}
.ha-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.ha-tile{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:11px 6px;text-align:center}
.ha-tile b{display:block;font:700 19px 'JetBrains Mono',monospace;color:var(--text);line-height:1.15}
.ha-tile b i{font-style:normal;font-size:13px;color:var(--faint)}
.ha-tile b.dim{color:var(--faint)}
.ha-tile b.hot{color:var(--green)}
.ha-tile span{display:block;margin-top:4px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ha-note{margin-top:11px;font-size:11.5px;line-height:1.6;color:var(--faint)}
.ha-bat{display:flex;flex-direction:column;gap:12px}
.ha-bat-row{display:grid;grid-template-columns:1fr auto;align-items:baseline}
.ha-bat-n{font-size:12.5px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ha-bat-v{font:700 12.5px 'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.ha-bat-row .bar{grid-column:1/-1;margin-top:5px}
.ha-autos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 24px}
.ha-auto{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.ha-auto-n{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ha-auto-q{color:var(--faint);font-size:11px;margin-left:6px}
.ha-auto-t{margin-left:auto;flex-shrink:0;font:500 11px 'JetBrains Mono',monospace;color:var(--faint)}
.ha-auto.off .ha-auto-n{color:var(--faint)}

/* ============ MOTYWY ZAKLADEK ============ */
:root{--pink:#f472b6;--pink-glow:rgba(244,114,182,.45)}

#page-pulpit{--page-c:var(--blue);--page-glow:var(--blue-glow)}
#page-proxmox{--page-c:var(--orange);--page-glow:rgba(251,146,60,.42)}
#page-docker{--page-c:var(--teal);--page-glow:rgba(52,216,196,.42)}
#page-ha{--page-c:var(--green);--page-glow:rgba(91,224,137,.42)}
#page-siec{--page-c:var(--purple);--page-glow:rgba(179,155,255,.42)}
#page-aktualizacje{--page-c:var(--yellow);--page-glow:rgba(251,191,36,.42)}
#page-historia{--page-c:var(--pink);--page-glow:var(--pink-glow)}

.topbar-nav [data-goto="pulpit"].active{--tab-c:var(--blue);--tab-glow:var(--blue-glow)}
.topbar-nav [data-goto="proxmox"].active{--tab-c:var(--orange);--tab-glow:rgba(251,146,60,.45)}
.topbar-nav [data-goto="docker"].active{--tab-c:var(--teal);--tab-glow:rgba(52,216,196,.45)}
.topbar-nav [data-goto="ha"].active{--tab-c:var(--green);--tab-glow:rgba(91,224,137,.45)}
.topbar-nav [data-goto="siec"].active{--tab-c:var(--purple);--tab-glow:rgba(179,155,255,.45)}
.topbar-nav [data-goto="aktualizacje"].active{--tab-c:var(--yellow);--tab-glow:rgba(251,191,36,.45)}
.topbar-nav [data-goto="historia"].active{--tab-c:var(--pink);--tab-glow:var(--pink-glow)}

/* Aktywna zakladke znaczy JEDNA jezdzaca pilka (.tab-pill nizej) + kolor tekstu.
   Statycznego pudelka na .active NIE przywracac: dwa wskazniki naraz to byl
   dokladnie ten "dziwny" efekt, ktory juz raz sprzatalismy. */
.topbar-nav button{transition:color var(--dur) var(--ease-out)}
.topbar-nav button.active{color:var(--tab-c,var(--text))}
.topbar-nav button:hover{color:var(--tab-c,var(--text))}

/* pilka: tlo + ramka + swiecace podkreslenie, przejezdza sprezyscie miedzy
   zakladkami; kolory dostaje z JS, ktory czyta --tab-c aktywnego przycisku */
.tab-pill{position:absolute;top:50%;left:0;height:34px;width:0;transform:translate(0,-50%);
  background:var(--bg3);
  border:1px solid color-mix(in srgb,var(--pill-c,var(--blue)) 30%,var(--border));
  border-radius:var(--r);z-index:0;pointer-events:none;opacity:0;
  transition:transform .45s var(--ease-spring-soft),width .45s var(--ease-spring-soft),
             border-color .35s var(--ease-out),opacity .25s var(--ease-out)}
.tab-pill.ready{opacity:1}
.tab-pill::after{content:'';position:absolute;left:14px;right:14px;bottom:-7px;height:2px;
  background:var(--pill-c,var(--blue));border-radius:2px 2px 0 0;
  box-shadow:0 0 10px var(--pill-glow,var(--blue-glow)),0 0 2px var(--pill-c,var(--blue));opacity:.95;
  transition:background .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.tab-pill::before{content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(120% 80% at 50% 120%,color-mix(in srgb,var(--pill-c,var(--blue)) 18%,transparent),transparent 70%);opacity:.9}
@media(max-width:760px){
  /* JS ustawia translate z var(--pill-y): desktop -50%, tu 0, wiec pionem
     rzadzi top/height z CSS i pudelko nie wjezdza w tekst przycisku */
  .tab-pill{height:calc(100% - 12px);top:2px;--pill-y:0}
  .tab-pill::after{bottom:-3px}
}

/* karty przejmuja kolor strony: kropka naglowka, gorna kreska, refleks */
.page .scard h3::before{background:var(--page-c,var(--muted));box-shadow:0 0 6px var(--page-glow,transparent)}
.page .scard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--page-c,var(--blue)) 50%,transparent),transparent)
}
.page .scard::after{
  background:linear-gradient(115deg,transparent 35%,color-mix(in srgb,var(--page-c,var(--blue)) 11%,transparent) 50%,transparent 65%)
}

/* ---- motyw strony na pozostalych kontenerach (pmx / widgety / tabele / historia) ---- */
.page .pmx-card,.page .wcard,.page .sstat-panel,.page .act-card,.page .agroup,.page .dtable-wrap{position:relative}

/* kropka przy naglowku karty = kolor zakladki */
.page .pmx-card h3::before,
.page .wcard h3::before,
.page .sstat-panel h3::before,
.page .act-card h3::before{
  background:var(--page-c,var(--muted));
  box-shadow:0 0 6px var(--page-glow,transparent)
}

/* cienka kreska u gory kazdej karty */
.page .pmx-card::before,
.page .wcard::before,
.page .sstat-panel::before,
.page .dtable-wrap::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--page-c,var(--blue)) 50%,transparent),transparent)
}

/* refleks przy najechaniu w kolorze zakladki (byl na sztywno niebieski) */
.page .pmx-card::after{
  background:linear-gradient(115deg,transparent 35%,color-mix(in srgb,var(--page-c,var(--blue)) 11%,transparent) 50%,transparent 65%)
}

/* naglowek tabeli: podkreslenie w kolorze zakladki */
.page table.dock th{
  border-bottom:1px solid color-mix(in srgb,var(--page-c,var(--blue)) 28%,var(--border))
}

/* Historia: wiersze bez wyniku (ok/err maja swoj kolor semantyczny) */
.page .hrow{border-left-color:color-mix(in srgb,var(--page-c,var(--border3)) 45%,var(--border3))}

/* tytul sekcji i pasek boczny juz siedza na --page-c (nic tu nie trzeba) */

/* ---- sidebar Sieci: koniec z kartami w karcie ---- */
/* #net-sec wstawia pelne .scard DO .sidebar-section, ktora sama jest karta.
   Zdejmujemy chrom wewnetrznych kart, zostaje naglowek + wiersze, jak wszedzie. */
.page-sidebar .sidebar-section .scard{
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;overflow:visible;isolation:auto
}
.page-sidebar .sidebar-section .scard::before,
.page-sidebar .sidebar-section .scard::after{display:none}
.page-sidebar .sidebar-section .scard + .scard{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--border)
}
.page-sidebar .sidebar-section .scard h3{
  font-size:10px;letter-spacing:.11em;color:var(--text2);
  border-bottom:0;padding-bottom:0;margin-bottom:8px
}
.page-sidebar .sidebar-section .scard h3::before{
  background:var(--page-c,var(--muted));box-shadow:0 0 5px var(--page-glow,transparent)
}

/* porty: wiersze rozdzielone wloskiem, nie wypelnione kafle w kafelku */
.net-ports{gap:0}
.net-port{background:none;border-radius:0;padding:9px 0;border-bottom:1px solid var(--border)}
.net-port:first-child{padding-top:0}
.net-port:last-child{border-bottom:0;padding-bottom:0}

/* ---- grupy na Aktualizacjach ida za motywem zakladki ---- */
/* nazwa grupy ("PROXMOX VE", "SILNIK DOCKER") juz mowi czego dotyczy,
   wiec osobny kolor per system byl redundantny i klocil sie ze zolcia strony */
/* grupa dostaje kolor ZAKLADKI, do ktorej nalezy dana rzecz, a nie kolor
   mechanizmu instalacji. Kolejnosc ma znaczenie: .page .utab-* ma te sama
   specyficznosc co .page .ugroup, wiec musi stac PO nim, zeby wygrac. */
.page .ugroup{--ug-c:var(--page-c,var(--border3))}
.page .utab-proxmox{--ug-c:var(--orange)}
.page .utab-docker{--ug-c:var(--teal)}
.page .utab-ha{--ug-c:var(--green)}
.page .utab-siec{--ug-c:var(--purple)}
.page .agroup{--ag-c:var(--page-c,var(--blue))}
/* wyjatek: te dwa kolory NIE sa dekoracja, tylko ostrzezeniem */
.page .agroup-maint{--ag-c:var(--orange)}
.page .agroup-host{--ag-c:var(--red)}

/* ============ MOBILE (dashboard ma 7 zakladek i wlasne widoki) ============ */
/* naglowki sekcji z przyciskiem/filtrem w srodku moga sie zawinac, nie uciac */
.sec-title{flex-wrap:wrap;row-gap:8px}
@media(max-width:760px){
  /* style.css robi z nav siatke 4 kolumn pod 4 zakladki detailingu; przy 7
     zakladkach to dwa nierowne rzedy mikroprzyciskow. Jeden przewijany
     palcem rzad czyta sie lepiej i nie lamie badge'y aktualizacji. */
  /* flex:1 z bazy daje basis 0, wiec sama szerokosc nie wymusza zlamania
     wiersza i nav ladowal SCISNIETY w pierwszej linii (niewidoczny). Pelny
     flex-basis spycha go do wlasnego, drugiego wiersza. */
  .topbar-nav{display:flex;flex:0 0 calc(100% + 28px);overflow-x:auto;scrollbar-width:none;order:3;width:calc(100% + 28px);margin:0 -14px;padding:2px 10px 8px;border-top:1px solid var(--border)}
  .topbar-nav::-webkit-scrollbar{display:none}
  .topbar-nav button{flex:0 0 auto;padding:10px 12px;font-size:12.5px;border-radius:var(--r);min-height:0;text-align:left}
  /* style.css mobile wymusza biale .active; motyw zakladki ma zostac */
  .topbar-nav button.active{color:var(--tab-c,var(--text))}
  .top-right{order:2;margin-left:auto;gap:8px}
  #refresh-info{display:none}
  .top-right .reset-btn{padding:6px 10px;font-size:12px}
}
@media(max-width:720px){
  /* wiersz statystyk: nazwa+wartosci zawijaja sie, pasek schodzi pod spod */
  .sstat-row{display:flex;flex-wrap:wrap;gap:4px 10px;padding:10px 0}
  .sstat-rname{flex:1 0 auto}
  .sstat-rbar{order:3;flex:1 1 100%;margin-top:2px}
  .sstat-chart{display:none}
  .sstat-rest{white-space:normal;flex-wrap:wrap;justify-content:flex-start;row-gap:4px}
  .hrow-head{flex-wrap:wrap;row-gap:4px}
  .hrow-when{min-width:0}
  .console-head{flex-wrap:wrap;row-gap:4px}
}

/* mobilne karty tabel: stan run/stop na krawedzi KARTY, nie jako inset na
   pierwszej komorce, gdzie zielony pasek nachodzil na etykiete KONTENER */
@media(max-width:720px){
  table.dock tr{border-left:3px solid transparent}
  table.dock tr.dr-run{border-left-color:color-mix(in srgb,var(--green) 50%,transparent)}
  table.dock tr.dr-stop{border-left-color:color-mix(in srgb,var(--red) 40%,transparent)}
  table.dock tr.dr-run td:first-child,table.dock tr.dr-stop td:first-child{box-shadow:none}
}