/**
 * Elibrary Test - Question Impact & Transparency V1.0
 * ---------------------------------------------------------------------
 * Stylesheet mandiri untuk counter publik dan halaman transparansi.
 *
 * ISOLASI: seluruh selector diawali .elibrary-impact. Tidak ada satu pun
 * selector global (body/h1/h2/p/table/a/button), tidak ada variabel atau
 * class Game UI yang ditimpa, dan modul ini tidak memuat JavaScript sama
 * sekali. Stylesheet Elibrary Test lainnya tidak tersentuh.
 */

.elibrary-impact {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 auto;
	padding: 20px;
	border: 1.5px solid #e2e8f0;
	border-radius: 14px;
	background: #ffffff;
	color: #0f172a;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.55;
	overflow-wrap: break-word;
	/* WAJIB: sebagai flex/grid item (Elementor & tema modern rutin memakai
	   flex container), nilai bawaan min-width:auto membuat kartu TIDAK BISA
	   menyusut di bawah lebar tabel di dalamnya -- halaman lalu menggeser
	   horizontal di layar kecil. Ditemukan QA responsif V1.0 pada 360-430px
	   (kartu 556px di viewport 360px). */
	min-width: 0;
	/* Grid satu kolom dengan minmax(0, 1fr): anak-anaknya -- termasuk
	   pembungkus tabel -- boleh menyusut DI BAWAH lebar min-content-nya.
	   Tanpa ini, min-content tabel ledger (362px) merambat naik dan
	   memaksa kartu menjadi 401px di viewport 360px, walau pembungkusnya
	   sudah overflow-x: auto. */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.elibrary-impact * {
	box-sizing: border-box;
}

.elibrary-impact-eyebrow {
	margin: 0 0 6px;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #1d4ed8;
}

/* ---------------------------- COUNTER ---------------------------- */

.elibrary-impact-counter {
	/* min(): tanpa ini, max-width kartu menimpa max-width:100% milik
	   .elibrary-impact, sehingga klem ke lebar container hilang dan kartu
	   melar melebihi viewport. Akar sebenarnya dari overflow 360-390px. */
	max-width: min(420px, 100%);
	text-align: center;
}

.elibrary-impact-number {
	margin: 4px 0 0;
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1.1;
	color: #0f172a;
}

.elibrary-impact-label {
	margin: 2px 0 14px;
	font-size: 0.92rem;
	color: #475569;
}

.elibrary-impact-target {
	margin: 0 0 10px;
	font-size: 0.9rem;
	color: #334155;
}

.elibrary-impact-percent {
	margin: 8px 0 0;
	font-size: 0.88rem;
	font-weight: 700;
	color: #1d4ed8;
}

.elibrary-impact-notverified {
	margin: 10px 0;
	padding: 10px 12px;
	border: 1px solid #fde68a;
	border-radius: 10px;
	background: #fffbeb;
	color: #92400e;
	font-weight: 700;
	font-size: 0.9rem;
}

.elibrary-impact-updated {
	margin: 12px 0 0;
	font-size: 0.76rem;
	color: #94a3b8;
}

/* --------------------------- PROGRESS BAR --------------------------- */

.elibrary-impact-progress {
	height: 14px;
	margin: 10px 0 0;
	border-radius: 999px;
	background: #e2e8f0;
	overflow: hidden;
}

.elibrary-impact-progress-fill {
	display: block;
	height: 100%;
	min-width: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%);
}

/* --------------------------- DASHBOARD --------------------------- */

.elibrary-impact-dashboard {
	max-width: min(960px, 100%);
}

.elibrary-impact-heading {
	margin: 0 0 10px;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.25;
	color: #0f172a;
}

.elibrary-impact-subheading {
	margin: 26px 0 10px;
	font-size: 1.05rem;
	font-weight: 800;
	color: #0f172a;
}

.elibrary-impact-intro {
	margin: 0 0 18px;
	font-size: 0.95rem;
	color: #334155;
}

.elibrary-impact-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 14px;
}

.elibrary-impact-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px;
	border: 1.5px solid #e2e8f0;
	border-radius: 12px;
	background: #f8fafc;
	min-width: 0;
}

.elibrary-impact-stat-value {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.15;
	color: #1d4ed8;
	overflow-wrap: break-word;
}

.elibrary-impact-stat-label {
	font-size: 0.8rem;
	color: #64748b;
}

.elibrary-impact-milestone {
	margin: 12px 0 0;
	padding: 10px 12px;
	border: 1px solid #bbf7d0;
	border-radius: 10px;
	background: #f0fdf4;
	color: #166534;
	font-size: 0.88rem;
	font-weight: 700;
}

/* ----------------------------- TABEL ----------------------------- */

.elibrary-impact-tablewrap {
	/* Gulir horizontal LOKAL: halaman tidak pernah ikut menggeser.
	   min-width:0 + max-width:100% memastikan pembungkus inilah yang
	   menyusut, bukan kartunya yang melebar. */
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1.5px solid #e2e8f0;
	border-radius: 12px;
}

.elibrary-impact-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.86rem;
	/* SENGAJA TANPA min-width tetap.
	   min-width pada tabel merambat naik sebagai min-content width kartu.
	   Di dalam flex container berarah kolom -- yang dipakai Elementor dan
	   tema modern -- kartu lalu TIDAK BISA menyusut dan halaman menggeser
	   horizontal di 360-430px. Tabel dibiarkan fluid; pembungkusnya tetap
	   memiliki overflow-x: auto sebagai jaring pengaman. */
	/* table-layout: fixed membuat lebar kolom TIDAK lagi ditentukan
	   min-content isinya, sehingga tabel benar-benar bisa menyusut di layar
	   sempit dan tidak merambatkan lebar minimum ke kartu induknya. Inilah
	   yang menjaga 360px tetap bebas overflow meskipun ledger punya 7 kolom. */
	table-layout: fixed;
}

.elibrary-impact-table th,
.elibrary-impact-table td {
	padding: 9px 12px;
	/* Sel boleh membungkus & memecah kata panjang, sehingga lebar minimum
	   tabel tetap kecil di layar sempit. */
	word-break: break-word;
	overflow-wrap: anywhere;
	text-align: left;
	border-bottom: 1px solid #e2e8f0;
	vertical-align: top;
}

.elibrary-impact-table thead th {
	background: #eff6ff;
	font-weight: 800;
	color: #1e3a8a;
}

.elibrary-impact-table tbody tr:last-child td {
	border-bottom: 0;
}

.elibrary-impact-table code {
	font-size: 0.78rem;
	color: #475569;
	word-break: break-all;
}

.elibrary-impact-status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: #dbeafe;
	color: #1d4ed8;
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
}

.elibrary-impact-empty,
.elibrary-impact-note {
	margin: 12px 0 0;
	font-size: 0.8rem;
	line-height: 1.6;
	color: #64748b;
}

@media ( max-width: 430px ) {
	.elibrary-impact {
		padding: 16px;
	}

	.elibrary-impact-number {
		font-size: 2.1rem;
	}

	.elibrary-impact-heading {
		font-size: 1.25rem;
	}
}

/* V1.0.1 -- baris baseline & pertumbuhan pada kartu counter. */
.elibrary-impact-baseline {
	margin: 10px 0 0;
	font-size: 0.8rem;
	color: #475569;
}


/**
 * V1.0.1 -- LAYOUT KARTU RESPONSIF UNTUK TABEL (STEP 30).
 * Di bawah 480px, tabel 7 kolom tetap memiliki lebar minimum intrinsik
 * (~362px) yang merambat naik dan memaksa kartu melebihi viewport 360px.
 * Gulir lokal saja tidak cukup karena min-content tetap merambat. Karena
 * itu di layar sempit tabel berubah menjadi daftar kartu: setiap baris
 * menjadi satu blok, setiap sel diberi label dari atribut data-label.
 * Tidak ada data yang disembunyikan -- hanya susunannya yang berubah.
 */
@media ( max-width: 480px ) {
	.elibrary-impact-table,
	.elibrary-impact-table tbody,
	.elibrary-impact-table tr,
	.elibrary-impact-table td {
		display: block;
		width: auto;
	}

	.elibrary-impact-table thead {
		/* Disembunyikan secara visual, tetap terbaca pembaca layar. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.elibrary-impact-table tr {
		padding: 10px 0;
		border-bottom: 1px solid #e2e8f0;
	}

	.elibrary-impact-table tr:last-child {
		border-bottom: 0;
	}

	.elibrary-impact-table td {
		display: flex;
		gap: 10px;
		padding: 4px 12px;
		border-bottom: 0;
	}

	.elibrary-impact-table td::before {
		content: attr(data-label);
		flex: 0 0 96px;
		font-weight: 700;
		color: #64748b;
	}
}