/* ==========================================================================
   Poolygraph — base stylesheet (LIGHT theme)
   Tokens derived from /docs/BRAND.md §4–§5–§7. Light, bright, vibrant,
   chart-forward. Soft shadows instead of dark borders. Mobile-first.
   ========================================================================== */

:root {
  /* --- Brand blues (Pooly's body / pool water) --- */
  --blue-50:  #EAF6FD;
  --blue-100: #CDEBFB;
  --blue-200: #9FD8F4;
  --blue-300: #6FC4EC;
  --blue-500: #1B9FE0;   /* brand */
  --blue-600: #1483C2;
  --blue-700: #0E6699;   /* AA-safe action color on white */
  --navy-ink: #122B45;   /* wordmark + sunglasses; primary text */

  /* --- Sunset warm accent (logo badge) --- */
  --sunset-500: #FF8A3D;
  --gold-400:   #FFC247;
  --coral-600:  #F4602E;

  /* --- Palm green + warm neutral --- */
  --palm-500: #36A85A;
  --palm-700: #2E7D46;
  --sand-200: #EAD7AC;

  /* --- Light base set --- */
  --bg:           #F5FBFF;  /* app background */
  --surface:      #FFFFFF;  /* cards */
  --surface-tint: #EAF6FD;  /* subtle surface */
  --text:         #122B45;
  --text-soft:    #48607A;
  --text-muted:   #7A8CA0;
  --hairline:     #E6EEF5;  /* light gridlines / dividers */
  --shadow:       0 6px 20px rgba(18, 43, 69, 0.08);
  --shadow-sm:    0 2px 8px rgba(18, 43, 69, 0.06);

  /* --- Semantic water-status (always paired with icon + label) --- */
  --status-good:    #1FA66A;
  --status-warning: #F5A623;
  --status-action:  #EE6A2D;
  --status-urgent:  #D92D20;

  /* --- Chart palette: the 7 tracked parameters --- */
  --chart-fc:   #1B9FE0;
  --chart-cc:   #E0498B;
  --chart-ph:   #F5A623;
  --chart-ta:   #7B61FF;
  --chart-ch:   #1FA66A;
  --chart-cya:  #EE6A2D;
  --chart-salt: #00B3B3;

  /* --- Typography --- */
  --font-ui: ui-rounded, "SF Pro Rounded", system-ui, -apple-system,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Shape / spacing (8pt rhythm) --- */
  --radius-card: 18px;
  --radius-btn: 12px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
}

/* --- Reset-ish base --- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* --- Type scale --- */
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 var(--space-3); font-weight: 700; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
small, .text-small { font-size: 0.875rem; }
.text-muted { color: var(--text-muted); }
.text-soft  { color: var(--text-soft); }

/* Numbers / readings: tabular figures so values + charts align. */
.num, .reading {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Layout --- */
.container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-4);
}

/* --- Card --- */
.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}
.card--tint { background: var(--surface-tint); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: inherit;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: transform .04s ease, filter .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blue-700); color: #fff; }
.btn--primary:hover { filter: brightness(1.06); }
.btn--warm { background: var(--sunset-500); color: #fff; }
.btn--ghost { background: transparent; color: var(--blue-700); box-shadow: inset 0 0 0 1.5px var(--blue-200); }
.btn--block { width: 100%; }

/* --- Inputs --- */
.input, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  padding: 12px 14px;
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-btn);
  outline: none;
}
.input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--blue-300);
  box-shadow: 0 0 0 3px var(--blue-50);
}
label { display: block; font-weight: 500; margin-bottom: var(--space-2); color: var(--text-soft); }
.field { margin-bottom: var(--space-4); }

/* --- Status chip (color + icon + label; never color alone) --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
}
.chip--good    { background: var(--status-good); }
.chip--warning { background: var(--status-warning); color: var(--navy-ink); }
.chip--action  { background: var(--status-action); }
.chip--urgent  { background: var(--status-urgent); }

/* --- Pooly (the guide, beside the data — never covering it) --- */
.pooly {
  display: block;
  max-width: 140px;
  height: auto;
}
.pooly--sm { max-width: 72px; }

/* --- Utilities --- */
.stack > * + * { margin-top: var(--space-4); }
.center { text-align: center; }
.hidden { display: none !important; }

/* --- Auth pages --- */
.auth-page { display: flex; min-height: 100vh; align-items: center; }
.auth-wrap { width: 100%; padding: var(--space-4); }
.auth-card { max-width: 420px; margin: 0 auto; }
.auth-card .pooly { margin: 0 auto var(--space-2); max-width: 120px; }

/* --- Inline form error --- */
.form-error {
  background: #FDECEA;
  color: #B42318;
  border-radius: var(--radius-btn);
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 500;
}

/* --- Inline form success --- */
.form-ok {
  background: #E8F7EF;
  color: #1F7A4D;
  border-radius: var(--radius-btn);
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 500;
}

/* --- Checkbox row --- */
.checkrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  color: var(--text-soft);
}
.checkrow input { width: auto; }

/* --- Option cards (radio choices) --- */
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.opt-card {
  display: flex; align-items: center; gap: 8px;
  border: 2px solid var(--hairline); border-radius: var(--radius-btn);
  padding: 12px; cursor: pointer; font-weight: 500;
}
.opt-card input { width: auto; }
.opt-card:has(input:checked) { border-color: var(--blue-500); background: var(--blue-50); }

/* --- Misc form bits --- */
.hint { color: var(--text-muted); font-size: 0.85rem; }
.unit-row { display: flex; gap: var(--space-2); }
.chem-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--hairline);
}
.chem-row .conc { width: 88px; }

/* --- Simple data table (user management) --- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.95rem;
}
.table th { color: var(--text-muted); font-weight: 600; }
.row-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }