/* datamon styles (in the image of viewmon) */

* { box-sizing: border-box; }

/* the `hidden` attribute must always win over display rules below */
[hidden] { display: none !important; }

/* no rubber-band bounce / scroll chaining anywhere */
html, body { overscroll-behavior: none; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #14171a;
  color: #e6e6e6;
}

.muted { color: #9aa3ad; }

/* header */

header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: #1d2126;
  border-bottom: 1px solid #2c3138;
}

.spacer { flex: 1; }

.page-title { color: #9aa3ad; font-size: 0.95rem; }

.header-link {
  color: #9aa3ad;
  text-decoration: none;
  font-size: 0.9rem;
}
.header-link:hover { color: #fff; }

.logout-form button {
  background: transparent;
  border: 1px solid #3a4149;
  color: #9aa3ad;
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}
.logout-form button:hover { color: #fff; border-color: #5a636e; }

/* range selector chips */

.chip {
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid #3a4149;
  background: transparent;
  color: #9aa3ad;
  cursor: pointer;
}
.chip.on { background: #2f6fed; border-color: #2f6fed; color: #fff; }

/* hub page */

main#hub { padding: 1rem; max-width: 1100px; margin: 0 auto; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.8rem;
}

.card {
  background: #1d2126;
  border: 1px solid #2c3138;
  border-radius: 12px;
  padding: 1rem 1.2rem;
}

.source-card {
  text-decoration: none;
  color: inherit;
  display: block;
}
.source-card:hover { border-color: #5a636e; }

.source-name { font-size: 0.95rem; color: #9aa3ad; }

.source-value {
  font-size: 2rem;
  font-weight: 600;
  margin: 0.4rem 0 0.2rem;
}

.source-age { font-size: 0.82rem; }

/* source detail page */

main#source { padding: 1rem; max-width: 1100px; margin: 0 auto; }

#range-buttons { display: flex; gap: 0.5rem; margin-bottom: 1rem; }

#chart { width: 100%; margin-bottom: 1rem; }

#no-data { text-align: center; padding: 2rem; }

#samples {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

#samples th, #samples td {
  text-align: left;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid #2c3138;
}

#samples th {
  color: #9aa3ad;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
}

/* table pagination */

#pager {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

#pager .spacer { flex: 1; }

.pager-btn {
  background: transparent;
  border: 1px solid #3a4149;
  color: #9aa3ad;
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}
.pager-btn:hover:not(:disabled) { color: #fff; border-color: #5a636e; }
.pager-btn:disabled { opacity: 0.4; cursor: default; }

#page-label { font-size: 0.85rem; }

.pager-size {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #9aa3ad;
  font-size: 0.85rem;
}

.pager-size select {
  background: #14171a;
  color: #e6e6e6;
  border: 1px solid #3a4149;
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
}

/* settings page */

main#settings { padding: 1rem; max-width: 720px; margin: 0 auto; }

main#settings h2 {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  color: #9aa3ad;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#unit-prefs { display: flex; flex-direction: column; gap: 0.8rem; }

.unit-pref {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.95rem;
}

.unit-pref select {
  background: #14171a;
  color: #e6e6e6;
  border: 1px solid #3a4149;
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
}

.note { font-size: 0.85rem; margin: 0.8rem 0 0; }

/* system page */

main#system { padding: 1rem; max-width: 720px; margin: 0 auto; }

main#system h2 {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  color: #9aa3ad;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#system-content { display: flex; flex-direction: column; gap: 0.8rem; }

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.95rem;
  padding: 0.15rem 0;
}

.stat-row span:first-child { color: #9aa3ad; }

.danger {
  margin-top: 0.8rem;
  background: transparent;
  border: 1px solid #7a3038;
  color: #f0a3ab;
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}
.danger:hover:not(:disabled) { color: #fff; border-color: #a8454f; }
.danger:disabled { opacity: 0.4; cursor: default; }

/* login */

.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: #1d2126;
  border: 1px solid #2c3138;
  border-radius: 12px;
  padding: 2rem 2.4rem;
  width: min(360px, 92vw);
}

.login-card h1 { margin-top: 0; text-align: center; }

.login-card form { display: flex; flex-direction: column; gap: 1rem; }

.login-card label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }

.login-card input {
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  border: 1px solid #3a4149;
  background: #14171a;
  color: #e6e6e6;
}

.login-card button {
  padding: 0.6rem;
  border: none;
  border-radius: 6px;
  background: #2f6fed;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.login-card .error {
  background: #4a1f24;
  border: 1px solid #7a3038;
  color: #f0a3ab;
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  font-size: 0.88rem;
}