/* TECHXCOD Legacy NOC — iPad 2 / Safari 9 / 1024 px landscape */
/* No CSS Grid, no modern Flexbox, no custom properties, no vh units.
   Block geometry (views, panels, cards) is set in px by js/app.js layout(),
   so the screen fits Safari (toolbar visible) and Home Screen mode alike. */

* {
  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: #0A1324;
  color: #E6EDF7;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  min-width: 1024px;
  position: relative;
}

a { color: #93C5FD; text-decoration: none; cursor: pointer; }
strong { font-weight: 500; color: #E6EDF7; }

/* ---------- Status colours ---------- */
.st-HEALTHY { color: #22C55E; }
.st-WARNING { color: #F59E0B; }
.st-CRITICAL { color: #EF4444; }
.st-UNKNOWN { color: #8592A8; }

.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: middle;
  background: #5B6B85;
}
.dot-HEALTHY { background: #22C55E; }
.dot-WARNING { background: #F59E0B; }
.dot-CRITICAL { background: #EF4444; }
.dot-UNKNOWN { background: #5B6B85; }
.dot-none { visibility: hidden; }

.pill {
  display: inline-block;
  padding: 0 8px;
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill-HEALTHY { background: #0F3D24; color: #4ADE80; }
.pill-WARNING { background: #4A3209; color: #FBBF24; }
.pill-CRITICAL { background: #5C1515; color: #FCA5A5; }
.pill-UNKNOWN { background: #243149; color: #A5B1C6; }

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

/* ---------- Enrollment ---------- */
#screen-enroll { height: 100%; }
.enroll-box {
  width: 560px;
  margin: 0 auto;
  padding-top: 120px;
  text-align: center;
}
.enroll-logo {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 3px;
  color: #5B6B85;
  margin-bottom: 18px;
}
.enroll-logo span, .tb-brand span { color: #3B82F6; }
#screen-enroll h1 {
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 10px;
}
#screen-enroll .sub { color: #8A9BB5; margin-bottom: 30px; font-size: 15px; }
.enroll-row { white-space: nowrap; }
#enroll-code {
  width: 280px;
  height: 46px;
  font-size: 22px;
  text-align: center;
  letter-spacing: 4px;
  border: 1px solid #2A3B5A;
  background: #111D33;
  color: #F8FAFC;
  border-radius: 6px;
  padding: 8px;
  vertical-align: middle;
  -webkit-appearance: none;
}
.btn {
  height: 46px;
  padding: 0 26px;
  margin-left: 10px;
  font-size: 16px;
  border: 0;
  border-radius: 6px;
  background: #2563EB;
  color: #FFFFFF;
  cursor: pointer;
  vertical-align: middle;
  -webkit-appearance: none;
}
#enroll-msg { margin-top: 18px; color: #F59E0B; min-height: 22px; font-size: 15px; }
.enroll-note { margin-top: 40px; color: #5B6B85; font-size: 12px; }

/* ---------- Banner (connection / session / stale) ---------- */
.banner {
  display: none;
  height: 26px;
  line-height: 26px;
  padding: 0 16px;
  text-align: center;
  font-weight: bold;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banner.visible { display: block; }
.banner.warn { background: #4A3209; color: #FDE68A; }
.banner.crit { background: #5C1515; color: #FECACA; }
.banner.info { background: #16325C; color: #BFDBFE; }

/* ---------- Top status bar (44 px) ---------- */
#topbar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 44px;
  background: #0D1830;
  border-bottom: 1px solid #1D2B45;
  white-space: nowrap;
  overflow: hidden;
}
.tb-brand {
  position: absolute;
  left: 12px;
  top: 0;
  line-height: 44px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
}
#overall-pill {
  position: absolute;
  left: 166px;
  top: 12px;
}
.tabs {
  position: absolute;
  left: 318px;
  top: 0;
  height: 44px;
}
.tab {
  display: inline-block;
  height: 44px;
  line-height: 44px;
  padding: 0 14px;
  color: #8A9BB5;
  font-size: 14px;
  border-bottom: 3px solid transparent;
}
.tab.active { color: #FFFFFF; border-bottom-color: #3B82F6; }
.tab-count {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  vertical-align: 1px;
  background: #243149;
  color: #A5B1C6;
}
.tab-count.sev-CRITICAL { background: #DC2626; color: #FFFFFF; }
.tab-count.sev-WARNING { background: #B45309; color: #FFFFFF; }
.tab-count.empty { display: none; }
.tb-right {
  position: absolute;
  right: 12px;
  top: 0;
  height: 44px;
  line-height: 44px;
}
.rot {
  display: inline-block;
  height: 28px;
  line-height: 26px;
  padding: 0 10px;
  margin-right: 12px;
  border: 1px solid #2A3B5A;
  border-radius: 14px;
  color: #A5B1C6;
  font-size: 12px;
  vertical-align: middle;
}
.rot.on { border-color: #2563EB; color: #BFDBFE; background: #13284D; }
.rot.paused { border-color: #B45309; color: #FDE68A; background: #3A2808; }
.clock { font-size: 18px; font-weight: 300; color: #FFFFFF; vertical-align: middle; }

/* ---------- Views ---------- */
#views {
  position: absolute;
  left: 0;
  top: 44px;
  width: 100%;
  overflow: hidden;
}
.view {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
.view.active { visibility: visible; }

/* ---------- Panels ---------- */
.panel {
  position: absolute;
  background: #111D33;
  border: 1px solid #1D2B45;
  border-radius: 6px;
  overflow: hidden;
}
.p-head {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
  border-bottom: 1px solid #1A2740;
  white-space: nowrap;
  overflow: hidden;
}
.p-title {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #A5B1C6;
}
.p-counts { margin-left: 12px; font-size: 12px; color: #8A9BB5; }
.p-stamp { float: right; font-size: 11px; color: #5B6B85; }
.p-stamp.stale { color: #FBBF24; font-weight: bold; }
.p-body {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 34px;
  bottom: 6px;
  overflow: hidden;
}

/* ---------- Resource cards ---------- */
.card {
  position: absolute;
  background: #111D33;
  border: 1px solid #1D2B45;
  border-radius: 6px;
  padding: 10px 12px;
  overflow: hidden;
}
.card.stale .c-value, .card.stale .bar { opacity: 0.4; }
.c-head { height: 16px; line-height: 16px; white-space: nowrap; }
.c-label {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8A9BB5;
}
.c-head .dot { float: right; margin-top: 3px; }
.c-value {
  font-size: 40px;
  font-weight: 300;
  line-height: 52px;
  height: 52px;
  margin-top: 6px;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
}
.c-value .unit { font-size: 20px; color: #8A9BB5; margin-left: 3px; }
.c-value .na { font-size: 20px; color: #8592A8; font-weight: normal; }
.bar {
  height: 6px;
  margin-top: 8px;
  background: #1A2740;
  border-radius: 3px;
  overflow: hidden;
}
.bar span {
  display: block;
  height: 6px;
  width: 0;
  border-radius: 3px;
  background: #5B6B85;
  -webkit-transition: width 0.6s ease;
  transition: width 0.6s ease;
}
.bar.bar-na {
  background: -webkit-repeating-linear-gradient(135deg, #1A2740, #1A2740 6px, #24334F 6px, #24334F 12px);
  background: repeating-linear-gradient(135deg, #1A2740, #1A2740 6px, #24334F 6px, #24334F 12px);
}
.fill-HEALTHY { background: #22C55E !important; }
.fill-WARNING { background: #F59E0B !important; }
.fill-CRITICAL { background: #EF4444 !important; }
.fill-UNKNOWN { background: #5B6B85 !important; }
.c-sub {
  margin-top: 8px;
  font-size: 12px;
  color: #8A9BB5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-sub2 { margin-top: 22px; }
.c-sub .stale-tag, .stale-tag { color: #FBBF24; font-weight: bold; }

/* ---------- Overview side panels ---------- */
.web-summary { height: 40px; line-height: 40px; white-space: nowrap; }
.web-big { font-size: 34px; font-weight: 300; color: #FFFFFF; }
.web-of { margin-left: 8px; font-size: 13px; color: #8A9BB5; }
.chips { height: 24px; margin-top: 2px; white-space: nowrap; overflow: hidden; }
.chip {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  padding: 0 8px;
  margin-right: 5px;
  border-radius: 4px;
  font-size: 11px;
  background: #182640;
  color: #8A9BB5;
}
.chip b { font-size: 12px; margin-left: 3px; }
.chip.zero { opacity: 0.45; }
.chip-CRITICAL b { color: #F87171; }
.chip-WARNING b { color: #FBBF24; }
.chip-UNKNOWN b { color: #A5B1C6; }
.chip-HEALTHY b { color: #4ADE80; }

.mini-list { margin-top: 4px; }
.mini-row {
  height: 22px;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.mini-row .dot { margin-right: 7px; margin-top: -2px; }
.mini-row .r { color: #8A9BB5; margin-left: 6px; }
.mini-ok { color: #4ADE80; font-size: 12px; line-height: 22px; }

.comp-list { width: 100%; }
.comp {
  float: left;
  width: 50%;
  height: 20px;
  line-height: 20px;
  padding-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.comp .dot { margin-right: 7px; margin-top: -2px; }
.comp .r { color: #8A9BB5; margin-left: 4px; font-size: 11px; }
.clearfix:after { content: ""; display: table; clear: both; }

/* ---------- Alerts (grouped) ---------- */
.alert-empty {
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  color: #4ADE80;
}
.ag-row {
  height: 28px;
  line-height: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid #172338;
  font-size: 13px;
}
.ag-row .pill { margin-right: 8px; vertical-align: 1px; }
.ag-row .t { font-weight: bold; margin-right: 6px; }
.ag-row .n { color: #8A9BB5; margin-right: 8px; font-size: 12px; }
.ag-row .d { color: #C9D4E5; }
.ag-row.sev-CRITICAL { background: #1E1420; }
.ai-row {
  height: 24px;
  line-height: 24px;
  padding-left: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}
.ai-row .dot { margin-right: 8px; margin-top: -2px; }
.ai-row .r { color: #8A9BB5; margin-left: 8px; }
.ag-more { height: 24px; line-height: 24px; color: #93C5FD; font-size: 12px; }

/* ---------- Website view ---------- */
.cols { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.col { position: absolute; top: 0; bottom: 0; width: 49%; }
.col-l { left: 0; }
.col-r { right: 0; }
.w-row {
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #172338;
  white-space: nowrap;
  overflow: hidden;
  font-size: 13px;
}
.w-row .dot { margin: -2px 8px 0 2px; }
.w-name {
  display: inline-block;
  width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.w-code {
  display: inline-block;
  width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.w-ms { display: inline-block; width: 58px; text-align: right; color: #8A9BB5; vertical-align: top; }
.w-ssl { display: inline-block; width: 84px; text-align: right; vertical-align: top; font-size: 12px; }
.w-head { color: #5B6B85; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; height: 24px; line-height: 24px; }
.w-head .w-name { padding-left: 21px; }

/* ---------- Infra view ---------- */
.dk-big { font-size: 34px; font-weight: 300; color: #FFFFFF; line-height: 42px; }
.dk-big small { font-size: 13px; color: #8A9BB5; margin-left: 6px; font-weight: normal; }
.dk-line { height: 22px; line-height: 22px; font-size: 12px; color: #8A9BB5; }
.dk-line b { color: #E6EDF7; font-weight: 500; }
.dk-na { margin-top: 6px; font-size: 14px; color: #A5B1C6; line-height: 20px; }
.dk-na small { display: block; color: #8A9BB5; font-size: 12px; margin-top: 4px; }

.r2 {
  height: 38px;
  border-bottom: 1px solid #172338;
  overflow: hidden;
  padding-top: 3px;
}
.r2 .l1, .r2 .l2 {
  height: 16px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r2 .l1 { font-size: 13px; }
.r2 .l1 .dot { margin: -2px 7px 0 0; }
.r2 .l1 .e { color: #8A9BB5; font-size: 11px; margin-left: 6px; }
.r2 .l2 { font-size: 11px; color: #8A9BB5; padding-left: 16px; }
.r2.r3 { height: 54px; }
.r1 {
  height: 22px;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  border-bottom: 1px solid #142036;
}
.r1 .dot { margin: -2px 7px 0 0; }
.r1 .r { float: right; color: #8A9BB5; font-size: 11px; }
.ssl-big { font-size: 26px; font-weight: 300; color: #FFFFFF; line-height: 34px; }
.ssl-big small { font-size: 12px; color: #8A9BB5; margin-left: 6px; font-weight: normal; }
.ssl-line { font-size: 12px; color: #8A9BB5; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Pinned critical strip (30 px) ---------- */
.critstrip {
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 12px;
  background: #4C1212;
  border-top: 1px solid #7F1D1D;
  color: #FECACA;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.critstrip.visible { display: block; }
.critstrip b { color: #FFFFFF; letter-spacing: 1px; margin-right: 10px; }

/* ---------- Bottom status bar (26 px) ---------- */
#bottombar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 26px;
  line-height: 26px;
  padding: 0 12px;
  background: #0D1830;
  border-top: 1px solid #1D2B45;
  font-size: 11px;
  color: #8A9BB5;
  white-space: nowrap;
  overflow: hidden;
}
.bb-item { margin-right: 18px; }
.bb-item strong { color: #C9D4E5; font-weight: 500; }
.bb-dim { color: #5B6B85; }
.bb-right { position: absolute; right: 12px; top: 0; color: #5B6B85; }
.conn {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 0;
  background: #5B6B85;
}
.conn.online { background: #22C55E; }
.conn.stale { background: #F59E0B; }
.conn.offline { background: #EF4444; }
#rot-state.paused { color: #FBBF24; }