/* ═══════════════════════════════════════════════════════════
   RD37 — shared brand system
   Palette, the unified header, and the RD37 maunga logo.
   Included by all three apps (Planner / Herd / Fieldwork) so the
   chrome is consistent. Apps keep their own internal styles but
   pull these brand tokens.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Brand palette */
  --rd-header:   #1a3d2b;   /* dark green — header bar */
  --rd-brand:    #2d6a4f;   /* mid green — primary actions */
  --rd-brand-2:  #235741;   /* darker hover */
  --rd-accent:   #97C459;   /* lime — accents, active underline, badge */
  --rd-light:    #e8f5ee;   /* pale green — active backgrounds */
  /* Status */
  --rd-amber:    #d97706;
  --rd-red:      #dc2626;
  --rd-blue:     #1d6fa4;
  /* Fonts */
  --rd-font-head: 'DM Sans', system-ui, sans-serif;
  --rd-font-body: system-ui, -apple-system, sans-serif;
  --rd-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Shared header bar ── */
.rd-header {
  display: flex; align-items: center; gap: 16px;
  background: var(--rd-header); color: #fff;
  /* Pad the top by the iPhone notch/status-bar inset (0 elsewhere) so the
     header clears the notch when installed as a standalone PWA. */
  box-sizing: content-box;
  padding: env(safe-area-inset-top, 0) 18px 0; height: 56px; flex-shrink: 0;
  font-family: var(--rd-font-body);
}
.rd-header-brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.rd-header-badge { width: 34px; height: 34px; flex-shrink: 0; display: block; }
.rd-header-titles { display: flex; flex-direction: column; line-height: 1.15; }
.rd-header-app   { font-family: var(--rd-font-head); font-size: 16px; font-weight: 600; color: #fff; letter-spacing: .01em; }
.rd-header-farm  { font-size: 11px; color: var(--rd-accent); font-weight: 500; }

.rd-header-spacer { flex: 1; }

/* Right-side cluster: app actions + switcher + user chip */
.rd-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.rd-header-actions { display: flex; align-items: center; gap: 6px; }

/* Header action buttons (Export, Import, Log covers, Load registry, etc.) */
.rd-hbtn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.12); color: #fff; border: none;
  font-family: var(--rd-font-body); font-size: 12.5px; font-weight: 500;
  padding: 7px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.rd-hbtn:hover { background: rgba(255,255,255,.22); }
.rd-hbtn-primary { background: var(--rd-accent); color: #173404; font-weight: 600; }
.rd-hbtn-primary:hover { background: #a9d06f; }

/* A subtle divider between action groups in the header */
.rd-header-div { width: 1px; height: 22px; background: rgba(255,255,255,.18); }

/* Make the farm switcher + user chip sit correctly on the dark header
   (these reuse classes from farm-switcher.css / rd37-auth.css) */
.rd-header .fs-btn { background: rgba(255,255,255,.12); }
.rd-header .fs-btn:hover { background: rgba(255,255,255,.22); }

@media (max-width: 720px) {
  .rd-header { gap: 10px; padding: 0 12px; }
  .rd-header-farm { display: none; }
  .rd-hbtn span.lbl { display: none; }   /* icon-only buttons on narrow screens */
}