/* ne-ui.css (902 — Galbula) — SHARED NEW ERA UI FOUNDATION, OPT-IN ONLY.
   =========================================================================
   What this is: a set of New-Era-branded component classes (buttons, tabs, cards, status
   pills, a table opt-in class, form controls, menus) built on the authoritative token set in
   brand.js (window.__neRemapStyles' NEC / the --ne-* custom properties brand.js injects).

   What this is NOT: this build does not rewrite any existing page's markup to adopt these
   classes. None of the class names below collide with anything already used across the New
   Era pages (checked against every ne-*.html and new-era.html in the tree), so linking this
   file changes nothing visually on its own -- it only makes a consistent, brand-correct
   foundation available for new work and incremental adoption, per the brief: "Do NOT
   manually redesign each page during this build."

   Everything here is scoped under a `.ne-ui` ancestor class OR uses an `ne-` prefixed class
   name, specifically so it can never accidentally match a bare `.card`, `.btn`, `.tab`,
   `.pill` etc. that an existing page already defines for its own (differently-tuned) purposes.

   Depends on brand.js having run first (for the --ne-* custom properties); falls back to the
   literal guideline hex values if it hasn't, so this file is safe to load standalone too. */

:root{
  --ne-forest: #324F30;
  --ne-deep-green: #20331F;
  --ne-sage: #8E9E8D;
  --ne-mist: #EAEDEA;
  --ne-purple: #421275;
  --ne-deep-purple: #2B0C4C;
  --ne-lilac: #AA94C1;
  --ne-haze: #F0ECF4;
  --ne-haze-deep: #E1D6EE;
  --ne-ink: #1F2420;
  --ne-slate: #5C6560;
  --ne-rule: #D8DED9;
  --ne-paper: #F7F9F7;
  --ne-white: #FFFFFF;
}

/* ---------- typography hierarchy (guidelines section 08, translated for software — section 4
   of the 902 brief: not an A4 brochure, so no display/cover-only sizes here) ---------- */
.ne-h1{font:600 20px/1.3 Montserrat,'Source Sans 3',sans-serif;color:var(--ne-forest);margin:0}
.ne-h2{font:600 16px/1.35 Montserrat,'Source Sans 3',sans-serif;color:var(--ne-forest);margin:0}
.ne-eyebrow{font:600 11px/1 Montserrat,sans-serif;letter-spacing:.08em;color:var(--ne-slate)}
.ne-eyebrow.upper{text-transform:uppercase}
.ne-body{font:400 14px/1.55 'Source Sans 3',sans-serif;color:var(--ne-ink)}
.ne-caption{font:400 12.5px/1.5 'Source Sans 3',sans-serif;color:var(--ne-slate)}

/* ---------- buttons (section 6) ---------- */
.ne-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font:600 13.5px/1 'Source Sans 3',sans-serif; border-radius:8px; padding:9px 16px;
  border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ne-btn:focus-visible{outline:2px solid var(--ne-forest); outline-offset:2px}
.ne-btn[disabled]{opacity:.5; cursor:not-allowed}

.ne-btn-primary{background:var(--ne-forest); color:var(--ne-white); border-color:var(--ne-forest)}
.ne-btn-primary:hover:not([disabled]){background:var(--ne-deep-green); border-color:var(--ne-deep-green)}

.ne-btn-secondary{background:var(--ne-paper); color:var(--ne-forest); border-color:var(--ne-rule)}
.ne-btn-secondary:hover:not([disabled]){border-color:var(--ne-forest); background:var(--ne-mist)}

/* Destructive keeps the existing danger red -- guideline rule 6: never make destructive green. */
.ne-btn-destructive{background:#fff; color:#8a3232; border-color:#e3c9c9}
.ne-btn-destructive:hover:not([disabled]){background:#fbeeee; border-color:#d99}

.ne-btn-ghost{
  background:transparent; color:inherit; border:1px solid rgba(255,255,255,.35);
  padding:5px 11px; font-size:12.5px; border-radius:7px;
}
.ne-btn-ghost:hover:not([disabled]){background:rgba(255,255,255,.14)}

/* ---------- tabs (section 7) ---------- */
.ne-tabs{display:flex; gap:2px; border-bottom:1px solid var(--ne-rule)}
.ne-tab{
  font:600 13.5px/1 'Source Sans 3',sans-serif; color:var(--ne-slate); background:none; border:none;
  padding:10px 14px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.ne-tab:hover{color:var(--ne-forest)}
.ne-tab[aria-selected="true"], .ne-tab.on{color:var(--ne-forest); border-bottom-color:var(--ne-forest)}

/* ---------- cards / panels (section 8) ---------- */
.ne-card{
  background:var(--ne-white); border:1px solid var(--ne-rule); border-radius:12px; padding:16px;
}
.ne-card + .ne-card{margin-top:16px}

/* ---------- status pills (section 9) — SHAPE/TYPE ONLY. This build introduces no new status
   meanings; a page choosing to adopt these must keep mapping its own existing statuses. ---------- */
.ne-pill{
  display:inline-flex; align-items:center; gap:5px; font:600 11.5px/1 'Source Sans 3',sans-serif;
  padding:4px 10px; border-radius:999px; letter-spacing:.01em; white-space:nowrap;
}
.ne-pill-good{background:var(--ne-mist); color:var(--ne-forest)}          /* paid / approved */
.ne-pill-neutral{background:var(--ne-haze); color:var(--ne-deep-purple)}   /* customer / supplier / info */
.ne-pill-warn{background:#faf3dd; color:#8a6d1a}                          /* part-paid / pending */
.ne-pill-bad{background:#fbeeee; color:#8a3232}                           /* awaiting / not approved */

/* ---------- tables (section 10) — an OPT-IN wrapper class only; does not touch any existing
   table selector, columns, sorting or row-click behaviour. ---------- */
.ne-table{width:100%; border-collapse:collapse; font:14px/1.4 'Source Sans 3',sans-serif}
.ne-table th{
  background:var(--ne-forest); color:var(--ne-white); font:600 12px/1 Montserrat,sans-serif;
  text-align:left; padding:9px 12px; letter-spacing:.02em;
}
.ne-table td{padding:9px 12px; border-bottom:1px solid var(--ne-rule); color:var(--ne-ink)}
.ne-table tbody tr:hover{background:var(--ne-paper)}

/* ---------- forms (section 11) ---------- */
.ne-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.ne-label{font:600 12.5px/1 'Source Sans 3',sans-serif; color:var(--ne-ink)}
.ne-input, .ne-select, .ne-textarea{
  font:14px/1.4 'Source Sans 3',sans-serif; color:var(--ne-ink); background:var(--ne-white);
  border:1px solid var(--ne-rule); border-radius:8px; padding:9px 11px;
}
.ne-input:focus, .ne-select:focus, .ne-textarea:focus{
  outline:none; border-color:var(--ne-forest); box-shadow:0 0 0 3px rgba(50,79,48,.15);
}
.ne-input[disabled], .ne-select[disabled], .ne-textarea[disabled]{background:var(--ne-mist); color:var(--ne-slate)}
.ne-field.invalid .ne-input, .ne-field.invalid .ne-select, .ne-field.invalid .ne-textarea{
  border-color:#a83232; box-shadow:0 0 0 3px rgba(168,50,50,.12);
}
.ne-field-error{font:400 12px/1.4 'Source Sans 3',sans-serif; color:#a83232}

/* ---------- menus / dropdowns (section 12) ---------- */
.ne-menu{
  background:var(--ne-white); border:1px solid var(--ne-rule); border-radius:10px;
  box-shadow:0 6px 20px -8px rgba(31,36,32,.25); padding:6px; min-width:160px;
}
.ne-menu-item{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font:14px/1.3 'Source Sans 3',sans-serif; color:var(--ne-ink); padding:8px 10px; border-radius:7px;
}
.ne-menu-item:hover{background:var(--ne-mist)}