/* Visual language of the Africa BSM landing page mockup (Oct 2026). */
:root{--g:#00704a;--g2:#8ed28b;--red:#e2231a;--ink:#1f2a26;--mut:#6b7772;--bg:#f1f4f2;--card:#fff;--line:#dfe5e2;
--ok:#1e9e5a;--okb:#dff3e7;--warn:#e8a100;--warnb:#fff0c7;--bad:#d6382f;--badb:#fbdcd9}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 "Segoe UI",system-ui,Arial,sans-serif}
a{color:var(--g)}
header{background:#fff;border-bottom:1px solid var(--line);padding:14px 28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.logo{background:var(--red);color:#fff;font-weight:800;font-style:italic;letter-spacing:1px;padding:6px 16px;transform:skewX(-10deg)}
.logo span{display:inline-block;transform:skewX(10deg)}
h1{margin:0;font-size:20px;letter-spacing:.3px}
.sub{color:var(--mut);font-size:12px}
.spacer{flex:1}
nav{background:var(--g);padding:0 28px;display:flex;gap:4px;flex-wrap:wrap;align-items:center}
nav a,nav button{color:#dff3e7;text-decoration:none;padding:9px 14px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;background:none;border:0;font-family:inherit;cursor:pointer}
nav a.on{background:#fff;color:var(--g)}
nav a:hover:not(.on),nav button:hover{background:#0a5c3e}
nav form{margin:0}
.filters{padding:14px 28px;background:#fff;border-bottom:1px solid var(--line);display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.filters label,.field label{font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;display:block;margin-bottom:3px}
.pill{border:1px solid var(--line);border-radius:4px;padding:5px 10px;background:#f8faf9;font-size:13px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:16px;padding:4px 12px;font-size:12px;cursor:pointer;user-select:none}
.chip.on{background:var(--g);color:#fff;border-color:var(--g)}
main{padding:18px 28px 40px;max-width:1500px;margin:auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.card h2{margin:0 0 2px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:#39453f}
.hint{font-size:11.5px;color:var(--mut);margin-bottom:10px}
.sec{margin:22px 0 10px;font-size:12px;font-weight:800;color:var(--g);text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:10px}
.sec:after{content:"";flex:1;height:1px;background:var(--line)}
.insights{background:#fff;border:1px solid var(--line);border-left:4px solid var(--g);border-radius:8px;padding:12px 18px;margin-bottom:16px}
.insights b{color:var(--g)}
.insights ul{margin:6px 0 0;padding-left:18px}
.insights li{margin:2px 0}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{position:relative;padding:14px 16px 12px;border-top:4px solid var(--line)}
.kpi.ok{border-top-color:var(--ok)}.kpi.warn{border-top-color:var(--warn)}.kpi.bad{border-top-color:var(--bad)}
.kpi .n{font-size:11.5px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}
.kpi .v{font-size:30px;font-weight:700;margin:2px 0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.kpi .v small{font-size:12px;font-weight:600;color:var(--mut)}
.kpi .row{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--mut)}
.d{font-weight:700}.d.good{color:var(--ok)}.d.badc{color:var(--bad)}
.rag{position:absolute;top:12px;right:14px;width:10px;height:10px;border-radius:50%}
.ok .rag{background:var(--ok)}.warn .rag{background:var(--warn)}.bad .rag{background:var(--bad)}
.kpi svg{width:100%;height:32px;margin-top:6px;display:block}
.grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th{font-size:11px;text-transform:uppercase;color:var(--mut);text-align:right;padding:6px 8px;border-bottom:2px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
td{padding:6px 8px;text-align:right;border-bottom:1px solid #eef2f0}
table.plain th,table.plain td{text-align:left}
tr.lg{cursor:pointer}tr.lg:hover td{background:#f6faf8}
tr.dim td{opacity:.35}
td.ok{background:var(--okb);color:#135e35;font-weight:600}
td.warn{background:var(--warnb);color:#7a5b00;font-weight:600}
td.bad{background:var(--badb);color:#8f1f18;font-weight:600}
td.nr{color:#b5beb9}
tfoot td{font-weight:700;border-top:2px solid var(--line)}
.rc{display:grid;grid-template-columns:1fr 70px;gap:4px 8px;font-size:12px;align-items:center}
.rb{display:flex;align-items:center;gap:6px;min-width:0}
.rb span.l{width:120px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb .bar{height:14px;border-radius:3px;background:var(--g)}
.rn{text-align:right;color:var(--mut)}
.st{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600;background:#e9efec}
.st.r{background:var(--badb);color:#8f1f18}.st.a{background:var(--warnb);color:#7a5b00}.st.g{background:var(--okb);color:#135e35}
.dq{display:flex;flex-direction:column;gap:8px}
.dq div{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:6px 10px;border-radius:5px;background:#f8faf9;border:1px solid var(--line)}
.dq b{color:var(--bad);text-align:right}
.dq b.okc{color:var(--ok)}
.kc{cursor:pointer;position:relative;border-top:5px solid var(--line)}
.kc:hover{box-shadow:0 2px 10px rgba(0,0,0,.08)}
.kc.sel{outline:2px solid var(--g)}
.kc .rk{position:absolute;top:10px;right:14px;font-size:30px;font-weight:800;color:#dfe5e2}
.kc.r1 .rk{color:#e8a100}
.kc .nm{font-size:15px;font-weight:700}.kc .cs{font-size:11.5px;color:var(--mut);min-height:30px}
.kc .sc{font-size:30px;font-weight:700;margin:6px 0 2px;display:flex;align-items:baseline;gap:8px}
.kc .sc small{font-size:12px;color:var(--mut);font-weight:600}
.sbar{height:8px;background:#e9efec;border-radius:4px;overflow:hidden;margin-bottom:8px}.sbar i{display:block;height:100%}
.kk{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
.kk div{border-radius:5px;padding:4px 8px;font-size:11px}
.kk b{display:block;font-size:14px}
.kg{background:var(--okb);color:#135e35}.ka{background:var(--warnb);color:#7a5b00}.kr{background:var(--badb);color:#8f1f18}.kn{background:#eef1ef;color:#6b7772}
.kc .tx{font-size:11.5px;margin-top:6px}.kc .tx b{font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.mv{font-size:12px;font-weight:700}.mv.up{color:var(--ok)}.mv.dn{color:var(--bad)}.mv.fl{color:var(--mut)}
.cbadge{display:inline-block;white-space:nowrap;padding:1px 8px;border-radius:10px;background:#e9efec;font-size:11px;font-weight:600}
.alert{margin:6px 0;padding:6px 10px;border-left:4px solid var(--ok);background:#f8faf9;font-size:12.5px}
.alert.red{border-left-color:var(--bad)}.alert.amber{border-left-color:var(--warn)}
.empty{padding:28px;text-align:center;color:var(--mut)}
footer{color:var(--mut);font-size:11.5px;margin-top:22px}

/* forms and admin pages */
.narrow{max-width:420px;margin:60px auto}
.field{margin-bottom:12px}
input[type=text],input[type=password],input[type=month],input[type=file],select{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:4px;font:inherit;background:#fff}
select.inline{width:auto}
.btn{background:var(--g);color:#fff;border:0;border-radius:4px;padding:8px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
.btn.ghost{background:#fff;color:var(--g);border:1px solid var(--g)}
.btn.danger{background:#fff;color:var(--bad);border:1px solid var(--bad)}
.btn.small{padding:3px 10px;font-size:12px}
.msg{padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:13px}
.msg.err{background:var(--badb);color:#8f1f18}
.msg.okm{background:var(--okb);color:#135e35}
.msg.wn{background:var(--warnb);color:#7a5b00}
.msg ul{margin:4px 0 0;padding-left:18px}
.inline-form{display:inline}
code.secret{font-size:15px;background:#f8faf9;border:1px solid var(--line);padding:2px 8px;border-radius:4px;user-select:all}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

@media(max-width:1100px){.grid4{grid-template-columns:repeat(2,1fr)}.kpis{grid-template-columns:repeat(2,1fr)}.grid2,.grid3{grid-template-columns:1fr}}
@media(max-width:640px){header,nav,.filters{padding-left:16px;padding-right:16px}main{padding:14px 16px 32px}.grid4,.kpis{grid-template-columns:1fr}}