:root {
  --brand-dark: #1B5E20;
  --brand: #2E7D32;
  --brand-light: #E8F5E9;
  --accent: #FFF9C4;
}
body {
  background-color: #F4F6F5;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.navbar-brand-app {
  font-weight: 700;
  color: #fff !important;
}
.bg-brand { background-color: var(--brand-dark) !important; }
.btn-brand {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-brand:hover { background-color: var(--brand-dark); border-color: var(--brand-dark); color:#fff; }
.card-kpi {
  border: none;
  border-left: 4px solid var(--brand);
  background: var(--brand-light);
  border-radius: 8px;
}
.card-kpi .kpi-label { font-size: 0.78rem; color: #607062; text-transform: uppercase; letter-spacing: .03em;}
.card-kpi .kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--brand-dark); }
table.table-app thead th {
  background-color: var(--brand);
  color: #fff;
  font-size: .82rem;
  vertical-align: middle;
}
table.table-app td { font-size: .88rem; vertical-align: middle; }
.badge-tercapai { background-color: #2E7D32; }
.badge-belum { background-color: #C62828; }
.row-target { background-color: var(--accent) !important; }
.sidebar-link.active { background-color: var(--brand-light); font-weight: 600; border-left: 3px solid var(--brand); }
.page-title { color: var(--brand-dark); font-weight: 700; }
footer.app-footer { color: #8a9a8c; font-size: .78rem; }