:root {
  --bg: #0b1020;
  --panel: #0f162d;
  --muted: #9aa4b2;
  --text: #e6ecf3;
  --sep: #213052;
  --ok: #16a34a;
  --nok: #dc2626;
  --pending: #f59e0b;
  --unknown: #9ca3af;
  --offline: #cfd5dc;
  --nonclinical: #b9c2cf;
  --mammo: #ec4899; /* pink highlight for mammography */
  --accent: #60a5fa;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, #1a2442 0%, transparent 60%),
              radial-gradient(800px 400px at 110% -10%, #0b3b4e 0%, transparent 50%),
              var(--bg);
}

.app-header {
  padding: 16px 0;
  border-bottom: 1px solid var(--sep);
  backdrop-filter: blur(4px);
}
.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.title-wrap h1 { margin: 0; font-size: 22px; letter-spacing: 0.4px; }
.subtitle { color: var(--muted); font-size: 12px; margin-top: 2px; }

.tabs { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.tab {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--sep);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.tab.active {
  background: linear-gradient(180deg, #122049, #0f1c3d);
  border-color: #2a3e72;
  color: white;
}
.tab:hover { border-color: #35539a; }

.theme-toggle, .density-toggle {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--sep);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}
.theme-toggle:hover, .density-toggle:hover { border-color: #35539a; }

.content { padding: 16px 20px 80px; max-width: 1400px; margin: 0 auto; }
.panel { display: none; }
.panel.active { display: block; }

.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 10px 0 12px; }
.panel-header h2 { margin: 0; font-size: 18px; font-weight: 600; }
.panel-header .range { color: var(--muted); font-weight: 400; margin-left: 8px; font-size: 12px; }

.legend { display: flex; gap: 14px; color: var(--muted); font-size: 12px; }
.legend .dim { opacity: 0.7; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; border: 1px solid #0006; }
.swatch.ok { background: var(--ok); }
.swatch.nok { background: var(--nok); }
.swatch.pending { background: var(--pending); }
.swatch.unknown { background: var(--unknown); }
.swatch.mammo { background: var(--mammo); }

.grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.grid.tiles { grid-template-columns: repeat(auto-fill, minmax(var(--tile-min, 180px), 1fr)); gap: 8px; align-items: stretch; }

.row {
  display: grid;
  grid-template-columns: 220px 1fr 110px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid var(--sep);
  border-radius: 10px;
}
.ws {
  display: flex; flex-direction: column; gap: 2px;
}
.ws .id { font-weight: 600; letter-spacing: 0.3px; }
.ws .meta { color: var(--muted); font-size: 12px; }

.monitors {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.monitor-square {
  width: 38px; height: 38px;
  border-radius: 6px;
  border: 1px solid #0008;
  box-shadow: inset 0 0 0 1px #ffffff15;
  display: inline-flex; align-items: center; justify-content: center;
}
.monitor-square.ok { background: linear-gradient(180deg, #1fb55a, #158e48); }
.monitor-square.nok { background: linear-gradient(180deg, #f03c3c, #b71c1c); }
.monitor-square.pending { background: linear-gradient(180deg, #f7ad2a, #c57d0b); color: #1a1400; }
.monitor-square.unknown { background: linear-gradient(180deg, #a5acb5, #707983); }
.monitor-square.offline { background: linear-gradient(180deg, var(--offline), #aeb5bf); }
.monitor-square.nonclinical { border: 2px solid var(--nonclinical); box-shadow: inset 0 0 0 1px #ffffff10; }
.monitor-sep { width: 2px; height: 38px; background: #ffffff12; border-radius: 1px; }
.monitor-label { display: none; font-size: 10px; color: #000; }

.summary { text-align: right; color: var(--muted); font-size: 12px; }

/* Compact tiles */
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px; border: 1px solid var(--sep); border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); }
.tile.mammography { border-color: var(--mammo); }
.tile .monitors { gap: 6px; justify-content: flex-start; flex-wrap: nowrap; }
.tile .monitor-square { width: var(--sq-size, 22px); height: var(--sq-size, 22px); border-radius: 5px; }
.tile .id { font-size: 12px; font-weight: 600; text-align: left; color: var(--text); }
.tile .summary { display: none; }

/* Bars (historical) */
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 220px 1fr 80px; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--sep); border-radius: 10px; background: #0f162d; }
.bar-shell { width: 100%; height: 16px; background: #101a33; border: 1px solid #223055; border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #1fb55a, #158e48); }
.bar-fill.non { background: linear-gradient(90deg, #f03c3c, #b71c1c); }
.bar-meta { text-align: right; font-size: 12px; color: var(--muted); }

/* Responsive tweaks */
@media (max-width: 900px) {
  .row, .bar-row { grid-template-columns: 1fr; align-items: stretch; }
  .summary, .bar-meta { text-align: left; }
}

@media (min-width: 1500px) {
  .monitor-square { width: 44px; height: 44px; }
  .monitor-sep { height: 44px; }
}

/* Light theme overrides */
body.theme-light {
  --bg: #f6f8fc;
  --panel: #ffffff;
  --muted: #5a6572;
  --text: #0b1020;
  --sep: #e1e6ef;
}
/* In light mode, remove dark radial gradients and use a flat background */
body.theme-light {
  background: var(--bg) !important;
}
body.theme-light .tab.active {
  background: linear-gradient(180deg, #eff3fb, #e6ecf7);
  border-color: #cdd6ea;
  color: #0b1020;
}
body.theme-light .row, body.theme-light .bar-row { background: #ffffff; }
body.theme-light .bar-shell { background: #eef2f9; border-color: #d5ddee; }
body.theme-light .monitor-square { border-color: #cad2df; box-shadow: inset 0 0 0 1px #00000008; }

/* Footer alignment */
.footer { padding: 16px 0; }
.footer-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; color: var(--muted); font-size: 12px; display: flex; flex-direction: column; gap: 4px; }

/* Modal */
/* Loading Screen */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

.loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-content {
  text-align: center;
  padding: 2rem;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-content h2 {
  color: var(--text);
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

.loading-content p {
  color: var(--text-dim);
  margin: 0;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-overlay.show { display: flex; }
.modal {
  width: min(520px, calc(100% - 32px));
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--sep);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--sep); }
.modal-body { padding: 14px; color: var(--text); }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--sep); }
.modal-close { background: transparent; border: 1px solid var(--sep); color: var(--text); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.btn { background: transparent; border: 1px solid var(--sep); color: var(--text); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.btn:hover, .modal-close:hover { border-color: #35539a; }

/* Light theme modal tweaks */
body.theme-light .modal { background: #ffffff; color: #0b1020; }
body.theme-light .modal-body { color: #0b1020; }