/* ============================================================
   JBG Holdings — Shared Design System
   Included by every portal page via:
     <link rel="stylesheet" href="/jbg.css">
   Do not copy these rules into individual pages.
   Last updated: 2026-06-08
   NOTE: field-team-movements.html has inline CSS (not this file) due to a
   pre-existing JS truncation in the local copy. Once the local copy is
   replaced with the full version from the live deploy, apply the CSS strip
   to it and remove the inline block.
   ============================================================ */

/* Fonts ---------------------------------------------------- */
@font-face { font-family: 'Lato'; src: url('lato-heavy.ttf') format('truetype'); font-weight: 800; }
@font-face { font-family: 'Lato'; src: url('lato-semibold.ttf') format('truetype'); font-weight: 600; }

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

/* Design tokens -------------------------------------------- */
:root {
  /* Brand */
  --jbg: #5a5a5a;  --jbg-dark: #3d3d3d;  --jbg-light: #f0f0f0;
  --jbg-border: rgba(90,90,90,0.18);

  /* Typography */
  --text: #1a1a1a;  --text-faint: #999;
  --sans: 'Lato', system-ui, sans-serif;

  /* Surfaces */
  --bg: #f4f4f4;  --card: #ffffff;  --input-bg: #fafafa;

  /* Shape */
  --radius: 6px;  --radius-sm: 4px;

  /* Status colours */
  --green: #16a34a;  --green-bg: #f0fdf4;  --green-border: #bbf7d0;
  --amber: #d97706;  --amber-bg: #fffbeb;  --amber-border: #fde68a;
  --red:   #dc2626;  --red-bg:   #fef2f2;  --red-border:   #fecaca;
  --blue:  #2563eb;  --blue-bg:  #eff6ff;  --blue-border:  #bfdbfe;
}

/* Base ----------------------------------------------------- */
body {
  font-family: 'Lato', system-ui, sans-serif;
  font-weight: 600;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header --------------------------------------------------- */
header {
  background: var(--card);
  border-bottom: 0.5px solid var(--jbg-border);
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
header img { height: 36px; }
.header-right { display: flex; align-items: center; gap: 1.5rem; }
.user-email { font-size: 12px; font-weight: 600; color: var(--text-faint); }
.header-link {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: none; border: none; color: var(--text-faint); text-decoration: none;
  cursor: pointer; transition: color 0.15s;
}
.header-link:hover { color: var(--jbg); }
.btn-signout {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: none; border: 0.5px solid var(--jbg-border);
  border-radius: 4px; color: var(--jbg); padding: 6px 14px;
  cursor: pointer; transition: background 0.15s;
}
.btn-signout:hover { background: var(--jbg-light); }

/* Footer --------------------------------------------------- */
footer {
  text-align: center; padding: 1.5rem;
  font-size: 11px; font-weight: 600;
  color: var(--text-faint);
  border-top: 0.5px solid var(--jbg-border);
}