/* TECHXCOD Legacy Monitor — iPad 2 / Safari 9 / 1024x768 landscape */
/* Avoid CSS Grid and modern Flexbox; use floats + table layout */

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0B1220;
  color: #F8FAFC;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 1024px;
  min-height: 768px;
}

a { color: #93C5FD; text-decoration: none; }

/* Status colors */
.st-HEALTHY { color: #22C55E; }
.st-WARNING { color: #F59E0B; }
.st-CRITICAL { color: #EF4444; }
.st-UNKNOWN { color: #64748B; }
.bg-HEALTHY { background-color: #14532D; }
.bg-WARNING { background-color: #78350F; }
.bg-CRITICAL { background-color: #7F1D1D; }
.bg-UNKNOWN { background-color: #334155; }
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.dot-HEALTHY { background: #22C55E; }
.dot-WARNING { background: #F59E0B; }
.dot-CRITICAL { background: #EF4444; }
.dot-UNKNOWN { background: #64748B; }

/* Screens */
.screen { display: none; width: 100%; height: 100%; }
.screen.active { display: block; }

/* Enroll */
#screen-enroll {
  text-align: center;
  padding-top: 160px;
}
#screen-enroll h1 {
  font-size: 28px;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
#screen-enroll .sub {
  color: #94A3B8;
  margin-bottom: 28px;
  font-size: 15px;
}
#enroll-code {
  width: 280px;
  height: 44px;
  font-size: 22px;
  text-align: center;
  letter-spacing: 4px;
  border: 1px solid #334155;
  background: #1E293B;
  color: #F8FAFC;
  border-radius: 4px;
  padding: 8px;
}
#enroll-btn, .btn {
  height: 44px;
  padding: 0 24px;
  margin-left: 10px;
  font-size: 16px;
  border: 0;
  border-radius: 4px;
  background: #2563EB;
  color: #fff;
  cursor: pointer;
}
#enroll-msg {
  margin-top: 18px;
  color: #F59E0B;
  min-height: 22px;
}

/* Banner */
.banner {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 8px 16px;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}
.banner.visible { display: block; }
.banner.warn { background: #78350F; color: #FDE68A; }
.banner.crit { background: #7F1D1D; color: #FECACA; }
.banner.info { background: #1E3A5F; color: #BFDBFE; }

/* Header */
#header {
  height: 56px;
  background: #111827;
  border-bottom: 1px solid #1E293B;
  padding: 0 16px;
  line-height: 56px;
}
#header .brand {
  float: left;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.3px;
}
#header .brand span {
  color: #64748B;
  font-weight: normal;
  font-size: 13px;
  margin-left: 10px;
}
#header .meta {
  float: right;
  font-size: 13px;
  color: #CBD5E1;
}
#header .meta .item {
  display: inline-block;
  margin-left: 18px;
}
#conn-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #64748B;
  margin-right: 4px;
}
#conn-dot.online { background: #22C55E; }
#conn-dot.offline { background: #EF4444; }
#conn-dot.stale { background: #F59E0B; }

.clearfix { clear: both; height: 0; overflow: hidden; }

/* Main layout: fixed 1024x768 content */
#main {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px 8px 12px;
  overflow: hidden;
}

.row {
  width: 100%;
  overflow: hidden;
  margin-bottom: 8px;
}

.card {
  float: left;
  background: #1E293B;
  border: 1px solid #243447;
  border-radius: 4px;
  padding: 10px 12px;
  margin-right: 8px;
  margin-bottom: 0;
  overflow: hidden;
}

.card:last-child { margin-right: 0; }

.card .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #94A3B8;
  margin-bottom: 4px;
}

.card .value {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.1;
}

.card .unit {
  font-size: 13px;
  color: #94A3B8;
  font-weight: normal;
  margin-left: 4px;
}

.card .bar {
  margin-top: 8px;
  height: 8px;
  background: #0F172A;
  border-radius: 2px;
  overflow: hidden;
}
.card .bar > span {
  display: block;
  height: 8px;
  width: 0;
  background: #22C55E;
}

/* Resource row: 6 equal cards ~160px */
.res .card {
  width: 162px;
  height: 96px;
}

/* Service overview table layout */
.svc-wrap {
  width: 100%;
  border-collapse: separate;
  border-spacing: 8px 0;
}
.svc-wrap td {
  vertical-align: top;
  width: 25%;
}

.panel {
  background: #1E293B;
  border: 1px solid #243447;
  border-radius: 4px;
  height: 268px;
  overflow: hidden;
}
.panel h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #94A3B8;
  padding: 10px 12px 6px;
  border-bottom: 1px solid #243447;
}
.panel .body {
  padding: 8px 12px;
  height: 230px;
  overflow: hidden;
}
.panel .big {
  font-size: 36px;
  font-weight: bold;
  margin: 8px 0 4px;
}
.panel .detail {
  color: #94A3B8;
  font-size: 12px;
  line-height: 1.5;
}
.panel .list {
  list-style: none;
  font-size: 12px;
  line-height: 1.55;
}
.panel .list li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 0;
  border-bottom: 1px solid #243447;
}
.panel .list .name { color: #E2E8F0; }
.panel .list .meta { color: #64748B; float: right; }

/* Alerts row */
.alerts-panel {
  height: 168px;
}
.alerts-panel .body {
  height: 130px;
  overflow: hidden;
}
.alert-item {
  padding: 5px 0;
  border-bottom: 1px solid #243447;
  font-size: 12px;
  line-height: 1.35;
}
.alert-item .sev {
  display: inline-block;
  width: 72px;
  font-weight: bold;
  font-size: 11px;
}
.alert-empty {
  color: #64748B;
  padding-top: 28px;
  text-align: center;
}

#footer {
  position: absolute;
  bottom: 4px;
  left: 12px;
  right: 12px;
  font-size: 11px;
  color: #475569;
  text-align: right;
}