/* AquaComply — Theme
   Aqua Solutions navy / teal / gold. Document-grade, light-mode only.
   Mobile-first. iOS safe areas. No decorative elements.
   Status colors mirror foundation-config.json dashboard_status_rules. */

:root {
  color-scheme: light;

  /* Brand */
  --navy: #1B3A5C;
  --navy-dark: #142D47;
  --teal: #2A9D8F;
  --gold: #C8952A;

  /* Legacy aliases — keep so older markup keeps working */
  --primary: #1B3A5C;
  --primary-dark: #142D47;

  /* Canvas + surfaces */
  --canvas: #EDF3F9;
  --canvas-deep: #E3EDF6;
  --bg: #EDF3F9;
  --surface: #FFFFFF;
  --surface-sunk: #F6F9FC;

  /* Rules */
  --border: #DBE5EE;
  --border-soft: #EAF0F6;
  --border-hard: #CFDCE8;

  /* Text */
  --text: #1A2A3A;
  --text-secondary: #5A7490;
  --text-muted: #8B98A5;

  /* Status — solid (rails, dots, fills) */
  --violation: #C0392B;
  --warning: #C8952A;
  --compliant: #2A9D8F;
  --na: #5A7490;

  /* Status — tinted badge pairs (bg / ink) */
  --violation-bg: #FDECEC;  --violation-ink: #8F2D22;
  --warning-bg:   #FDF3E0;  --warning-ink:   #8A6316;
  --compliant-bg: #E7F4F1;  --compliant-ink: #1C6C62;
  --na-bg:        #EEF1F4;  --na-ink:        #5A7490;

  /* Geometry — small radii read technical, not consumer */
  --radius: 6px;
  --radius-card: 10px;
  --radius-badge: 4px;
  --shadow: none;

  --nav-height: 58px;
  --header-height: 60px;

  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

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

html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  padding-top: calc(var(--header-height) + env(safe-area-inset-top));
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
}

/* Uppercase micro-label — the workhorse section header.
   Used by .section-title, form labels, and card eyebrows. */
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Any identifier — PWSID, sample ID, device serial, due offset. */
.mono { font-family: var(--mono); }

/* ── HEADER ───────────────────────────────────────────────────────────────── */

#app-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: calc(var(--header-height) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: var(--surface);
  color: var(--navy);
  border-bottom: 2px solid var(--navy);   /* JS overrides with system accent */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 16px; padding-right: 16px;
  z-index: 100;
}

.header-left { display: flex; flex-direction: column; justify-content: center; min-width: 0; }

.app-name {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

#sys-switcher {
  background: none; border: none;
  color: var(--navy);
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  border-radius: var(--radius);
  text-align: left;
  max-width: 74vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
#sys-switcher:active { opacity: 0.6; }
#sys-switcher::after {
  content: ' \25BE';
  color: var(--text-secondary);
  font-weight: 400;
}

/* ── BOTTOM NAV ───────────────────────────────────────────────────────────── */

#bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--canvas-deep);
  border-top: 1px solid var(--border-hard);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
}

.nav-item {
  display: flex; flex-direction: column; align-items: center;
  background: none; border: none;
  color: #7D90A4;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  padding: 4px 10px;
  gap: 3px;
  -webkit-tap-highlight-color: transparent;
}
.nav-item.active { color: var(--navy); }
.nav-icon { display: block; line-height: 0; }
.nav-icon svg { width: 21px; height: 21px; display: block; }

/* ── MAIN CONTENT ─────────────────────────────────────────────────────────── */

#app-content {
  padding: 14px 12px 24px;
  max-width: 600px;
  margin: 0 auto;
}