/* SyncGPS - Server monitor page (templates/server.php + server.js) */
#srv{
	--s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#6250d6;
	--good:#1a7f37; --good-soft:#e6f4ea; --warn:#b07800; --warn-mark:#eda100; --warn-soft:#fff6db;
	--serious:#c4501b; --serious-soft:#fdeee6; --crit:#cf222e; --crit-soft:#fdecea;
	--grid:#edf0f4; --axis:#8a94a3; --track:#eef1f5;
}
.wrap.wide{max-width:1380px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.num{font-variant-numeric:tabular-nums;}

/* head */
.srv-head{align-items:center;}
.srv-host{font-weight:500;color:var(--muted);font-size:15px;margin-left:6px;font-family:var(--mono);}
.srv-live{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 8px 5px 14px;box-shadow:var(--shadow);}
.srv-live select{height:28px;width:auto;border:0;background:#f4f6f9;border-radius:999px;padding:0 10px;font-size:13px;}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 rgba(26,127,55,.5);animation:livePulse 2s infinite;}
.srv-live.paused .live-dot{background:#a0a8b4;animation:none;}
.srv-live.err .live-dot{background:var(--crit);animation:none;}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(26,127,55,.45);}70%{box-shadow:0 0 0 7px rgba(26,127,55,0);}100%{box-shadow:0 0 0 0 rgba(26,127,55,0);}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none;}}

/* health */
.health{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.health:empty{display:none;}
.hchip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:8px;font-size:13px;border:1px solid transparent;}
.hchip b{font-weight:600;}
.hchip .ico{width:18px;height:18px;flex:none;}
.hchip.critical{background:var(--crit-soft);border-color:#f5c2c0;color:#8e1519;}
.hchip.serious{background:var(--serious-soft);border-color:#f3cdb9;color:#8a3412;}
.hchip.warning{background:var(--warn-soft);border-color:#f0dc9c;color:#6b4a00;}
.hchip.good{background:var(--good-soft);border-color:#bfe3c9;color:#145c29;}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px;}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 14px 10px;display:flex;flex-direction:column;min-width:0;}
.kpi-l{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;display:flex;justify-content:space-between;gap:8px;}
.kpi-v{font-size:26px;font-weight:650;letter-spacing:-.02em;line-height:1.15;margin-top:6px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kpi-v small{font-size:14px;font-weight:500;color:var(--muted);margin-left:2px;}
.kpi-s{font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
.kpi svg.spark{display:block;width:100%;height:38px;margin-top:8px;overflow:visible;}
.spark .sl{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.spark .sa{opacity:.12;}
.kpi .meter{height:6px;border-radius:3px;background:var(--track);margin-top:8px;overflow:hidden;}
.kpi .meter i{display:block;height:100%;border-radius:3px;background:var(--s1);transition:width .4s;}
.kpi-key{display:flex;gap:10px;font-size:11.5px;color:var(--muted);margin-top:4px;}
.kpi-key i{display:inline-block;width:10px;height:2px;border-radius:1px;vertical-align:3px;margin-right:4px;}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line-2);margin-bottom:18px;overflow-x:auto;scrollbar-width:none;}
.tabs button{background:none;border:0;padding:10px 14px;font:inherit;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;}
.tabs button:hover{color:var(--ink);}
.tabs button.on{color:var(--ink);border-bottom-color:var(--brand);}
.tabs .cnt{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--crit-soft);color:var(--crit);font-size:11px;margin-left:6px;line-height:18px;}

/* panes */
.pane{display:flex;flex-direction:column;gap:16px;}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.grid-21{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;}
.card h3{font-size:14px;margin:0 0 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.card h3 .muted{font-weight:400;font-size:12.5px;}
.card.tight{padding:16px;}
.card .tbl-wrap{margin:0 -16px -16px;overflow-x:auto;}
.card:not(.tight) .tbl-wrap{margin:0 -20px -20px;}

/* stat rows */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.stat{background:#fff;padding:12px 14px;min-width:0;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line);}
.stat dt{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stat dd{margin:3px 0 0;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stat dd small{font-size:12px;color:var(--muted);font-weight:400;}

/* key/value list */
.kv{display:grid;grid-template-columns:max-content 1fr;gap:7px 16px;margin:0;font-size:13px;}
.kv dt{color:var(--muted);}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;}

/* tables */
table.mt{width:100%;border-collapse:collapse;font-size:13px;}
.mt th{text-align:left;font-weight:600;font-size:12px;color:var(--muted);padding:8px 16px;border-bottom:1px solid var(--line);background:#fafbfc;white-space:nowrap;}
.mt td{padding:7px 16px;border-bottom:1px solid var(--line);vertical-align:middle;font-variant-numeric:tabular-nums;}
.mt tr:last-child td{border-bottom:0;}
.mt tbody tr:hover td{background:#f8fafc;}
.mt .r{text-align:right;}
.mt .mono{font-size:12px;}
.mt .clip{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mt .empty td{color:var(--muted);text-align:center;padding:18px;}
.bar-cell{display:flex;align-items:center;gap:8px;min-width:110px;}
.bar-cell .b{flex:1;height:6px;border-radius:3px;background:var(--track);overflow:hidden;}
.bar-cell .b i{display:block;height:100%;background:var(--s1);border-radius:3px;}
.bar-cell span{min-width:44px;text-align:right;}

/* status labels */
.tag{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.tag.good{background:var(--good-soft);color:var(--good);}
.tag.warning{background:var(--warn-soft);color:var(--warn);}
.tag.serious{background:var(--serious-soft);color:var(--serious);}
.tag.critical{background:var(--crit-soft);color:var(--crit);}
.tag.idle{background:#eef1f5;color:#5b6573;}
.code{font-family:var(--mono);font-size:12px;font-weight:600;}
.code.c2{color:var(--good);} .code.c3{color:#5b6573;} .code.c4{color:var(--warn);} .code.c5{color:var(--crit);}

/* disks */
.disk{display:grid;grid-template-columns:44px 1fr auto;gap:4px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);}
.disk:last-child{border-bottom:0;padding-bottom:0;}
.disk:first-child{padding-top:0;}
.disk b{font-family:var(--mono);font-size:15px;grid-row:span 2;}
.disk .meter{height:8px;border-radius:4px;background:var(--track);overflow:hidden;}
.disk .meter i{display:block;height:100%;background:var(--s1);border-radius:4px;}
.disk .meter i.warning{background:var(--warn-mark);} .disk .meter i.critical{background:var(--crit);}
.disk .meta{font-size:12px;color:var(--muted);grid-column:2 / 4;}

/* charts */
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.chart-head h3{margin:0;}
.seg-mini{display:inline-flex;background:#f1f3f6;border-radius:8px;padding:2px;}
.seg-mini button{border:0;background:none;padding:4px 10px;border-radius:6px;font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;}
.seg-mini button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.12);}
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;}
.chart{min-width:0;}
.chart-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;font-weight:600;margin-bottom:6px;}
.chart-t .legend{display:flex;gap:12px;font-weight:400;font-size:12px;color:var(--muted);}
.legend i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:5px;vertical-align:3px;}
.legend i.sq{width:9px;height:9px;border-radius:2px;vertical-align:-1px;}
.chart svg{display:block;width:100%;overflow:visible;}
.chart-box .grid line{stroke:var(--grid);stroke-width:1;}
.chart-box .axis text{fill:var(--axis);font-size:11px;font-variant-numeric:tabular-nums;}
.chart .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.chart .ar{opacity:.1;}
.chart .xh{stroke:#9aa4b2;stroke-width:1;stroke-dasharray:3 3;}
.chart .hd{stroke:#fff;stroke-width:2;}
.chart-box .nodata{fill:var(--muted);font-size:12px;}
.chart-tip{position:fixed;z-index:50;pointer-events:none;background:#101826;color:#fff;border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.5;box-shadow:0 6px 20px rgba(0,0,0,.18);min-width:120px;font-variant-numeric:tabular-nums;}
.chart-tip .tt{color:#aeb8c7;margin-bottom:2px;}
.chart-tip .row{display:flex;justify-content:space-between;gap:14px;}
.chart-tip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;}
.note{font-size:12.5px;color:var(--muted);margin:10px 0 0;}
.callout{background:#f6f8fb;border:1px dashed var(--line-2);border-radius:8px;padding:10px 12px;font-size:12.5px;color:var(--muted);}
.callout code{font-family:var(--mono);font-size:12px;color:var(--ink);}

/* horizontal bars (command mix / status classes) */
.hbars{display:flex;flex-direction:column;gap:9px;}
.hbar{display:grid;grid-template-columns:70px 1fr 70px;gap:10px;align-items:center;font-size:13px;}
.hbar .b{height:10px;border-radius:0 4px 4px 0;background:var(--track);overflow:hidden;}
.hbar .b i{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--s1);transition:width .4s;}
.hbar span:last-child{text-align:right;font-variant-numeric:tabular-nums;}
.stackbar{display:flex;height:12px;border-radius:4px;overflow:hidden;gap:2px;background:#fff;margin:4px 0 10px;}
.stackbar i{display:block;height:100%;}

/* logs */
.logbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.logbar input{max-width:280px;height:32px;}
.logbar select{width:auto;height:32px;}
.logview{margin:0;background:#0f1622;color:#d6dde8;border-radius:8px;padding:12px 14px;font:12px/1.55 var(--mono);max-height:620px;overflow:auto;white-space:pre-wrap;word-break:break-all;}
.logview .l-err{color:#ff8b8b;} .logview .l-warn{color:#f5c56b;} .logview .l-note{color:#8fb8ff;}
.logview mark{background:#f5c56b;color:#111;border-radius:2px;}

@media (max-width:1180px){
	.kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
	.grid3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:860px){
	.kpis,.grid2,.grid3,.grid-21,.charts{grid-template-columns:minmax(0,1fr);}
	.kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
	.srv-head{flex-direction:column;align-items:flex-start;}
	.topbar{gap:12px;padding:0 16px;}
	.wrap{padding:20px 16px 60px;}
}

/* certificates */
.cert-actions{display:flex;gap:8px;flex-wrap:wrap;}
.btn.ghost{border-color:transparent;background:none;color:var(--brand);}
.btn.ghost:hover{background:var(--brand-soft);}
.mt.certs td{padding-top:10px;padding-bottom:10px;}
.mt.certs .btn{margin-left:4px;}
.crow .issue{font-size:12px;color:var(--muted);margin-top:3px;max-width:520px;}
.crow.st-critical .issue{color:var(--crit);}
.crow.st-serious .issue{color:var(--serious);}
.crow.st-warning .issue{color:var(--warn);}
.crow.st-idle td{color:var(--muted);}
.exp{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;white-space:nowrap;}
.exp b{font-weight:600;}
.d-good{color:var(--good);} .d-warning{color:var(--warn);} .d-serious{color:var(--serious);} .d-critical{color:var(--crit);}
.life{height:5px;border-radius:3px;background:var(--track);margin-top:5px;overflow:hidden;}
.life i{display:block;height:100%;border-radius:3px;background:var(--good);}
.life i.warning{background:var(--warn-mark);} .life i.serious{background:var(--serious);} .life i.critical{background:var(--crit);}
.mt tr.cdet td{background:#fafbfc;padding-top:12px;padding-bottom:14px;}
.mt tbody tr.cdet:hover td{background:#fafbfc;}
.issues{margin:0;padding-left:18px;}
.job{border:1px solid var(--line);border-radius:8px;margin:0 0 14px;overflow:hidden;}
.job.run{border-color:#bcd3f7;} .job.ok{border-color:#bfe3c9;} .job.failed{border-color:#f5c2c0;}
.job-h{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#f8fafc;}
.job.ok .job-h{background:var(--good-soft);color:#145c29;}
.job.failed .job-h{background:var(--crit-soft);color:#8e1519;}
.job-h .ico{width:18px;height:18px;}
.job-h .btn{margin-left:auto;}
.job-log{border-radius:0;max-height:260px;margin:0;}
.job .spin{width:14px;height:14px;border-radius:50%;border:2px solid #bcd3f7;border-top-color:var(--brand);animation:srvSpin .8s linear infinite;display:inline-block;flex:none;}
@keyframes srvSpin{to{transform:rotate(360deg);}}

/* apache traffic */
.ap-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ap-bar select{width:auto;max-width:320px;height:32px;}
.site-dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:0;flex:none;}
.mt tr.clickable{cursor:pointer;}
.mt tr.on td{background:var(--brand-soft) !important;}
.pick{border:1px solid var(--line);border-radius:8px;margin-top:12px;overflow:hidden;}
.pick-h{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#f8fafc;border-bottom:1px solid var(--line);}
.pick-h .btn{margin-left:auto;}
.sitechips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 0;}
.sitechip{display:inline-flex;align-items:center;gap:4px;font:12px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:#f1f3f6;border-radius:999px;padding:2px 10px;}
.pick-tbl{max-height:420px;overflow:auto;margin:0 !important;}

.legend{display:inline-flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:12px;color:var(--muted);font-weight:400;}

.ap-ctl{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}