:root {
  --bg-top: #cfe9fb;
  --bg-mid: #c7ebff;
  --bg-bottom: #6fe7b0;
  --card: rgba(255, 255, 255, 0.62);
  --card-strong: rgba(255, 255, 255, 0.78);
  --stroke: rgba(20, 40, 60, 0.08);
  --shadow: 0 10px 30px rgba(10, 30, 50, 0.10);
  --shadow-soft: 0 6px 18px rgba(10, 30, 50, 0.08);
  --text: #102537;
  --muted: rgba(16, 37, 55, 0.65);
  --ok: #2ee59d;
  --warn: #ffb020;
  --bad: #ff5d5d;
  --pill: linear-gradient(135deg, #46f5b0, #9df7cf);
  --icon: linear-gradient(135deg, #63d7ff, #58f2a8);
  --radius: 18px;
  --container-max: 520px;
  --card-gap-row: 4px;
  --card-gap-col: 4px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  font-size: 16px;
  overflow: auto;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-mid) 45%, var(--bg-bottom));
  z-index: -1;
  pointer-events: none;
}

.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 18px 18px 10px;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.header__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.header__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.header__meta {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.meta {
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
}

.meta__label {
  font-size: 12px;
  color: var(--muted);
}

.meta__value {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
  font-weight: 700;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--muted);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}
.dot--ok { background: var(--ok); }
.dot--warn { background: var(--warn); }
.dot--bad { background: var(--bad); }

.content {
  padding: 8px 18px 18px;
  flex: 1;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.panel {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  backdrop-filter: blur(10px);
}

.panel + .panel { margin-top: 0; }

.panel--sensors {
  display: flex;
  flex-direction: column;
}

.panel--alerts {
  position: sticky;
  top: 0;
  z-index: 2;
}

.panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.panel__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}

.btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.btn--primary {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-soft);
}
.btn--primary:active { transform: translateY(1px); }

.list {
  display: flex;
  flex-direction: column;
  row-gap: var(--card-gap-row);
  column-gap: var(--card-gap-col);
  overflow: visible;
  padding-right: 2px;
  align-content: flex-start;
}

.card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-soft);
}

.icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--icon);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.label {
  display: flex;
  flex-direction: column;
}

.label__title {
  font-size: 17px;
  font-weight: 800;
}

.label__sub { display: none; }

.value-pill {
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--pill);
  color: rgba(10, 30, 30, 0.85);
  font-weight: 900;
  min-width: 96px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(46, 229, 157, 0.22);
  font-size: 15px;
}

.value-pill--warn { background: linear-gradient(135deg, #ff7a7a, #ff4d6d); box-shadow: 0 10px 24px rgba(255, 93, 93, 0.22); color: rgba(255, 255, 255, 0.95); }
.value-pill--bad { background: linear-gradient(135deg, #ff7a7a, #ff4d6d); box-shadow: 0 10px 24px rgba(255, 93, 93, 0.22); color: rgba(255, 255, 255, 0.95); }
.value-pill--na { background: rgba(255, 255, 255, 0.65); color: var(--muted); box-shadow: none; }

.inline-status {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
  min-height: 18px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--stroke);
  font-weight: 900;
  color: rgba(10, 30, 30, 0.75);
  font-size: 15px;
}

.alerts__summary {
  font-size: 14px;
  color: rgba(10, 30, 30, 0.85);
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--pill);
  border: 1px solid var(--stroke);
  box-shadow: 0 10px 24px rgba(46, 229, 157, 0.22);
}

.alerts__summary--warn {
  background: linear-gradient(135deg, #ffd27a, #ffb020);
  color: rgba(58, 38, 0, 0.92);
  box-shadow: 0 10px 24px rgba(255, 176, 32, 0.28);
  border-color: rgba(255, 176, 32, 0.55);
}

/* Red is reserved for the night intrusion -- a security event, not a reading
 * that drifted out of range. Everything else warns in amber. */
.alerts__summary--alert {
  background: linear-gradient(135deg, #ff7a7a, #ff4d6d);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 24px rgba(255, 93, 93, 0.22);
}

.badge--alert {
  background: linear-gradient(135deg, #ff7a7a, #ff4d6d);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 24px rgba(255, 93, 93, 0.18);
  border-color: rgba(255, 93, 93, 0.35);
}

@media (min-width: 900px) {
  :root { --container-max: 900px; }
  .list {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    row-gap: var(--card-gap-row);
    column-gap: var(--card-gap-col);
    align-content: start;
    grid-auto-rows: min-content;
  }
}


/* ==========================================================================
   aiot-12 additions -- reading rows, alert list, footer.
   ========================================================================== */

.header__sub {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.badge--warn {
  background: var(--warn);
  color: #3a2600;
}

.alerts__list {
  margin: 0;
  padding-left: 20px;
  line-height: 1.7;
}

.row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-soft);
  margin-bottom: 8px;
}

.row__label { font-weight: 600; }

.row__value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.row__status {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(46, 229, 157, 0.22);
}

.row__status--warn { background: rgba(255, 176, 32, 0.28); }
.row__status--na   { background: rgba(16, 37, 55, 0.10); color: var(--muted); }

.row--warn { border-color: rgba(255, 176, 32, 0.55); }
.row--na   { opacity: 0.75; }




.footer {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 14px 18px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.inline-status--stale {
  color: #a9701f;
}