/* ============================================================
   app-compat.css — legacy class API → canonical eComma tokens.
   Loaded AFTER eComma.css + finance.css so these win where they overlap.
   The Phase-0 templates (login / dashboard / admin / fx / ingest) were written
   against an ad-hoc green base.html using .card/.field/.btn/.banner.err|.ok/
   .stat(.k/.v)/.muted/ul.tight/.center. This layer re-skins those classes to the
   eComma palette (navy/sky + Space Grotesk/Inter/JetBrains Mono) WITHOUT touching
   each template — so the migration is a single foundation change, not a rewrite.
   ALL colors via eComma CSS variables (no new palette).
   ============================================================ */

/* ---- content container for legacy {% block content %} screens ---- */
main.wrap{max-width:1100px}

/* ---- generic content card (section container; NOT the eComma KPI card) ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; margin:16px 0; box-shadow:0 1px 0 rgba(0,0,0,.02)}
.card h2{margin:0 0 6px; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:16px; color:var(--ink)}
.card h2::before{display:none}            /* neutralize eComma's global h2 accent bar inside cards */
.card h3{margin:14px 0 8px; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:14px; color:var(--ink)}

/* ---- login / narrow centered card ---- */
.center{max-width:420px; margin:8vh auto 0}

/* ---- form fields (login + admin forms) ---- */
.field{margin:14px 0}
.field label{display:block; font-weight:600; font-size:13px; margin-bottom:6px; color:var(--ink)}
.field input,.field select,.field textarea{width:100%; padding:11px 13px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--card); color:var(--ink); font:inherit; font-size:14px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}

/* ---- buttons: bare .btn = primary (filled accent), .ghost = outline (legacy intent) ---- */
.btn{display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:600; font-size:14px;
  border-radius:var(--radius); padding:11px 18px; border:1px solid var(--accent);
  background:var(--accent); color:var(--on-accent); cursor:pointer; text-decoration:none}
.btn:hover{filter:brightness(1.06); color:var(--on-accent); text-decoration:none}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring)}
.btn.ghost{background:transparent; color:var(--accent)}
.btn.ghost:hover{background:color-mix(in srgb,var(--accent) 8%,transparent); filter:none}

/* ---- flash banners: .err (red) / .ok (green) override finance.css's amber .banner ---- */
.banner{display:flex; gap:12px; align-items:flex-start; border-radius:var(--radius); padding:12px 16px; margin:12px 0; font-size:14px}
.banner.err{background:color-mix(in srgb,var(--neg) 10%,var(--card)); border:1px solid color-mix(in srgb,var(--neg) 30%,var(--line)); border-left:3px solid var(--neg); color:var(--neg)}
.banner.ok{background:color-mix(in srgb,var(--pos) 10%,var(--card)); border:1px solid color-mix(in srgb,var(--pos) 30%,var(--line)); border-left:3px solid var(--pos); color:var(--pos)}

/* ---- stat cards (dashboard grid of standalone cards; eComma .stats .stat bar style untouched) ---- */
.grid .stat,.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; flex:initial; border-right:1px solid var(--line)}
.stat .k{font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)}
.stat .v{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:24px; line-height:1.1; margin-top:4px; color:var(--ink)}

/* ---- misc legacy helpers ---- */
.muted{color:var(--ink-faint); font-style:normal; font-size:13px}
ul.tight{margin:8px 0; padding-left:18px}
ul.tight li{margin:4px 0}