/* WellLife brand theme — customer-confirmed BPG design from the approved POC.
   Loaded LAST so it overrides the dark-first command shell (admin_shell.css / menu.css),
   which hardcodes dark rgba() backgrounds. Light surface + white cards + BPG navy sidebar
   + purple accents = the WellLife look. CSP-clean: external stylesheet, no CDN.
   (Montserrat to be self-hosted later; system fallback for now.) */

:root {
  /* Surfaces */
  --bg: #F6F6F6;
  --card: #FFFFFF;
  --text: #23283D;            /* BPG navy */
  --muted: #64748B;
  --border: #E2E8F0;

  /* Brand purple */
  --primary: #8100B6;
  --primary-hover: #6A0096;

  --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
  --font: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;

  /* Accents → purple (override blue focus/active) */
  --focus: rgba(129, 0, 182, 0.45);
  --btn-border: #E2E8F0;
  --nav-item-bg: rgba(255, 255, 255, 0.04);
  --nav-item-bg-hover: rgba(255, 255, 255, 0.08);
  --nav-item-bg-active: rgba(129, 0, 182, 0.22);
  --nav-item-border: rgba(255, 255, 255, 0.08);
  --nav-item-border-active: rgba(202, 27, 132, 0.6);
}

/* ----- Topbar: light ----- */
.topbar { background: #FFFFFF; backdrop-filter: none; }
.brand-title { color: var(--text); }

/* ----- Sidebar: BPG navy with light text (matches the POC) ----- */
.sidebar { background: #23283D; backdrop-filter: none; }
.sidebar-title { color: #94A3B8; }
.nav-group-btn,
.nav-item,
.sidebar a { color: #E2E8F0; }

/* ----- Content surfaces: white cards on light bg ----- */
.main { background: var(--bg); }
.card { background: #FFFFFF; }
.card-title { color: var(--text); }

/* ----- Tables ----- */
.table th { background: #F8FAFC; color: var(--muted); }
.table td { color: var(--text); }

/* ----- Buttons: light default, purple primary ----- */
.btn { background: #FFFFFF; border-color: var(--border); color: var(--text); }
.btn:hover { background: #F1F5F9; color: var(--text); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #FFFFFF; }

/* ----- Inputs: light (overrides the shell/login dark input backgrounds).
   Attribute selectors match login.css specificity; loaded later so they win. ----- */
input, select, textarea,
input[type="text"], input[type="password"], input[type="email"],
input[type="date"], input[type="number"], input[type="search"], input[type="tel"] {
  background: #FFFFFF; color: var(--text); border-color: var(--border);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ----- Auth pages (login / password reset / entry) on the BPG light surface ----- */
html, body { background: var(--bg); color: var(--text); }
.title { color: var(--text); }

/* Non-production environment indicator on the sign-in card (Paul, 2026-06-09) */
.env-badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #92400E; background: #FEF3C7;
  border: 1px solid #F59E0B; border-radius: 9999px;
}
.env-badge-block { margin-top: 10px; }