:root {
  /* HKUST palette */
  --brand-blue: #003a8c; /* deep HKUST blue */
  --brand-gold: #b38f26; /* HKUST gold */
  /* Dark theme base tuned to blue */
  --bg: #0b162c;
  --panel: #0f2342;
  --text: #e6eef7;
  --accent: var(--brand-gold);
  --cell-size: 64px;
  --content-max: 1200px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
header { padding: 16px; border-bottom: 2px solid var(--brand-gold); }
h1 { margin: 0 0 8px; font-size: 20px; }
.controls { display: flex; align-items: center; gap: 16px; padding: 12px 16px; flex-wrap: wrap; }
.buttons { display: flex; gap: 8px; }
button {
  background: var(--brand-blue);
  color: var(--text);
  border: 1px solid #18539a;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}
button:hover { background: #1a59b8; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.settings label { display: inline-flex; align-items: center; gap: 8px; }
input[type="number"] {
  background: #0b162c;
  border: 1px solid #143a70;
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
  width: 120px;
}
#status { margin-left: auto; font-weight: 600; color: var(--accent); }

.data { display: grid; grid-template-columns: 1fr 320px; gap: 16px; padding: 16px; max-width: var(--content-max); margin: 0 auto; grid-template-areas: "controls controls" "grid grid" "meta meta" "timeseries timeseries"; }
.meta {
  background: var(--panel);
  padding: 8px 12px;
  border-radius: 8px;
  display: flex;
  gap: 24px;
  grid-column: 1 / span 2;
  width: fit-content;
  margin: 6px auto 12px;
}

.grid {
  margin: 12px auto;
  display: grid;
  width: fit-content;
  grid-template-columns: repeat(var(--cols), var(--cell-size));
  gap: 6px;
  /* Center across both columns of the parent .data grid */
  grid-column: 1 / span 2;
  justify-self: center;
}

/* Meta information under the grid */
.meta {
  grid-column: 1 / span 2;
  justify-self: center;
  margin: 8px auto;
  text-align: center;
}
/* Removed grid-footer, using .meta under grid instead */
.cell {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  border: 1px solid #1a4d8f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 1.6vw, 18px);
  background: #0b162c;
}

.values { background: var(--panel); padding: 8px 12px; border-radius: 8px; overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid #1f2937; padding: 6px 8px; text-align: left; }
thead th { position: sticky; top: 0; background: #0b1220; }

/* Timeseries */
.timeseries {
  grid-column: 1 / span 2;
  background: var(--panel);
  padding: 12px;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-template-areas: "canvas side";
  gap: 12px;
  align-items: start;
}
#timeseriesCanvas { grid-area: canvas; width: 100%; height: 240px; background: #0b162c; border: 1px solid #1a4d8f; border-radius: 6px; }
.ts-side { grid-area: side; display: flex; flex-direction: column; gap: 8px; }

/* Sensor multi-select */
.sensor-multi {
  display: grid;
  grid-template-columns: repeat(var(--multi-cols, 3), 1fr);
  gap: 8px;
  max-height: 240px;
  overflow: auto;
}
.sensor-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #091a33;
  border: 1px solid #143a70;
  padding: 4px 8px;
  border-radius: 6px;
}

footer { padding: 12px 16px; border-top: 1px solid #143a70; color: #9fb6d4; }

/* Responsive adjustments */
@media (max-width: 1024px) {
  :root { --cell-size: 56px; }
  #timeseriesCanvas { height: 220px; }
}

@media (max-width: 900px) {
  :root { --cell-size: 56px; }
  .data { grid-template-columns: 1fr; grid-template-areas: "grid" "meta" "timeseries" "controls"; }
  .timeseries { grid-template-columns: 1fr; grid-template-areas: "canvas" "side"; }
  #timeseriesCanvas { height: 200px; }
  .sensor-multi { max-height: 200px; }
}

@media (max-width: 600px) {
  :root { --cell-size: 52px; }
  #timeseriesCanvas { height: 180px; }
  .controls { flex-direction: column; align-items: stretch; }
  .buttons { flex-wrap: wrap; }
  .buttons button { flex: 1 1 45%; }
  #status { margin-left: 0; }
  /* Expand sensor grid width on mobile */
  .grid { width: 80vw; grid-template-columns: repeat(var(--cols), 1fr); }
}

@media (max-width: 480px) {
  :root { --cell-size: 48px; }
  .controls { gap: 12px; }
  #timeseriesCanvas { height: 160px; }
  .buttons button { flex: 1 1 48%; }
  .grid { width: 90vw; }
}
.controls { grid-area: controls; }
.grid { grid-area: grid; }
.meta { grid-area: meta; }
.timeseries { grid-area: timeseries; }