/* ══════════════════════════════════════════════════════════════════════════
   status.css  —  Status page specific styles
   .card/.btn override shared.css. Defines --online/--offline/--degraded/--row-bg/--row-border locally.
   ══════════════════════════════════════════════════════════════════════════ */

/* Page-specific */
/* btn base + ghost/accent/sm inherited from shared.css */
.badge{display:inline-flex;align-items:center;gap:0.25rem;padding:0.14rem 0.52rem;border-radius:20px;font-family:'DM Mono',monospace;font-size:0.65rem;font-weight:500;border:1px solid;}
.badge-green{background:rgba(52,211,153,0.1);border-color:rgba(52,211,153,0.25);color:var(--green);}
.badge-amber{background:rgba(255,195,55,0.1);border-color:rgba(255,195,55,0.25);color:var(--amber);}
.badge-red{background:rgba(248,113,113,0.1);border-color:rgba(248,113,113,0.25);color:var(--red);}
.config-notice{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);align-items:center;justify-content:center;}
.config-notice.show{display:flex;}
.config-notice .notice-box{background:linear-gradient(145deg,#0e0e1c,#12121e);border:1px solid rgba(255,195,55,0.25);border-radius:var(--radius);padding:1.75rem 2rem;max-width:420px;width:90%;box-shadow:0 0 0 1px rgba(255,195,55,0.08),0 24px 64px rgba(0,0,0,0.6);text-align:center;}
.config-notice .notice-icon{font-size:2rem;margin-bottom:0.65rem;}
.config-notice .notice-title{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:0.35rem;}
.config-notice .notice-body{font-size:0.82rem;color:var(--text-dim);line-height:1.55;}
.panel-tabs{display:flex;gap:0.5rem;margin-bottom:1.25rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.09);border-radius:14px;padding:0.35rem;}
.panel-tab{flex:1;padding:0.6rem 1rem;border-radius:10px;border:none;background:transparent;color:var(--text-dim);font-size:0.85rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:0.5rem;}
.panel-tab:hover{color:var(--text);background:rgba(255,255,255,0.05);}
.panel-tab.active{background:rgba(88,101,242,0.18);border:1px solid rgba(88,101,242,0.3);color:var(--text);}
.panel{display:none;}.panel.active{display:block;}
.status-banner{border-radius:16px;padding:1.1rem 1.5rem;display:flex;align-items:center;gap:0.9rem;margin-bottom:1.5rem;position:relative;overflow:hidden;transition:all 0.4s;}
.status-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;transition:background 0.4s;}
.banner-checking{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);}
.banner-all-good{background:linear-gradient(135deg,rgba(46,204,113,0.13),rgba(46,204,113,0.05));border:1px solid rgba(46,204,113,0.3);}
.banner-all-good::before{background:linear-gradient(90deg,transparent,rgba(46,204,113,0.4),transparent);}
.banner-issues{background:linear-gradient(135deg,rgba(255,152,0,0.13),rgba(255,152,0,0.05));border:1px solid rgba(255,152,0,0.3);}
.banner-issues::before{background:linear-gradient(90deg,transparent,rgba(255,152,0,0.5),transparent);}
.banner-down{background:linear-gradient(135deg,rgba(231,76,60,0.15),rgba(231,76,60,0.06));border:1px solid rgba(231,76,60,0.35);}
.banner-down::before{background:linear-gradient(90deg,transparent,rgba(231,76,60,0.5),transparent);}
.banner-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.banner-dot.checking{background:#444;}
.banner-dot.good{background:var(--online);box-shadow:0 0 10px var(--online);}
.banner-dot.issues{background:var(--degraded);box-shadow:0 0 10px var(--degraded);animation:blink-w 1.8s infinite;}
.banner-dot.down{background:var(--offline);box-shadow:0 0 10px var(--offline);animation:blink-e 1.2s infinite;}
@keyframes blink-w{0%,100%{opacity:1}50%{opacity:0.4}}
@keyframes blink-e{0%,100%{opacity:1}50%{opacity:0.3}}
.banner-text{flex:1;}
.banner-text strong{font-weight:700;font-size:0.95rem;color:var(--text);display:block;}
.banner-text span{color:var(--text-dim);font-size:0.82rem;}
.banner-time{font-size:0.78rem;color:var(--text-dim);white-space:nowrap;font-variant-numeric:tabular-nums;}
.card{background:var(--card-bg);border:1px solid var(--glass-border);border-radius:24px;padding:1.75rem 2rem;box-shadow:0 8px 32px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.09),inset 0 -1px 0 rgba(0,0,0,0.1);backdrop-filter:blur(40px) saturate(150%);-webkit-backdrop-filter:blur(40px) saturate(150%);position:relative;overflow:hidden;margin-bottom:1.25rem;}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);}
.card::after{content:'';position:absolute;inset:0;background:var(--glass-shine);pointer-events:none;border-radius:24px;}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.35rem;position:relative;z-index:1;}
.section-label{font-size:0.7rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--text);margin:0;}
.section-meta{font-size:0.72rem;color:var(--text-dim);}
.summary-bar{display:flex;gap:0.75rem;flex-wrap:wrap;margin-bottom:1.25rem;}
.summary-pill{display:flex;align-items:center;gap:0.4rem;padding:0.4rem 0.85rem;border-radius:20px;font-size:0.78rem;font-weight:600;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:var(--text-dim);}
.summary-pill .count{font-size:1rem;font-weight:700;}
.pill-online .count{color:var(--online);}
.pill-offline .count{color:var(--offline);}
.pill-total .count{color:#a8b4ff;}
.svc-group-label{font-size:0.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);padding:0.75rem 1rem 0.35rem;position:relative;z-index:1;}
.svc-group-label:first-child{padding-top:0;}
.service-list{display:flex;flex-direction:column;gap:0.55rem;position:relative;z-index:1;}
.service-row{display:grid;grid-template-columns:1fr auto 96px;grid-template-rows:auto auto;align-items:center;gap:0 0.85rem;padding:0.7rem 1rem;background:var(--row-bg);border:1px solid var(--row-border);border-radius:12px;transition:background 0.2s,border-color 0.2s;text-decoration:none;color:inherit;}
.service-row:hover{background:rgba(88,101,242,0.07);border-color:rgba(88,101,242,0.2);}
.service-row.is-unconfigured{opacity:0.38;pointer-events:none;}
.service-row.is-unconfigured .service-url::after{content:' — set in Config Editor';color:var(--text-muted);font-size:0.7rem;}
.status-unconfigured{color:var(--text-muted);}
.status-unconfigured .dot{background:rgba(255,255,255,0.15);box-shadow:none;}
.service-row.is-down{background:rgba(231,76,60,0.06);border-color:rgba(231,76,60,0.18);}
.service-info{min-width:0;grid-column:1;grid-row:1;}
.service-name{font-size:0.9rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.service-url{font-size:0.72rem;color:var(--text-dim);margin-top:1px;}
.svc-latency{font-size:0.72rem;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;grid-column:2;grid-row:1;}
.svc-latency.fast{color:var(--green);}.svc-latency.medium{color:var(--amber);}.svc-latency.slow{color:var(--red);}.svc-latency.dim{color:var(--text-dim);}
.svc-uptime-pill{display:inline-flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:600;padding:0.28rem 0.65rem;border-radius:20px;white-space:nowrap;grid-column:2;grid-row:1;}
.svc-uptime-pill.uptime-high{color:var(--green);background:rgba(46,204,113,0.1);border:1px solid rgba(46,204,113,0.3);}
.svc-uptime-pill.uptime-mid{color:var(--amber);background:rgba(251,191,36,0.1);border:1px solid rgba(251,191,36,0.3);}
.svc-uptime-pill.uptime-low{color:var(--red);background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.3);}
.svc-uptime-pill.uptime-none{color:var(--text-dim);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);}
.service-status{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.78rem;font-weight:600;padding:0.28rem 0.75rem;border-radius:20px;white-space:nowrap;grid-column:3;grid-row:1;justify-self:end;}
.service-status .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.status-online{color:var(--online);background:rgba(46,204,113,0.1);border:1px solid rgba(46,204,113,0.3);}
.status-online .dot{background:var(--online);box-shadow:0 0 5px var(--online);}
.status-offline{color:var(--offline);background:rgba(231,76,60,0.1);border:1px solid rgba(231,76,60,0.35);}
.status-offline .dot{background:var(--offline);box-shadow:0 0 5px var(--offline);animation:blink-e 1.2s infinite;}
.status-unknown{color:var(--text-dim);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);}
.status-unknown .dot{background:#555;}
.sparkline-row{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:0.65rem;padding-top:0.45rem;margin-top:0.35rem;border-top:1px solid rgba(255,255,255,0.045);}
.sparkline-label{font-size:0.62rem;color:var(--text-muted);white-space:nowrap;width:40px;flex-shrink:0;}
.sparkline-svg{flex:1;height:26px;display:block;overflow:hidden;min-width:0;}
.sparkline-range{font-size:0.62rem;color:var(--text-muted);white-space:nowrap;min-width:60px;text-align:right;}
.history-grid{display:flex;flex-direction:column;gap:0.6rem;position:relative;z-index:1;}
.history-row{display:grid;grid-template-columns:140px 1fr 52px;align-items:center;gap:0.75rem;}
.history-name{font-size:0.76rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.history-blocks{display:flex;gap:2.5px;align-items:center;}
.hblock{flex:1;height:16px;border-radius:3px;transition:opacity 0.12s,transform 0.12s;cursor:default;position:relative;}
.hblock:hover{opacity:0.8;transform:scaleY(1.2);}
.hblock-tip{display:none;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:rgba(16,15,30,0.95);color:#ddd;font-size:0.68rem;white-space:nowrap;padding:0.2rem 0.5rem;border-radius:5px;pointer-events:none;z-index:10;border:1px solid rgba(255,255,255,0.1);}
.hblock:hover .hblock-tip{display:block;}
.h-online{background:rgba(46,204,113,0.65);}.h-partial{background:rgba(255,152,0,0.65);}.h-offline{background:rgba(231,76,60,0.7);}.h-nodata{background:rgba(255,255,255,0.07);}
.history-pct{font-size:0.7rem;font-weight:700;text-align:right;padding-left:0.3rem;}
.history-pct.high{color:var(--green);}.history-pct.medium{color:var(--amber);}.history-pct.low{color:var(--red);}.history-pct.none{color:var(--text-muted);}
.grid-legend{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem;padding-top:0.9rem;border-top:1px solid rgba(255,255,255,0.06);position:relative;z-index:1;}
.legend-item{display:flex;align-items:center;gap:0.4rem;font-size:0.72rem;color:var(--text-dim);}
.legend-swatch{width:12px;height:12px;border-radius:3px;flex-shrink:0;}
.legend-spacer{flex:1;}
.legend-dates{font-size:0.7rem;color:var(--text-muted);}
.incident-item{display:flex;align-items:flex-start;gap:0.65rem;padding:0.6rem 0;border-bottom:1px solid rgba(255,255,255,0.05);}
.incident-item:last-child{border-bottom:none;}
.incident-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:0.35rem;}
.incident-dot.info{background:#60a5fa;box-shadow:0 0 5px rgba(96,165,250,0.4);}
.incident-dot.warn{background:var(--amber);box-shadow:0 0 5px rgba(251,191,36,0.4);}
.incident-dot.error{background:var(--red);box-shadow:0 0 5px rgba(248,113,113,0.4);}
.incident-meta{flex:1;min-width:0;}
.incident-ts{font-size:0.65rem;color:var(--text-muted);font-family:'DM Mono',monospace;margin-bottom:0.2rem;}
.incident-msg{font-size:0.82rem;color:var(--text);line-height:1.45;word-break:break-word;}
.incident-del{background:none;border:none;color:var(--text-muted);font-size:0.72rem;cursor:pointer;padding:0.1rem 0.35rem;border-radius:4px;flex-shrink:0;transition:color 0.15s;font-family:inherit;}
.incident-del:hover{color:var(--red);}
/* ── Severity pill toggle ── */
.inc-sev-group{display:flex;gap:0.3rem;}
.inc-sev-btn{background:rgba(255,255,255,0.04);border:1px solid;border-radius:20px;font-size:0.74rem;font-weight:600;padding:0.2rem 0.65rem;cursor:pointer;font-family:inherit;transition:all 0.15s;opacity:0.55;}
.inc-sev-btn:hover{opacity:0.85;}
.inc-sev-btn.active{opacity:1;background:rgba(255,255,255,0.08);}
.sys-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;position:relative;z-index:1;}
@media(max-width:640px){.sys-grid{grid-template-columns:1fr;}}
.sys-block{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:1rem 1.1rem;}
.sys-block-title{font-size:0.63rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-bottom:0.85rem;display:flex;align-items:center;gap:0.5rem;}
.gauge-row{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.55rem;}
.gauge-label{font-size:0.75rem;color:var(--text-dim);min-width:52px;}
.gauge-track{flex:1;height:8px;background:rgba(255,255,255,0.07);border-radius:4px;overflow:hidden;}
.gauge-fill{height:100%;border-radius:4px;transition:width 0.5s ease;}
.gauge-fill.low{background:linear-gradient(90deg,#2ecc71,#27ae60);}
.gauge-fill.medium{background:linear-gradient(90deg,#ff9800,#e65100);}
.gauge-fill.high{background:linear-gradient(90deg,#e74c3c,#c0392b);}
.gauge-val{font-size:0.75rem;font-weight:700;color:var(--text);min-width:42px;text-align:right;font-variant-numeric:tabular-nums;}
.disk-row{display:grid;grid-template-columns:1fr auto auto;gap:0.5rem;align-items:center;padding:0.4rem 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.disk-row:last-child{border-bottom:none;}
.disk-mount{font-size:0.74rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.disk-size{font-size:0.7rem;color:var(--text-dim);white-space:nowrap;font-variant-numeric:tabular-nums;}
.disk-pct{font-size:0.7rem;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;}
.disk-pct.low{color:var(--green);}.disk-pct.medium{color:var(--amber);}.disk-pct.high{color:var(--red);}
.port-row{display:flex;align-items:center;justify-content:space-between;padding:0.35rem 0;border-bottom:1px solid rgba(255,255,255,0.04);gap:0.5rem;}
.port-row:last-child{border-bottom:none;}
.port-name{font-size:0.77rem;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.port-num{font-size:0.7rem;color:var(--text-dim);font-family:monospace;flex-shrink:0;}
.port-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.port-dot.up{background:var(--green);box-shadow:0 0 5px rgba(46,204,113,0.6);}
.port-dot.down{background:var(--red);box-shadow:0 0 5px rgba(231,76,60,0.5);animation:blink-e 1.2s infinite;}
.port-dot.unknown{background:#444;}
.gpu-chip{display:inline-flex;align-items:center;gap:0.45rem;padding:0.25rem 0.65rem;border-radius:20px;font-size:0.72rem;font-weight:600;background:rgba(88,101,242,0.1);border:1px solid rgba(88,101,242,0.25);color:#a8b4ff;margin-bottom:0.75rem;}
.sys-unavailable{text-align:center;padding:2.5rem 1rem;color:var(--text-dim);font-size:0.85rem;}
.sys-unavailable a{color:#a8b4ff;}
.sys-error-icon{font-size:2rem;display:block;margin-bottom:0.5rem;}
.spin{display:inline-block;animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.footer{text-align:center;color:var(--text-muted);font-size:0.75rem;padding:0.5rem 0 0;line-height:1.8;}
.refresh-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1.2rem;border-radius:9px;border:1px solid rgba(88,101,242,0.3);background:rgba(88,101,242,0.1);color:#a8b4ff;font-size:0.8rem;font-weight:600;cursor:pointer;font-family:inherit;margin-top:0.65rem;transition:all 0.2s;}
.refresh-btn:hover{background:rgba(88,101,242,0.2);border-color:rgba(88,101,242,0.5);}
.refresh-btn svg{width:14px;height:14px;flex-shrink:0;transition:transform 0.4s;}
.refresh-btn.spinning svg{animation:spin 0.7s linear infinite;}
.storage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:0.85rem;position:relative;z-index:1;margin-top:0.5rem;}
.pie-card{display:flex;flex-direction:column;align-items:center;gap:0.45rem;padding:0.75rem 0.5rem;background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.07);border-radius:12px;}
.pie-chart-wrap{position:relative;width:80px;height:80px;flex-shrink:0;}
.pie-svg{width:80px;height:80px;transform:rotate(-90deg);}
.pie-bg{fill:none;stroke:rgba(255,255,255,0.07);stroke-width:10;}
.pie-fill{fill:none;stroke-width:10;stroke-linecap:round;transition:stroke-dasharray 0.6s ease;}
.pie-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.pie-pct{font-size:0.85rem;font-weight:800;color:var(--text);line-height:1;}
.pie-sub{font-size:0.55rem;color:var(--text-dim);margin-top:1px;}
.pie-label{font-size:0.68rem;color:var(--text-dim);text-align:center;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pie-sizes{font-size:0.65rem;color:var(--text-muted);text-align:center;}
@media(max-width:640px){
  .service-row{grid-template-columns:1fr auto auto;}
  .svc-latency{display:none;}
  .history-row{grid-template-columns:80px 1fr 40px;}
  .history-name{font-size:0.68rem;}
  .panel-tab span.tab-label{display:none;}
}