/* =========================================================
   Tema Sekolah Islami - Hijau & Emas
   Dipakai bersama oleh form publik dan panel admin.
========================================================= */

:root {
	--brand-green-900: #0b3d2e;
	--brand-green-800: #0f4d38;
	--brand-green-700: #146c43;
	--brand-green-600: #178a58;
	--brand-green-500: #1fa870;
	--brand-green-100: #e3f3ea;
	--brand-green-50: #f2f9f5;

	--brand-gold-700: #a8791a;
	--brand-gold-600: #c9a227;
	--brand-gold-500: #d4af37;
	--brand-gold-100: #faf1d6;

	--brand-cream: #faf7f0;
	--brand-cream-dark: #f1ead9;

	--brand-ink: #1f2a24;
	--brand-muted: #5c6b62;

	--radius-lg: 16px;
	--radius-md: 12px;
	--shadow-soft: 0 4px 18px rgba(11, 61, 46, 0.08);
	--shadow-card: 0 2px 10px rgba(11, 61, 46, 0.06);
}

body {
	background-color: var(--brand-cream);
	color: var(--brand-ink);
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6, .card-title, .navbar-brand {
	font-family: 'Poppins', 'Plus Jakarta Sans', sans-serif;
	font-weight: 600;
	color: var(--brand-green-900);
}

/* ---------------- Decorative top ribbon ---------------- */
.brand-ribbon {
	height: 6px;
	background: repeating-linear-gradient(
		135deg,
		var(--brand-green-700) 0 18px,
		var(--brand-gold-500) 18px 24px
	);
}

/* ---------------- Cards ---------------- */
.card {
	border: 1px solid rgba(11, 61, 46, 0.08);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.card-hero {
	background: linear-gradient(135deg, var(--brand-green-800) 0%, var(--brand-green-600) 100%);
	color: #fff;
	border: none;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
}

.card-hero .card-title,
.card-hero h1, .card-hero h2, .card-hero h3, .card-hero h4 {
	color: #fff;
}

.card-hero .bank-box {
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--radius-md);
	padding: .75rem 1rem;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
}

.card-note {
	background: var(--brand-cream-dark);
	border: 1px dashed var(--brand-gold-600);
	border-radius: var(--radius-md);
}

/* ---------------- Buttons ---------------- */
.btn-brand {
	background: linear-gradient(135deg, var(--brand-green-700), var(--brand-green-600));
	border: none;
	color: #fff;
	font-weight: 600;
	letter-spacing: .2px;
	box-shadow: 0 4px 14px rgba(20, 108, 67, 0.35);
}
.btn-brand:hover, .btn-brand:focus {
	background: linear-gradient(135deg, var(--brand-green-800), var(--brand-green-700));
	color: #fff;
}

.btn-gold {
	background: linear-gradient(135deg, var(--brand-gold-600), var(--brand-gold-500));
	border: none;
	color: #3a2c05;
	font-weight: 600;
}
.btn-gold:hover { color: #3a2c05; filter: brightness(0.97); }

.btn-outline-brand {
	border: 1.5px solid var(--brand-green-700);
	color: var(--brand-green-700);
	font-weight: 600;
	background: #fff;
}
.btn-outline-brand:hover {
	background: var(--brand-green-700);
	color: #fff;
}

/* ---------------- Form controls ---------------- */
.form-control:focus, .form-select:focus {
	border-color: var(--brand-green-500);
	box-shadow: 0 0 0 .2rem rgba(31, 168, 112, 0.18);
}

.section-label {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-weight: 600;
	color: var(--brand-green-900);
	margin-bottom: .5rem;
}
.section-label .bi {
	color: var(--brand-gold-600);
}

.eskul-check-item {
	border: 1px solid rgba(11, 61, 46, 0.12);
	border-radius: var(--radius-md);
	padding: .55rem .75rem;
	margin-bottom: .4rem;
	transition: background .15s ease, border-color .15s ease;
}
.eskul-check-item:hover {
	background: var(--brand-green-50);
	border-color: var(--brand-green-500);
}
.eskul-check-item .harga-tag {
	font-size: .78rem;
	color: var(--brand-muted);
}

.total-tagihan-box {
	background: linear-gradient(135deg, var(--brand-gold-100), #fff);
	border: 1.5px solid var(--brand-gold-500);
	border-radius: var(--radius-md);
}
.total-tagihan-box .amount {
	color: var(--brand-green-800);
	font-size: 1.4rem;
	font-weight: 700;
}

/* ---------------- Badges ---------------- */
.badge-status-pending { background: var(--brand-gold-100); color: var(--brand-gold-700); border: 1px solid var(--brand-gold-500); }
.badge-status-diverifikasi { background: var(--brand-green-100); color: var(--brand-green-800); border: 1px solid var(--brand-green-500); }
.badge-status-ditolak { background: #fdecea; color: #a12b25; border: 1px solid #e17d76; }

/* ---------------- Public page wrapper ---------------- */
.public-wrapper {
	min-height: 100vh;
	padding: 2.5rem 1rem;
}

.public-logo-badge {
	width: 56px; height: 56px;
	border-radius: 50%;
	background: rgba(255,255,255,.16);
	display: flex; align-items: center; justify-content: center;
	font-size: 1.6rem;
	border: 1px solid rgba(255,255,255,.4);
}

/* ---------------- Admin shell ---------------- */
.admin-shell { min-height: 100vh; }

.admin-sidebar {
	width: 250px;
	min-height: 100vh;
	background: linear-gradient(180deg, var(--brand-green-900), #08281d);
	color: #fff;
	flex-shrink: 0;
}
.admin-sidebar .brand {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: 1.2rem 1.1rem;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.admin-sidebar .brand .badge-icon {
	width: 38px; height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--brand-gold-600), var(--brand-gold-500));
	display: flex; align-items: center; justify-content: center;
	font-size: 1.1rem;
	color: #3a2c05;
}
.admin-sidebar .nav-link {
	color: rgba(255,255,255,.72);
	border-radius: 10px;
	padding: .55rem .8rem;
	margin: .15rem .7rem;
	display: flex;
	align-items: center;
	gap: .65rem;
	font-size: .92rem;
}
.admin-sidebar .nav-link .bi { font-size: 1.05rem; opacity: .9; width: 1.2rem; text-align: center; }
.admin-sidebar .nav-link:hover {
	background: rgba(255,255,255,.08);
	color: #fff;
}
.admin-sidebar .nav-link.active {
	background: linear-gradient(135deg, var(--brand-gold-600), var(--brand-gold-500));
	color: #3a2c05;
	font-weight: 600;
}
.admin-sidebar .nav-link.active .bi { color: #3a2c05; }
.admin-sidebar hr { border-color: rgba(255,255,255,.12); }

.admin-topbar {
	background: #fff;
	border-bottom: 1px solid rgba(11, 61, 46, 0.08);
	padding: .85rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.admin-content {
	background: var(--brand-cream);
	min-height: 100vh;
	padding: 1.5rem;
}

.stat-tile {
	border-radius: var(--radius-lg);
	border: 1px solid rgba(11, 61, 46, 0.08);
	box-shadow: var(--shadow-card);
	padding: 1.1rem 1.25rem;
	background: #fff;
	position: relative;
	overflow: hidden;
}
.stat-tile::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 5px;
}
.stat-tile.tile-gold::before { background: var(--brand-gold-500); }
.stat-tile.tile-green::before { background: var(--brand-green-600); }
.stat-tile.tile-red::before { background: #d9534f; }
.stat-tile.tile-navy::before { background: var(--brand-green-900); }
.stat-tile .stat-icon {
	font-size: 1.4rem;
	color: var(--brand-gold-600);
}

.table thead th {
	background: var(--brand-green-50);
	color: var(--brand-green-900);
	font-weight: 600;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	border-bottom: none;
}
.table > :not(caption) > * > * { vertical-align: middle; }

.pagination .page-link { color: var(--brand-green-700); }
.pagination .page-item.active .page-link {
	background-color: var(--brand-green-700);
	border-color: var(--brand-green-700);
}

.login-shell {
	min-height: 100vh;
	background: linear-gradient(135deg, var(--brand-green-900), var(--brand-green-600));
}