/* ==========================================================================
   Water Quality Report — design tokens
   Palette: deep ink-teal on a cool pale "water surface" background, one
   saturated teal accent for data/action, amber/coral reserved for status.
   Type: Fraunces (display, report-title feel) + Inter (body/UI) +
   IBM Plex Mono (numeric readouts — ties to the instrument/measurement
   subject matter instead of treating numbers as plain body text).
   ========================================================================== */
:root {
  --ink:        #12293A;
  --ink-soft:   #3E5A6B;
  --paper:      #F2F7F8;
  --card:       #FFFFFF;
  --line:       #DCE7E9;
  --teal:       #0E7C7B;
  --teal-deep:  #0B5E5D;
  --cyan:       #4FD1C5;
  --amber:      #B8791A;
  --amber-bg:   #FBF0DC;
  --coral:      #C4423B;
  --coral-bg:   #FBE7E5;
  --green:      #2E7D4F;
  --green-bg:   #E4F3EA;
  --gray-bg:    #E9EEEF;

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', monospace;

  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
}

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 24px; }

/* ---------- Letterhead header ---------- */
.letterhead {
  background: linear-gradient(160deg, var(--teal-deep) 0%, var(--teal) 60%, #14938F 100%);
  color: #EAFBF9;
  padding: 36px 0 0 0;
  position: relative;
}
.letterhead-inner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 28px;
  flex-wrap: wrap;
}
.letterhead-mark {
  font-size: 2.4rem;
  line-height: 1;
  transform: rotate(180deg);
  color: var(--cyan);
  flex: 0 0 auto;
}
.letterhead-text { flex: 1 1 260px; }
.eyebrow {
  margin: 0 0 4px 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #BFEAE6;
}
.letterhead h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.9rem);
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}
.location { margin: 0; color: #CFF1EE; font-size: 0.92rem; }
.letterhead-status {
  flex: 0 0 auto;
  text-align: right;
  padding-top: 6px;
}
.last-updated {
  margin: 8px 0 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #CFF1EE;
}

.wave-divider {
  display: block;
  width: 100%;
  height: 32px;
  fill: var(--paper);
}

/* ---------- Status pills ---------- */
.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
}
.pill-green { background: var(--green-bg); color: var(--green); }
.pill-amber { background: var(--amber-bg); color: var(--amber); }
.pill-coral { background: var(--coral-bg); color: var(--coral); }
.pill-gray  { background: rgba(255,255,255,0.18); color: #EAFBF9; }

/* ---------- Parameter summary cards ---------- */
.panel-summary { margin-top: -8px; }
.param-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 20px 0 8px 0;
}
.param-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.param-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--teal);
}
.param-card.state-warn::before { background: var(--amber); }
.param-card.state-error::before { background: var(--coral); }
.param-label {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0 0 6px 0;
}
.param-value {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--ink);
}
.param-unit {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-left: 4px;
}

/* ---------- Generic panel ---------- */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin: 20px 0;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.panel-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0;
  color: var(--ink);
}
.panel-sub { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- Chart controls ---------- */
.controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.controls label {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  color: var(--ink-soft);
  gap: 4px;
}
.controls input, .controls select {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--paper);
}
.chart-wrap { margin-top: 8px; }
.legend-note { text-align: center; color: var(--ink-soft); font-size: 0.85rem; padding: 24px; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-accent { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-soft); margin-top: 10px; }

/* ---------- Login / control box ---------- */
.login-box { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.login-box input {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.85rem;
  width: 180px;
}
.control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.control-title { margin: 0 0 4px 0; font-weight: 600; }
.control-desc { margin: 0; font-size: 0.85rem; color: var(--ink-soft); max-width: 46ch; }
.scrape-status { font-family: var(--font-mono); font-size: 0.8rem; margin: 12px 0 0 0; color: var(--ink-soft); }

/* ---------- History table ---------- */
.table-wrap { overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.data-table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--ink);
  color: var(--ink-soft);
  font-weight: 500;
  white-space: nowrap;
}
.data-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table tbody tr:nth-child(even) { background: var(--paper); }
.table-empty { font-family: var(--font-body); color: var(--ink-soft); text-align: center; padding: 20px; }

/* ---------- Footer ---------- */
.report-footer {
  padding: 24px 24px 48px 24px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  max-width: 1000px;
}

/* ---------- Responsive ---------- */
@media (min-width: 620px) {
  .param-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 860px) {
  .param-grid { grid-template-columns: repeat(6, 1fr); }
}