/* Jagoan CBT — kerangka dashboard (bilah sisi + area konten)
 * Melanjutkan token warna dan huruf dari player.css.
 */

/* Kerangka butuh kanvas lebih lebar daripada player, yang sengaja dibatasi
   860px agar teks soal nyaman dibaca. Di sini yang dibaca adalah tabel dan
   kartu, jadi batasnya dinaikkan. */
.jcbt-app.jcbt-shell {
	max-width: 1140px;
}

/* ---------- sapaan ---------- */

.jcbt-shell-sapa {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 4px 0 20px;
	border-bottom: 1px solid var(--garis);
	margin-bottom: 20px;
}

.jcbt-shell-sapa-teks { min-width: 0; }
.jcbt-shell-sapa .jcbt-eyebrow { margin: 0; }
.jcbt-shell-sapa .jcbt-judul-besar { margin: 2px 0 0; }
.jcbt-shell-ket { margin: 4px 0 0; font-size: .9rem; }

/* ---------- avatar ---------- */

.jcbt-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 50%;
	overflow: hidden;
	background: var(--u);
	color: #fff;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	user-select: none;
}

.jcbt-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.jcbt-avatar-besar { width: 58px; height: 58px; font-size: 1.15rem; }
.jcbt-avatar-jumbo { width: 104px; height: 104px; font-size: 2rem; }

/* ---------- badan: nav + utama ---------- */

.jcbt-shell-badan {
	display: flex;
	align-items: flex-start;
	gap: 26px;
}

.jcbt-shell-nav {
	flex: 0 0 226px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	position: sticky;
	top: 20px;
}

.jcbt-shell-nav .jcbt-nav-item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 14px;
	border-radius: 10px;
	color: var(--tinta);
	text-decoration: none;
	font-size: .95rem;
	font-weight: 500;
	border: 1px solid transparent;
	transition: background .15s ease, color .15s ease;
}

.jcbt-shell-nav .jcbt-nav-item:hover {
	background: #F3F6FC;
	color: var(--u);
}

.jcbt-shell-nav .jcbt-nav-item.aktif {
	background: var(--u);
	color: #fff;
	font-weight: 600;
}

.jcbt-shell-nav .jcbt-nav-item.aktif .jcbt-ikon { color: var(--aksen); }

.jcbt-shell-nav .jcbt-nav-keluar {
	margin-top: 10px;
	padding-top: 14px;
	border-top: 1px solid var(--garis);
	border-radius: 0 0 10px 10px;
	color: var(--kabut);
}

.jcbt-ikon {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
}

.jcbt-shell-utama {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ---------- panel ---------- */

.jcbt-shell .jcbt-panel {
	background: var(--kertas);
	border: 1px solid var(--garis);
	border-radius: 14px;
	padding: 20px 22px;
}

.jcbt-panel-kepala {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 16px;
}

.jcbt-panel-kepala h3 {
	margin: 0;
	font-size: 1.06rem;
	font-weight: 700;
	color: var(--tinta);
}

.jcbt-panel-kepala p { margin: 3px 0 0; font-size: .88rem; }
.jcbt-panel-aksi { flex: 0 0 auto; }

/* ---------- kartu statistik ---------- */

.jcbt-kartu-baris {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
}

.jcbt-kartu {
	--kartu: var(--u);
	background: var(--kertas);
	border: 1px solid var(--garis);
	border-radius: 14px;
	padding: 16px 18px;
	border-left: 4px solid var(--kartu);
}

.jcbt-kartu-angka {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--kartu);
}

.jcbt-kartu-label {
	margin-top: 3px;
	font-size: .88rem;
	font-weight: 500;
}

.jcbt-kartu-ket { margin-top: 2px; font-size: .8rem; }

/* ---------- notifikasi ---------- */

.jcbt-shell .jcbt-notis {
	padding: 11px 14px;
	border-radius: 10px;
	margin-bottom: 16px;
	font-size: .92rem;
}

.jcbt-shell .jcbt-notis-baik {
	background: #E8F5EE;
	color: #1E6B41;
	border: 1px solid #BFE3CD;
}

/* ---------- formulir profil ---------- */

.jcbt-form-profil { max-width: 520px; }

.jcbt-profil-foto {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding-bottom: 18px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--garis);
}

.jcbt-profil-foto-alat { flex: 1 1 auto; min-width: 0; }
.jcbt-profil-foto-alat .jcbt-field { margin-bottom: 6px; }
.jcbt-profil-foto-alat p { margin: 0 0 8px; font-size: .84rem; }

.jcbt-field-ket { margin: -8px 0 14px; font-size: .84rem; }

.jcbt-profil-sandi {
	border: 1px solid var(--garis);
	border-radius: 10px;
	padding: 12px 14px;
	margin: 6px 0 18px;
}

.jcbt-profil-sandi > summary {
	cursor: pointer;
	font-weight: 600;
	font-size: .95rem;
}

.jcbt-profil-sandi[open] > summary { margin-bottom: 12px; }

/* ---------- daftar ringkas di dashboard ---------- */

.jcbt-ringkas-daftar { display: flex; flex-direction: column; gap: 10px; }

.jcbt-ringkas-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--garis);
	border-radius: 11px;
	text-decoration: none;
	color: var(--tinta);
}

.jcbt-ringkas-item:hover { border-color: var(--u); background: #F7F9FD; }
.jcbt-ringkas-judul { font-weight: 600; }
.jcbt-ringkas-meta { font-size: .84rem; }
.jcbt-ringkas-skor { flex: 0 0 auto; text-align: right; font-weight: 700; }

/* ---------- layar sempit ---------- */

@media (max-width: 820px) {
	.jcbt-shell-badan { flex-direction: column; gap: 16px; }

	.jcbt-shell-nav {
		position: static;
		flex: 1 1 auto;
		width: 100%;
		flex-direction: row;
		gap: 6px;
		overflow-x: auto;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.jcbt-shell-nav::-webkit-scrollbar { display: none; }

	.jcbt-shell-nav .jcbt-nav-item {
		flex: 0 0 auto;
		border: 1px solid var(--garis);
		padding: 9px 13px;
		font-size: .88rem;
	}

	.jcbt-shell-nav .jcbt-nav-keluar {
		margin-top: 0;
		padding-top: 9px;
		border-top: 1px solid var(--garis);
		border-radius: 10px;
	}

	.jcbt-shell .jcbt-panel { padding: 16px 15px; }
	.jcbt-avatar-jumbo { width: 78px; height: 78px; font-size: 1.5rem; }
	.jcbt-profil-foto { flex-direction: column; gap: 12px; }
}

/* ---------- kartu kuis & tryout tersedia ---------- */

.jcbt-kuis-daftar {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}

.jcbt-kuis-kartu {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--garis);
	border-left: 4px solid var(--aksen);
	border-radius: 13px;
	background: var(--kertas);
}

.jcbt-kuis-kartu h4 {
	margin: 8px 0 4px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

.jcbt-kuis-meta { margin: 0; font-size: .84rem; }
.jcbt-kuis-aksi { display: flex; align-items: center; }
.jcbt-kuis-aksi .jcbt-tombol { width: 100%; justify-content: center; text-align: center; }

/* Kuota habis tetap ditampilkan, hanya diredupkan — siswa perlu tahu ujiannya
   ada dan sudah selesai, bukan mengira daftarnya hilang. */
.jcbt-kuis-habis {
	border-left-color: var(--garis);
	background: #FBFCFE;
}

.jcbt-kuis-habis h4 { color: var(--kabut); }

/* ---------- tabel analisis butir ---------- */

.jcbt-butir-catatan {
	font-size: .86rem;
	line-height: 1.6;
	margin: 16px 0 0;
	padding: 12px 14px;
	background: #F7F9FD;
	border-radius: 10px;
}

.jcbt-butir-tabel { width: 100%; border-collapse: collapse; }

.jcbt-butir-tabel th,
.jcbt-butir-tabel td {
	padding: 9px 10px;
	text-align: left;
	border-bottom: 1px solid var(--garis);
	font-size: .9rem;
	vertical-align: middle;
}

.jcbt-butir-tabel th {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--kabut);
	font-weight: 600;
}

.jcbt-butir-tabel code {
	background: #F1F4FA;
	padding: 1px 6px;
	border-radius: 5px;
	font-size: .85em;
}

/* Butir dengan daya beda rendah ditandai di tepi kiri, bukan diwarnai penuh —
   pada tes 160 butir, latar merah di puluhan baris justru menghapus rasa
   prioritas yang ingin ditimbulkan. */
.jcbt-butir-perlu { box-shadow: inset 3px 0 0 #D64545; }
.jcbt-butir-perlu td:first-child { padding-left: 14px; }

@media (max-width: 620px) {
	.jcbt-butir-tabel th:nth-child(2),
	.jcbt-butir-tabel td:nth-child(2) { display: none; }
	.jcbt-butir-tabel th, .jcbt-butir-tabel td { padding: 8px 6px; font-size: .84rem; }
}