/* =========================================================
   uunet_web — tabular station display
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  background: #f4f6f8;
  color: #222;
}

/* ── header ── */
#site-header {
  background: #1a3a5c;
  color: #fff;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
#site-header h1 { margin: 0; font-size: 1.1rem; font-weight: 600; }
#site-header .subtitle { font-size: 0.82rem; color: #a8c8e8; }
#site-header .version-badge {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  background: #3a7abf; color: #fff; border-radius: 3px;
  padding: 1px 6px; vertical-align: middle; margin-left: 6px;
}

/* ── controls bar ── */
#controls {
  background: #e8edf2;
  border-bottom: 1px solid #c5cdd6;
  padding: 8px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
#controls label { font-size: 0.82rem; color: #444; }
#controls select,
#controls input[type="number"],
#controls input[type="datetime-local"] {
  font-size: 0.82rem;
  padding: 3px 6px;
  border: 1px solid #aab;
  border-radius: 3px;
  background: #fff;
}
#controls button {
  padding: 4px 14px;
  font-size: 0.82rem;
  background: #1a3a5c;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
#controls button:hover { background: #254e7a; }

/* ── station meta strip ── */
#station-meta {
  padding: 6px 18px;
  font-size: 0.78rem;
  color: #555;
  background: #f0f3f6;
  border-bottom: 1px solid #d0d6dc;
}
#station-meta span { margin-right: 18px; }

/* ── status / error bar ── */
#status-bar {
  padding: 4px 18px;
  font-size: 0.8rem;
  min-height: 24px;
}
#status-bar.error { background: #fde; color: #900; }
#status-bar.loading { background: #fffae0; color: #555; }
#status-bar.ok { background: #eafbea; color: #2a6e2a; }

/* ── table wrapper ── */
#table-wrapper {
  overflow-x: auto;
  padding: 0 18px 24px;
}

/* ── data table ── */
#obs-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 700px;
  margin-top: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

#obs-table thead th {
  background: #1a3a5c;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 8px;
  text-align: center;
  white-space: nowrap;
  position: sticky;
  top: 0;
  cursor: pointer;
  user-select: none;
}
#obs-table thead th:hover { background: #254e7a; }
#obs-table thead .sort-asc::after  { content: " ▲"; font-size: 0.7rem; }
#obs-table thead .sort-desc::after { content: " ▼"; font-size: 0.7rem; }

/* unit sub-row */
#obs-table thead .unit-row th {
  background: #2d5580;
  font-size: 0.70rem;
  font-weight: 400;
  padding: 2px 8px;
  color: #c8dff0;
  cursor: default;
}

#obs-table tbody tr:nth-child(even) { background: #f5f8fc; }
#obs-table tbody tr:hover           { background: #ddeeff; }

#obs-table tbody td {
  padding: 4px 8px;
  text-align: right;
  border-bottom: 1px solid #e5eaf0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* timestamp column left-aligned */
#obs-table tbody td:first-child {
  text-align: left;
  color: #334;
  font-size: 0.78rem;
}

/* missing value */
.missing { color: #bbb; }

/* wind direction cardinal label */
.wind-dir-label {
  display: inline-block;
  width: 28px;
  text-align: left;
  color: #667;
  font-size: 0.75rem;
}

/* ── pagination ── */
#pagination {
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #444;
}
#pagination button {
  padding: 3px 10px;
  font-size: 0.8rem;
  background: #1a3a5c;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
#pagination button:disabled { background: #aaa; cursor: default; }
#pagination button:hover:not(:disabled) { background: #254e7a; }

/* ── footer ── */
#site-footer {
  padding: 10px 18px;
  font-size: 0.72rem;
  color: #888;
  border-top: 1px solid #ddd;
  background: #f4f6f8;
}

/* ── responsive: hide lower-priority columns on narrow screens ── */
@media (max-width: 900px) {
  .pri-3 { display: none; }
}
@media (max-width: 700px) {
  .pri-2 { display: none; }
}