/* PoolSense app shell — brand tokens from pool-sense.com.
   Dark brand chrome (header, login) over light work surfaces so checklists
   and reports stay readable in full sun. Aqua is the accent, never the
   text color on white. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* brand */
  --bg-deep: #03080d;
  --brand-navy: #061018;       /* website background — chrome only */
  --ink: #0a1a26;              /* headings / primary text on light */
  --navy: #102233;             /* primary buttons & surfaces */
  --aqua: #4ec5e8;
  --aqua-glow: #6ed9f5;
  --aqua-electric: #8fe8ff;
  --aqua-deep: #1a5d77;
  --aqua-pale: #d4ebf2;
  /* semantics (tuned for light surfaces) */
  --crit: #c0392b; --now: #c0392b;
  --warn: #b9770e;
  --ok: #1e8449;
  --muted: #5d6d7e;
  --line: #dfe8ec;
  --bg: #eef4f6;
  --font: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  background: var(--bg); color: var(--ink); min-height: 100dvh;
  padding-top: 54px;
}
body.has-tabs { padding-bottom: 66px; }

.appbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 54px;
  background: var(--brand-navy); color: #fff; display: flex; align-items: center;
  justify-content: space-between; padding: 0 14px;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid rgba(110, 217, 245, 0.22);
}
.appbar .brand { display: flex; align-items: center; gap: 9px;
  font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; }
.appbar .brand img { height: 34px; width: 34px; border-radius: 8px; display: block; }
.appbar .brand span { color: var(--aqua-glow); }
.appbar .ctx { font-size: 12px; color: #a4b6c2; text-align: right; line-height: 1.3; }
.appbar .ctx a { color: var(--aqua-glow); text-decoration: none; }

.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; height: 66px;
  background: #fff; border-top: 1px solid var(--line); display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs a {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; text-decoration: none;
  color: var(--muted); font-size: 11px; font-weight: 600;
}
.tabs a .ico { font-size: 20px; line-height: 1; }
.tabs a.active { color: var(--aqua-deep); }
.tabs a.active .ico { transform: scale(1.12); }

@media (min-width: 700px) {
  .tabs { top: 0; bottom: auto; left: auto; right: 16px; height: 54px;
          background: transparent; border: 0; width: auto; gap: 4px; }
  .tabs a { flex-direction: row; gap: 6px; color: #6e8290; padding: 0 12px;
            font-size: 13px; }
  .tabs a.active { color: #fff; border-bottom: 3px solid var(--aqua); }
  .tabs a .ico { font-size: 15px; }
  body.has-tabs { padding-bottom: 0; }
  .appbar .ctx { margin-right: 480px; }
}