/* ============================================================
   SERA App — Base styles (complements W3.CSS)
   Brand colors sampled from the official SERA logo & assets.
   Mobile-first, Capacitor-safe (safe-area insets), responsive.
   ============================================================ */

:root {
  /* --- Official SERA palette --- */
  --sera-green:      #006200;  /* primary — SERA wordmark green */
  --sera-green-dark: #004d00;  /* hover/active, darker shade     */
  --sera-teal:       #007443;  /* deep teal-green brand panel    */
  --sera-lime:       #8AC666;  /* lime gradient accent           */
  --sera-lime-soft:  #cfe8bd;  /* soft lime tint                 */

  /* --- Neutrals --- */
  --sera-bg:    #f4f7f4;
  --sera-text:  #1a1a1a;
  --sera-muted: #5f6b60;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--sera-bg);
  color: var(--sera-text);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Respect mobile notch / status bar inside Capacitor webview.
   Works with <meta viewport ... viewport-fit=cover>. */
.sera-safe-top    { padding-top: env(safe-area-inset-top, 0); }
.sera-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

/* Brand header — deep teal-green gradient from the SERA assets */
.sera-header {
  background: linear-gradient(90deg, var(--sera-green) 0%, var(--sera-teal) 100%);
  color: #fff;
}

.sera-brand {
  font-weight: bold;
  letter-spacing: .5px;
}

/* Logo sizing */
.sera-logo-header { height: 38px; width: auto; display: block; }
.sera-logo-auth   { max-width: 240px; width: 70%; height: auto; }

/* Brand button (replaces ad-hoc w3 colors for primary actions) */
.sera-btn {
  background: var(--sera-green) !important;
  color: #fff !important;
}
.sera-btn:hover { background: var(--sera-green-dark) !important; }
.sera-text-green { color: var(--sera-green) !important; }
.sera-bg-green   { background: var(--sera-green) !important; color:#fff !important; }
.sera-bg-teal    { background: var(--sera-teal)  !important; color:#fff !important; }

/* Finger-friendly tap targets (>=44px) for mobile */
.sera-tap,
.w3-button,
button,
input,
select {
  min-height: 44px;
}

/* Centered auth card */
.sera-auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.sera-auth-card {
  width: 100%;
  max-width: 420px;
}

/* Avoid hover-only affordances; provide active state for touch */
.w3-button:active { opacity: .85; }

/* Utility */
.sera-fullwidth { width: 100%; }
.sera-muted { color: var(--sera-muted); }