:root {
  color-scheme: dark;
  --navy: #0d1827;
  --panel: #f8fbfa;
  --ink: #243244;
  --muted: #738095;
  --teal: #12bd96;
  --green: #148a61;
  --red: #c93632;
  --amber: #bc791d;
}

* { box-sizing: border-box; }

html,
body { width: 100%; height: 100%; overflow: hidden; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 70% 10%, #134b52 0, transparent 38%),
    linear-gradient(135deg, #07121f 0%, #0c2530 55%, #07121f 100%);
}

button,
a { font: inherit; }

.monitor-shell {
  width: calc(100% - 24px);
  height: 100dvh;
  margin: 0 auto;
  padding: 12px 0 8px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  overflow: hidden;
}

.monitor-header,
.signin-panel,
.monitor-section {
  background: rgba(248, 251, 250, .98);
  border: 1px solid rgba(255, 255, 255, .28);
  border-top: 4px solid var(--teal);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

.monitor-header {
  min-height: 96px;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 26px;
}

.monitor-header > a {
  flex: 0 1 300px;
  min-width: 230px;
}

.monitor-header img {
  width: min(300px, 100%);
  max-height: 66px;
  height: auto;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.monitor-heading { flex: 1; border-left: 2px solid var(--teal); padding-left: 20px; }

.eyebrow {
  display: block;
  color: #068764;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 10px;
  font-weight: 900;
}

h1,
h2,
p { margin: 0; }

h1 { font-size: 30px; line-height: 1.05; letter-spacing: 0; }
h2 { font-size: 17px; line-height: 1.1; margin-top: 2px; }
.monitor-heading p { color: var(--muted); margin-top: 3px; font-size: 12px; font-weight: 700; }

.monitor-actions { display: flex; align-items: center; gap: 8px; }
.live-indicator {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid #c9ddd7;
  border-radius: 7px;
  background: #eef8f5;
  color: var(--green);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.live-indicator i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 5px rgba(20, 138, 97, .12);
}
.live-indicator.warning { color: var(--amber); background: #fff7e8; border-color: #ead1a7; }
.live-indicator.warning i { box-shadow: 0 0 0 5px rgba(188, 121, 29, .12); }
.live-indicator.critical { color: var(--red); background: #fff0ee; border-color: #efbbb6; }
.live-indicator.critical i { box-shadow: 0 0 0 5px rgba(201, 54, 50, .12); }
.clock { color: var(--muted); font-size: 15px; font-weight: 900; min-width: 64px; text-align: center; }

.rotation-toggle {
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid #cbd8d4;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.rotation-toggle:hover { border-color: var(--teal); }
.rotation-toggle input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--teal);
}
.rotation-toggle span,
.rotation-toggle strong,
.rotation-toggle small { display: block; }
.rotation-toggle strong { font-size: 11px; line-height: 1.1; }
.rotation-toggle small { margin-top: 2px; color: var(--green); font-size: 9px; font-weight: 800; }

.monitor-button {
  border: 1px solid #cbd8d4;
  background: #fff;
  color: var(--ink);
  border-radius: 7px;
  padding: 9px 13px;
  font-weight: 800;
  cursor: pointer;
}

.monitor-button:hover { border-color: var(--teal); }
.monitor-button.primary { color: #fff; background: #10b886; border-color: #10b886; }

.signin-panel {
  align-self: start;
  margin-top: 0;
  padding: 22px 28px;
  display: flex;
  gap: 20px;
  align-items: center;
}

.signin-panel img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #cae0d9;
  border-radius: 8px;
  padding: 7px;
}

.signin-panel > div { flex: 1; }
.signin-panel p { color: var(--muted); margin-top: 5px; }
.display-pairing {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  max-width: 660px;
}

.display-pairing > label,
.display-pairing > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.display-pairing > div {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
}

.display-pairing input {
  min-width: 0;
  border: 1px solid #cbd8d4;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 9px 11px;
  text-transform: uppercase;
}

.display-pairing input:focus {
  border-color: var(--teal);
  outline: 3px solid rgba(16, 184, 134, .15);
}
.hidden { display: none !important; }

.dashboard {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.summary-card {
  position: relative;
  min-width: 0;
  min-height: 84px;
  padding: 11px 13px 10px;
  border-radius: 8px;
  border: 1px solid #cddbd7;
  background: linear-gradient(145deg, #fff, #f3f8f6);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .15);
  overflow: hidden;
}

.summary-card::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #89969b;
  box-shadow: 0 0 0 5px rgba(115, 128, 149, .1);
}
.summary-card.online::after { background: var(--green); box-shadow: 0 0 0 5px rgba(20, 138, 97, .1); }
.summary-card.offline::after,
.summary-card.alerts::after { background: var(--amber); box-shadow: 0 0 0 5px rgba(188, 121, 29, .1); }
.summary-card.errors::after { background: var(--red); box-shadow: 0 0 0 5px rgba(201, 54, 50, .1); }

.summary-card span,
.summary-card small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-card strong {
  display: block;
  font-size: 30px;
  line-height: 1;
  margin: 6px 0 4px;
}

.summary-card.online { border-top: 4px solid var(--green); }
.summary-card.online strong { color: var(--green); }
.summary-card.offline,
.summary-card.alerts { border-top: 4px solid var(--amber); }
.summary-card.offline strong,
.summary-card.alerts strong { color: var(--amber); }
.summary-card.errors { border-top: 4px solid var(--red); }
.summary-card.errors strong { color: var(--red); }

.provider-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  min-height: 0;
}

.provider-summary-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid #cddbd7;
  border-top: 3px solid #93aaa4;
  border-radius: 7px;
  background: rgba(248, 251, 250, .96);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .13);
}
.provider-summary-card.provider-state-healthy { border-top-color: var(--green); }
.provider-summary-card.provider-state-warning { border-top-color: var(--amber); }
.provider-summary-card.provider-state-critical { border-top-color: var(--red); }

.provider-summary-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.provider-summary-heading strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 13px;
}
.provider-summary-heading strong { display: flex; align-items: center; gap: 7px; }
.provider-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #93aaa4; }
.provider-state-healthy .provider-dot { background: var(--green); }
.provider-state-warning .provider-dot { background: var(--amber); }
.provider-state-critical .provider-dot { background: var(--red); }

.provider-summary-heading em {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: #dce9e5;
  color: var(--ink);
  font-size: 10px;
  font-style: normal;
  text-align: center;
}

.provider-summary-heading em b {
  font-size: 12px;
}

.provider-summary-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.provider-summary-metrics span {
  min-width: 0;
  padding-left: 7px;
  border-left: 2px solid #d9e5e1;
}

.provider-summary-metrics b,
.provider-summary-metrics small {
  display: block;
}

.provider-summary-metrics b {
  font-size: 14px;
  line-height: 1.05;
}

.provider-summary-metrics small,
.provider-summary-note {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-health-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}
.provider-health-row b { color: var(--ink); text-transform: uppercase; }
.provider-state-healthy .provider-health-row b { color: var(--green); }
.provider-state-warning .provider-health-row b { color: var(--amber); }
.provider-state-critical .provider-health-row b { color: var(--red); }
.provider-health-track { height: 4px; overflow: hidden; border-radius: 999px; background: #dfe9e6; }
.provider-health-track i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.provider-state-warning .provider-health-track i { background: var(--amber); }
.provider-state-critical .provider-health-track i { background: var(--red); }

.provider-summary-note {
  padding-top: 5px;
  border-top: 1px solid #dce7e4;
}

.provider-summary-card-acronis {
  border-color: #9fdacb;
  background: linear-gradient(135deg, rgba(239, 251, 247, .98), rgba(248, 251, 250, .98));
}

.provider-online { color: var(--green); }
.provider-offline { color: var(--amber); }
.provider-critical { color: var(--red); }
.provider-alerts { color: #176f91; }

.monitor-content {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(390px, 1.05fr) minmax(0, 1.95fr);
  gap: 10px;
  overflow: hidden;
}

.errors-section { border-top-color: var(--red); }
.fleet-section { border-top-color: var(--teal); }

.monitor-section {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 11px 12px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.section-heading {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #d6e2df;
}

.refresh-note,
.error-count {
  max-width: 58%;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-align: right;
}

.device-grid {
  --device-columns: 3;
  --device-rows: 3;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--device-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--device-rows), minmax(0, 1fr));
  gap: 7px;
  padding-top: 8px;
  overflow: hidden;
}

.device-card {
  min-width: 0;
  min-height: 0;
  background: linear-gradient(145deg, #fff, #f7faf9);
  border: 1px solid #d0ddd9;
  border-left: 5px solid #8b9a9a;
  border-radius: 7px;
  padding: 8px 9px;
  overflow: hidden;
}
.device-card:hover { border-color: #9fc6bc; box-shadow: 0 7px 18px rgba(20, 80, 69, .09); }

.device-card.online { border-left-color: var(--green); }
.device-card.offline { border-left-color: var(--amber); }
.device-card.error { border-left-color: var(--red); }
.device-card.error {
  animation: critical-device-flash 1.35s ease-in-out infinite;
}
.device-top { display: flex; justify-content: space-between; gap: 8px; }
.device-top > div { min-width: 0; }

.device-provider {
  display: block;
  margin-bottom: 2px;
  color: #087b60;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-name,
.device-customer,
.device-meta b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-name { font-weight: 900; font-size: 13px; }
.device-customer { color: var(--muted); margin-top: 2px; font-size: 10px; font-weight: 700; }
.device-controller {
  margin-top: 2px;
  color: #4f6b68;
  font-size: 9px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 9px;
}

.device-meta span { min-width: 0; }
.device-meta b { display: block; margin-top: 1px; color: var(--ink); font-size: 10px; }
.device-meta.operational { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.device-meta .device-resources {
  grid-column: 1 / -1;
  padding-top: 3px;
  border-top: 1px solid #e3ebe8;
}

.status-pill {
  flex: none;
  align-self: start;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.status-pill.online { color: var(--green); background: #dff5eb; }
.status-pill.offline { color: #85530e; background: #fff1d9; }
.status-pill.error { color: var(--red); background: #ffe2df; }
.status-pill.unknown { color: var(--muted); background: #edf1f1; }

.device-error {
  margin-top: 6px;
  color: var(--red);
  font-size: 9px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.error-list {
  --alert-rows: 4;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(var(--alert-rows), minmax(0, 1fr));
  gap: 6px;
  padding-top: 8px;
  overflow: hidden;
}

.error-row {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-left: 4px solid var(--red);
  background: #fff3f1;
  border-radius: 6px;
  overflow: hidden;
}

.error-row.warning { border-left-color: var(--amber); background: #fff8ec; }
.error-row.critical {
  animation: critical-alert-flash 1.15s ease-in-out infinite;
}
.error-row > div { min-width: 0; }
.error-row strong,
.error-row span,
.error-row time {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert-main { min-width: 0; }
.alert-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.alert-title strong {
  min-width: 0;
  flex: 1;
  font-size: 11px;
}
.source-badge {
  flex: 0 0 auto;
  max-width: 132px;
  padding: 3px 6px;
  border-radius: 999px;
  background: #e4ece9;
  color: #30423f;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}
.source-badge.source-unifi { background: #dceeff; color: #075a9c; }
.source-badge.source-mikrotik { background: #dce7f1; color: #244f70; }
.source-badge.source-hardware { background: #ffe1df; color: #a5221d; }
.source-badge.source-acronis { background: #e7e4f6; color: #4d3f86; }
.source-badge.source-collector { background: #e1f2ed; color: #087456; }
.alert-context { margin-top: 4px; color: var(--muted); font-size: 8px; font-weight: 800; }
.alert-message { margin-top: 3px; color: var(--ink); font-size: 9px; font-weight: 800; }
.alert-side {
  min-width: 62px;
  text-align: right;
}
.alert-side b {
  color: var(--red);
  font-size: 9px;
  text-transform: uppercase;
}
.error-row.warning .alert-side b { color: var(--amber); }
.alert-side time { margin-top: 5px; color: var(--muted); font-size: 8px; }

@keyframes critical-device-flash {
  0%, 100% {
    background: #fff;
    box-shadow: 0 0 0 0 rgba(201, 54, 50, 0);
  }
  50% {
    background: #ffe6e3;
    box-shadow: 0 0 0 3px rgba(201, 54, 50, .2);
  }
}

@keyframes critical-alert-flash {
  0%, 100% {
    background: #fff3f1;
    box-shadow: 0 0 0 0 rgba(201, 54, 50, 0);
  }
  50% {
    background: #ffcfc9;
    box-shadow: 0 0 0 3px rgba(201, 54, 50, .26);
  }
}

body.disable-critical-flash .is-critical,
body.disable-critical-flash [data-severity="critical"] { animation: none !important; }

.empty-state {
  align-self: center;
  color: var(--muted);
  text-align: center;
  padding: 20px 8px;
  font-weight: 700;
}
.healthy-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.healthy-state i { width: 18px; height: 18px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 7px rgba(20, 138, 97, .11); }
.healthy-state strong { margin-top: 8px; color: var(--green); font-size: 16px; }
.healthy-state span { font-size: 10px; }

.page-message {
  position: fixed;
  z-index: 20;
  right: 16px;
  bottom: 30px;
  max-width: min(520px, calc(100% - 32px));
  margin: 0;
  padding: 9px 12px;
  color: #7a4d08;
  background: #fff2d8;
  border: 1px solid #e5bd72;
  border-radius: 7px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
  font-size: 11px;
  font-weight: 800;
}

.page-message:empty { display: none; }

footer {
  height: 16px;
  color: #b6c6cd;
  text-align: center;
  font-size: 10px;
  line-height: 16px;
}

footer a { color: #50d3b0; }

@media (max-width: 1500px) {
  .summary-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .summary-card { min-height: 67px; padding: 8px 11px; }
  .summary-card strong { display: inline-block; margin: 5px 8px 2px 0; font-size: 24px; }
  .summary-card small { display: inline; }
  .provider-summary { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

@media (max-height: 820px) {
  .monitor-shell { padding-top: 8px; gap: 7px; }
  .monitor-header { min-height: 76px; padding: 7px 14px; gap: 18px; }
  .monitor-header > a { flex-basis: 240px; min-width: 200px; }
  .monitor-header img { width: min(240px, 100%); max-height: 52px; }
  h1 { font-size: 25px; }
  .summary-card { min-height: 58px; }
  .summary-card span,
  .summary-card small { font-size: 9px; }
  .summary-card strong { font-size: 22px; }
  .provider-summary-card { padding: 6px 8px; }
}

@media (min-width: 2200px) and (min-height: 1200px) {
  .monitor-shell { width: calc(100% - 40px); padding: 20px 0 12px; gap: 14px; }
  .monitor-header { min-height: 120px; padding: 16px 28px; }
  .monitor-header > a { flex-basis: 360px; }
  .monitor-header img { width: min(360px, 100%); max-height: 78px; }
  h1 { font-size: 38px; }
  h2 { font-size: 22px; }
  .summary-card { min-height: 110px; padding: 16px 18px; }
  .summary-card span,
  .summary-card small { font-size: 14px; }
  .summary-card strong { font-size: 42px; }
  .provider-summary-card { padding: 11px 14px; }
  .provider-summary-heading strong { font-size: 16px; }
  .provider-summary-heading em { font-size: 12px; }
  .provider-summary-heading em b,
  .provider-summary-metrics b { font-size: 17px; }
  .provider-summary-metrics small,
  .provider-summary-note { font-size: 11px; }
  .monitor-content { grid-template-columns: minmax(520px, 1.05fr) minmax(0, 1.95fr); }
  .monitor-section { padding: 15px 16px; }
  .section-heading { min-height: 50px; }
  .device-grid { gap: 10px; padding-top: 11px; }
  .device-card { padding: 12px 13px; }
  .device-name { font-size: 17px; }
  .device-customer,
  .device-meta b { font-size: 13px; }
  .device-provider,
  .device-meta,
  .status-pill,
  .device-error { font-size: 12px; }
  .error-row strong { font-size: 14px; }
  .error-row span { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .device-card.error,
  .error-row.critical { animation: none; }
}

@media (max-width: 900px), (max-height: 600px) {
  html,
  body { height: auto; min-height: 100%; overflow: auto; }
  .monitor-shell { width: calc(100% - 20px); height: auto; min-height: 100vh; overflow: visible; }
  .monitor-header { flex-wrap: wrap; }
  .monitor-header > a { flex: 0 1 260px; min-width: 190px; }
  .monitor-header img { width: min(260px, 62vw); }
  .monitor-heading { order: 3; flex-basis: 100%; border-left: 0; border-top: 1px solid #d3e4df; padding: 10px 0 0; }
  .monitor-actions { margin-left: auto; }
  .rotation-toggle strong { max-width: 88px; }
  .dashboard { overflow: visible; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .provider-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monitor-content { grid-template-columns: 1fr; overflow: visible; }
  .monitor-section,
  .device-grid,
  .error-list { overflow: visible; }
  .device-grid { grid-template-columns: 1fr; }
  .signin-panel { flex-wrap: wrap; }
  .signin-panel .monitor-button { width: 100%; }
  .display-pairing > div { grid-template-columns: 1fr; }
}