/* =========================
   PPID PREMIUM EMERALD THEME (GLOSSY GREEN)
   Cara pakai:
   1) simpan sebagai: assets/front/css/style_ppid_green.css
   2) load SETELAH style_ppid.css
   3) bungkus halaman dengan <div class="ppid-theme-green"> ... </div>
   ========================= */

.ppid-theme-green {
	/* palette */
	--ppid-sky-1: #047857; /* emerald deep */
	--ppid-sky-2: #22c55e; /* green bright */
	--ppid-sky-3: #a7f3d0; /* mint highlight */

	--ppid-ink: #0b1220;
	--ppid-muted: #64748b;

	--ppid-card: rgba(255, 255, 255, 0.78);
	--ppid-stroke: rgba(255, 255, 255, 0.28);

	--ppid-shadow: 0 22px 60px rgba(2, 14, 40, 0.18);
	--ppid-shadow-soft: 0 14px 35px rgba(2, 14, 40, 0.14);

	--ppid-radius-xl: 22px;
	--ppid-radius-lg: 18px;
}

/* HERO gradient (override biru -> hijau) */
.ppid-theme-green .ppid-hero {
	background:
		radial-gradient(
			900px 420px at 15% 20%,
			rgba(255, 255, 255, 0.28),
			transparent 65%
		),
		radial-gradient(
			700px 360px at 75% 35%,
			rgba(255, 255, 255, 0.22),
			transparent 70%
		),
		linear-gradient(
			135deg,
			rgba(4, 120, 87, 0.92),
			rgba(34, 197, 94, 0.78) 55%,
			rgba(167, 243, 208, 0.55)
		);
}

/* BUTTON */
.ppid-theme-green .ppid-btn {
	background: linear-gradient(135deg, var(--ppid-sky-1), var(--ppid-sky-2));
	box-shadow: 0 16px 30px rgba(4, 120, 87, 0.22);
}
.ppid-theme-green .ppid-btn:hover {
	box-shadow: 0 20px 40px rgba(4, 120, 87, 0.26);
}

/* REKAP metric box */
.ppid-theme-green .ppid-metric {
	background: linear-gradient(
		180deg,
		rgba(34, 197, 94, 0.82),
		rgba(167, 243, 208, 0.89)
	);
	border: 1px solid rgba(255, 255, 255, 0.95);
}

/* TABLE THEAD */
.ppid-theme-green .ppid-table thead tr {
	background:
		radial-gradient(
			700px 220px at 20% 0%,
			rgba(255, 255, 255, 0.26),
			transparent 70%
		),
		linear-gradient(135deg, rgba(4, 120, 87, 0.96), rgba(34, 197, 94, 0.82));
}

/* TABLE hover */
.ppid-theme-green .ppid-table tbody tr:hover td {
	background: rgba(34, 197, 94, 0.08);
}

/* ROW LEVEL */
.ppid-theme-green .ppid-row-opd td {
	background: rgba(34, 197, 94, 0.22);
}
.ppid-theme-green .ppid-row-program td {
	background: rgba(167, 243, 208, 0.3);
}
.ppid-theme-green .ppid-row-kegiatan td {
	background: rgba(209, 250, 229, 0.55);
}

/* TFOOT gradients */
.ppid-theme-green .ppid-table tfoot tr.ppid-foot-opd {
	background:
		radial-gradient(
			700px 220px at 20% 0%,
			rgba(255, 255, 255, 0.18),
			transparent 70%
		),
		linear-gradient(135deg, rgba(4, 120, 87, 0.92), rgba(34, 197, 94, 0.65));
}
.ppid-theme-green .ppid-table tfoot tr.ppid-foot-peg {
	background:
		radial-gradient(
			700px 220px at 20% 0%,
			rgba(255, 255, 255, 0.16),
			transparent 70%
		),
		linear-gradient(135deg, rgba(5, 150, 105, 0.92), rgba(167, 243, 208, 0.72));
}
.ppid-theme-green .ppid-table tfoot tr.ppid-foot-grand {
	background:
		radial-gradient(
			900px 260px at 20% 0%,
			rgba(255, 255, 255, 0.22),
			transparent 70%
		),
		linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(4, 120, 87, 0.92));
}