/* ---------------------------------------------------------------------------------
1. css/base.css
--------------------------------------------------------------------------------- */

:root{
  /* ActionSA brand-aligned colours */
  --brand-primary: #05B615;   /* ActionSA Green (Malachite) */
  --brand-secondary: #7BDCB5; /* Lighter ActionSA Green */

  --bg: #0b1a10;              /* Dark green-black (dashboard background) */
  --panel: #0f2617;           /* Panel surfaces */
  --card: #12301d;            /* Cards */

  --text: #e8f5ec;            /* High-contrast text */
  --muted: #9fcfb3;           /* Muted labels */

  --ok: #05B615;
  --warn: #f59e0b;            /* Neutral warning – NOT political */
  --bad: #ef4444;             /* Neutral error */

  --line: rgba(123,220,181,.28);
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  --r: 18px;
  --r2: 24px;
  --max: 1200px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(900px 600px at 20% -10%, rgba(34,197,94,.25), transparent 60%),
    radial-gradient(700px 500px at 110% 20%, rgba(59,130,246,.18), transparent 60%),
    var(--bg);
  color:var(--text);
}

a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:22px}
.grid{display:grid;gap:16px}
.row{display:flex;gap:12px;align-items:center}
.space{justify-content:space-between}
.muted{color:var(--muted)}
hr{border:none;border-top:1px solid var(--line);margin:16px 0}
.hidden{display:none !important}

/* CRITICAL: allow native selects to escape dashboard layout */
.layout {
  overflow: visible;
}