/*
Theme Name: HSLG NOC Terminal
Theme URI: https://hslg.uk/
Description: Full-screen rotating retro terminal NOC wallboard for HSLG Site Monitor Core.
Author: Matthew Yabsley
Author URI: mailto:mattyabs@yahoo.com
Version: 0.8.1
Requires at least: 6.2
Requires PHP: 8.0
Text Domain: hslg-noc-terminal
*/

:root{
  --bg:#040705;--panel:#071009;--panel2:#09140c;--line:#244b2d;--text:#96f6a8;--muted:#5f9b6b;
  --healthy:#70ff89;--warning:#ffbe45;--critical:#ff5f5f;--unknown:#9aa3a7;--maintenance:#61b8ff;
  --shadow:rgba(112,255,137,.08)
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);overflow:hidden}
body{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;text-transform:uppercase;letter-spacing:.03em}
body.admin-bar{margin-top:0!important}#wpadminbar{display:none!important}


/*
 * v0.8.0 WALLBOARD DENSITY PASS
 * -----------------------------
 * Keep the existing terminal/NOC design, but make the monitored devices the
 * dominant content. This layout is designed around 1920x1080 at 100% browser
 * zoom. Header/footer chrome is deliberately small; device/check text is large.
 */
.noc-shell{
  position:relative;width:100vw;height:100vh;padding:8px 10px 7px;
  display:grid;
  grid-template-rows:40px 24px minmax(0,1fr) 43px;
  gap:5px;
  background:radial-gradient(circle at 50% -18%,#0b1b10 0,transparent 42%),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:auto,100% 4px;
  transition:box-shadow .35s ease
}
.noc-header{
  border:1px solid var(--line);background:rgba(7,16,9,.96);
  display:grid;grid-template-columns:minmax(230px,.85fr) minmax(360px,1.65fr) minmax(180px,.65fr);
  align-items:center;padding:2px 10px;box-shadow:inset 0 0 16px var(--shadow);
  transition:border-color .3s,background .3s,box-shadow .3s
}
.noc-brand{font-size:clamp(15px,1.05vw,20px);font-weight:800;white-space:nowrap}
.noc-brand:before{content:"> ";color:var(--healthy)}
.noc-current-venue{text-align:center;min-width:0}
.current-venue-name{font-size:clamp(20px,1.55vw,30px);line-height:1;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.current-venue-state{margin-top:1px;font-size:clamp(8px,.52vw,10px);line-height:1;color:var(--muted);font-weight:800;white-space:nowrap}
.noc-clock{text-align:right;line-height:1}
.noc-time{font-size:clamp(16px,1.08vw,21px);font-weight:900}
.noc-date{font-size:8px;color:var(--muted);margin-top:2px}

.noc-statusbar{
  display:grid;grid-template-columns:repeat(5,minmax(72px,auto)) 1fr auto;gap:9px;align-items:center;
  border:1px solid var(--line);background:rgba(5,12,7,.95);padding:2px 8px;min-height:24px
}
.stat{white-space:nowrap;font-size:clamp(9px,.58vw,11px);line-height:1}
.stat b{font-size:1.12em;margin-left:4px}
.verifying-count{color:var(--warning)}
.slideshow-state{justify-self:center;font-size:9px;color:var(--muted);font-weight:900;white-space:nowrap}
.live-state{justify-self:end;font-size:8px;font-weight:900;white-space:nowrap}
.live-state:before{content:"●";margin-right:5px}
.live-state.live{color:var(--healthy)}
.live-state.reconnecting{color:var(--warning)}
.live-state.stale{color:var(--critical)}

.monitor-health-panel{
  position:absolute;z-index:40;right:10px;top:69px;width:min(680px,calc(100vw - 20px));
  border:1px solid var(--warning);background:rgba(42,29,7,.97);color:var(--warning);
  padding:4px 7px;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:7px;align-items:center;
  min-height:28px;box-shadow:0 4px 18px rgba(0,0,0,.55),inset 0 0 16px rgba(255,190,69,.05)
}
.monitor-health-panel[hidden]{display:none}
.monitor-health-panel.critical{border-color:var(--critical);background:rgba(42,7,7,.98);color:var(--critical)}
.monitor-health-icon{border:1px solid currentColor;width:16px;height:16px;display:grid;place-items:center;font-weight:900;font-size:10px}
.monitor-health-copy{display:flex;flex-direction:column;min-width:0}
.monitor-health-copy strong{font-size:9px}
.monitor-health-copy span{font-size:8px;color:#d6c58f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.monitor-health-panel.critical .monitor-health-copy span{color:#e9a2a2}
.monitor-health-recovery{font-size:8px;font-weight:900;white-space:nowrap;text-align:right}
.live-state.degraded{color:var(--warning)}
.live-state.offline{color:var(--critical)}
body.wallboard-offline .noc-shell{box-shadow:inset 0 0 0 2px rgba(255,95,95,.35)}

.noc-main{min-height:0;overflow:hidden}
.venue-slide{
  height:100%;min-height:0;border:1px solid var(--line);background:rgba(6,14,8,.92);
  padding:5px;box-shadow:inset 0 0 30px rgba(112,255,137,.025)
}
.venue-slide.status-warning{border-color:#765922}
.venue-slide.status-critical{border-color:#8b3030}
.venue-slide.status-unknown{border-color:#485157}
.venue-slide.status-maintenance{border-color:#2f6286}

.venue-groups{
  height:100%;display:grid;grid-template-columns:.88fr 1.35fr 1.08fr 1.18fr;
  gap:5px;min-height:0
}
.device-group{
  min-width:0;min-height:0;border:1px solid rgba(36,75,45,.82);background:rgba(7,16,9,.7);
  display:grid;grid-template-rows:34px minmax(0,1fr);overflow:hidden
}
.device-group-head{
  display:flex;justify-content:space-between;align-items:center;padding:5px 8px;
  border-bottom:1px solid var(--line);background:rgba(10,22,13,.88);
  font-size:clamp(11px,.72vw,14px);line-height:1;font-weight:900;color:var(--muted)
}
.device-group-head span:last-child{color:var(--text)}
.device-group-body{min-height:0;padding:4px 8px;overflow:hidden}
.group-empty{
  height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);
  font-size:clamp(11px,.66vw,13px);text-align:center
}

/* Default density: intended for ordinary venues. */
.asset-block{
  padding:7px 0 8px;border-bottom:1px dotted rgba(95,155,107,.25);min-width:0
}
.asset-block:last-child{border-bottom:0}
.asset-block.warning{background:linear-gradient(90deg,rgba(255,190,69,.035),transparent 75%)}
.asset-block.critical{background:linear-gradient(90deg,rgba(255,95,95,.055),transparent 75%)}
.asset-row{
  display:grid;grid-template-columns:20px minmax(112px,.9fr) minmax(88px,1.15fr) auto;
  gap:7px;align-items:center;min-height:31px;
  font-size:clamp(12px,.76vw,15px);line-height:1.12
}
.asset-dot{font-size:17px;line-height:1}
.asset-dot.healthy{color:var(--healthy)}
.asset-dot.warning{color:var(--warning)}
.asset-dot.critical{color:var(--critical)}
.asset-dot.unknown{color:var(--unknown)}
.asset-dot.maintenance{color:var(--maintenance)}
.asset-name-wrap{display:flex;flex-direction:column;min-width:0}
.asset-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:1.08em;line-height:1.05
}
.asset-name-wrap small{
  font-size:clamp(8px,.5vw,10px);line-height:1.05;color:var(--muted);
  margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.asset-summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.asset-block.warning .asset-summary{color:#d6a94e}
.asset-block.critical .asset-summary{color:#e88787}
.asset-verification{
  font-size:clamp(9px,.55vw,11px);font-weight:900;white-space:nowrap;text-align:right;color:var(--muted)
}
.asset-verification.verifying{color:var(--warning);animation:verifyPulse 1.2s steps(2,end) infinite}
.asset-verification.failed{color:var(--critical)}
.check-strip{
  display:flex;align-items:flex-start;align-content:flex-start;flex-wrap:wrap;
  gap:5px 13px;min-width:0;overflow:hidden;padding:5px 0 1px 27px;
  max-height:58px
}
.check-item{
  display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
  font-size:clamp(10px,.62vw,12px);line-height:1.2;color:var(--muted);white-space:nowrap
}
.check-symbol{font-size:10px}
.check-item.healthy .check-symbol{color:var(--healthy)}
.check-item.warning .check-symbol{color:var(--warning)}
.check-item.critical .check-symbol{color:var(--critical)}
.check-item.unknown .check-symbol{color:var(--unknown)}
.check-item.maintenance .check-symbol{color:var(--maintenance)}
.check-label{font-weight:900}
.check-value{color:var(--text)}

/* A venue with little equipment should use the space, not leave microscopic text in an empty panel. */
.venue-slide.density-roomy .asset-block{padding:10px 0 12px}
.venue-slide.density-roomy .asset-row{
  grid-template-columns:22px minmax(125px,.9fr) minmax(100px,1.15fr) auto;
  min-height:38px;font-size:clamp(14px,.9vw,18px)
}
.venue-slide.density-roomy .asset-dot{font-size:19px}
.venue-slide.density-roomy .asset-name-wrap small{font-size:clamp(9px,.58vw,11px)}
.venue-slide.density-roomy .asset-verification{font-size:clamp(10px,.62vw,12px)}
.venue-slide.density-roomy .check-strip{padding-left:29px;gap:7px 16px;max-height:78px}
.venue-slide.density-roomy .check-item{font-size:clamp(12px,.75vw,15px)}
.venue-slide.density-roomy .check-symbol{font-size:12px}

/* Crowded groups step down just enough to fit; still significantly larger than v0.7.0. */
.venue-slide.density-compact .asset-block{padding:4px 0 5px}
.venue-slide.density-compact .asset-row{
  grid-template-columns:17px minmax(95px,.82fr) minmax(72px,1fr) auto;
  gap:5px;min-height:26px;font-size:clamp(10px,.64vw,12.5px)
}
.venue-slide.density-compact .asset-dot{font-size:14px}
.venue-slide.density-compact .asset-name-wrap small{font-size:8px;margin-top:1px}
.venue-slide.density-compact .asset-verification{font-size:8.5px}
.venue-slide.density-compact .check-strip{padding:3px 0 0 22px;gap:3px 9px;max-height:42px}
.venue-slide.density-compact .check-item{font-size:clamp(8.5px,.53vw,10.5px)}

.noc-footer{
  display:grid;grid-template-rows:27px 13px;gap:3px;min-height:0
}
.consensus{
  border:1px solid var(--line);background:rgba(5,12,7,.96);
  display:grid;grid-template-columns:92px minmax(0,1.55fr) minmax(240px,.7fr);
  align-items:center;min-width:0
}
.consensus-label{
  height:100%;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);
  color:var(--muted);font-size:9px;font-weight:900
}
.consensus-copy{padding:2px 8px;display:flex;flex-direction:row;align-items:baseline;gap:12px;min-width:0}
.consensus-copy strong{font-size:clamp(9px,.62vw,12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.consensus-copy span{font-size:8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.consensus-event{
  padding:2px 8px;border-left:1px solid var(--line);font-size:8px;color:var(--muted);
  line-height:1.25;max-height:34px;overflow:hidden
}
.rotation-strip{
  position:relative;border:1px solid var(--line);background:rgba(5,12,7,.96);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  padding:1px 7px 3px;overflow:hidden
}
.venue-nav{display:flex;gap:12px;align-items:center;min-width:0;overflow:hidden}
.venue-nav-item{font-size:8px;color:var(--muted);white-space:nowrap}
.venue-nav-item.healthy{color:#68b878}
.venue-nav-item.warning{color:#ca9840}
.venue-nav-item.critical{color:#d85d5d}
.venue-nav-item.active{color:var(--text);font-weight:900}
.rotation-meta{display:flex;gap:10px;align-items:center;font-size:8px;color:var(--muted);font-weight:900;white-space:nowrap}
.key-help{opacity:.65}
.rotation-track{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(95,155,107,.12)}
.rotation-progress{height:100%;width:0;background:var(--healthy);transition:width .22s linear}

body.critical-lock .noc-shell{box-shadow:inset 0 0 0 3px rgba(255,95,95,.65),inset 0 0 55px rgba(255,95,95,.13)}
body.critical-lock .noc-header,body.critical-lock .noc-statusbar,body.critical-lock .consensus,body.critical-lock .rotation-strip{border-color:#a63737}
body.critical-lock .current-venue-state,body.critical-lock .slideshow-state{color:var(--critical)}
body.critical-lock .rotation-progress{background:var(--critical)}
body.critical-pulse .noc-shell{animation:criticalFrame 1.65s ease-in-out infinite}
body.critical-pulse .noc-header{animation:criticalHeader 1.65s ease-in-out infinite}
@keyframes criticalFrame{0%,100%{box-shadow:inset 0 0 0 2px rgba(255,95,95,.45),inset 0 0 35px rgba(255,95,95,.08)}50%{box-shadow:inset 0 0 0 5px rgba(255,95,95,.95),inset 0 0 90px rgba(255,95,95,.24)}}
@keyframes criticalHeader{0%,100%{background:rgba(28,8,8,.88)}50%{background:rgba(75,8,8,.94)}}
@keyframes verifyPulse{50%{opacity:.38}}

.empty-state{border:1px solid var(--line);height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:30px}.empty-state strong{color:var(--text);display:block;margin-bottom:8px}
.noc-access{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:30px}.noc-access-box{border:1px solid var(--line);padding:28px;max-width:650px;background:var(--panel);text-align:center}.noc-access h1{font-size:22px}.noc-access a{color:var(--healthy)}
.scanline{pointer-events:none;position:fixed;inset:0;background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.08) 50%);background-size:100% 4px;opacity:.3;z-index:50}.cursor{display:inline-block;width:.6em;height:1em;background:currentColor;vertical-align:-.15em;animation:blink 1s steps(1,end) infinite}@keyframes blink{50%{opacity:0}}


@media(max-width:1400px){
  .noc-shell{padding:5px 6px;grid-template-rows:38px 23px minmax(0,1fr) 40px;gap:3px}
  .noc-header{padding:3px 8px}
  .current-venue-name{font-size:clamp(20px,1.75vw,28px)}
  .device-group{grid-template-rows:30px minmax(0,1fr)}
  .device-group-head{font-size:10px;padding:4px 6px}
  .device-group-body{padding:3px 6px}
  .asset-row{font-size:clamp(10px,.78vw,12px);min-height:27px}
  .check-item{font-size:clamp(8.5px,.64vw,10px)}
  .venue-slide.density-roomy .asset-row{font-size:clamp(12px,.9vw,14px)}
  .venue-slide.density-roomy .check-item{font-size:clamp(10px,.74vw,12px)}
  .noc-footer{grid-template-rows:25px 12px;gap:3px}
}
@media(max-width:900px){
  html,body{overflow:auto}
  .noc-shell{height:auto;min-height:100vh;grid-template-rows:auto auto auto auto}
  .noc-header{grid-template-columns:1fr auto}
  .noc-current-venue{grid-column:1/-1;grid-row:2;text-align:left;padding-top:6px}
  .noc-statusbar{grid-template-columns:repeat(3,auto) 1fr}
  .venue-groups{grid-template-columns:1fr 1fr}
  .noc-main{min-height:900px}
  .consensus{grid-template-columns:85px 1fr}
  .consensus-event{display:none}
  .consensus-copy{flex-direction:column;gap:2px}
  .venue-nav{flex-wrap:wrap}
  .key-help{display:none}
}