/*
 * MANSAKA CBT — tema v2 (2 Nov 2026), satu sistem desain dengan man1majalengka.sch.id
 * dan labkom.man1majalengka.sch.id (DIGILAB): token warna/radius/bayangan yang sama,
 * font sistem (tanpa unduhan font), kartu putih bersih, aksen emas.
 *
 * Dimuat paling akhir di <head>. Beberapa template masih membawa <style> inline yang
 * dimuat SESUDAH berkas ini; bagian yang perlu menang memakai awalan `html body`
 * (spesifisitas lebih tinggi) alih-alih menambah !important di mana-mana.
 */
:root {
	--biru-900: #001f47;
	--biru-800: #002d6b;
	--biru-700: #003a8a;
	--biru-600: #004aad;
	--biru-500: #1a62c4;
	--biru-200: #bfd4f0;
	--biru-100: #dbe7f8;
	--biru-050: #eef4fc;
	--emas-700: #9a7a00;
	--emas-600: #c99f00;
	--emas-500: #e1a50a;
	--emas-400: #f6c601;
	--emas-100: #fdf3d0;
	--hijau-600: #15803d;
	--hijau-100: #dcfce7;
	--merah-600: #c62828;
	--merah-100: #fde4e4;
	--teal-600: #0f766e;
	--teal-100: #ccfbf1;
	--abu-900: #14171c;
	--abu-800: #23272f;
	--abu-700: #3b414c;
	--abu-600: #5b6270;
	--abu-500: #7d8593;
	--abu-400: #a3aab7;
	--abu-300: #c9cfda;
	--abu-200: #e4e8ef;
	--abu-100: #f1f4f8;
	--abu-050: #f8f9fb;
	--teks: var(--abu-800);
	--teks-lembut: var(--abu-600);
	--garis: var(--abu-200);
	--radius-s: 8px;
	--radius: 12px;
	--radius-l: 18px;
	--bayang-1: 0 1px 2px rgba(0, 31, 71, .05), 0 2px 8px rgba(0, 31, 71, .05);
	--bayang-2: 0 6px 16px rgba(0, 31, 71, .08), 0 16px 40px rgba(0, 31, 71, .07);
	--cincin: 0 0 0 .2rem rgba(0, 74, 173, .18);
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--latar: radial-gradient(900px 520px at -10% -10%, rgba(26, 98, 196, .14), transparent 60%),
		radial-gradient(700px 460px at 110% 0%, rgba(246, 198, 1, .12), transparent 60%),
		var(--biru-050);
	/* nama lama (tema v1) tetap ada agar gaya yang masih merujuknya tidak putus */
	--m-biru-900: var(--biru-900); --m-biru-800: var(--biru-800); --m-biru-700: var(--biru-700);
	--m-biru-600: var(--biru-600); --m-biru-500: var(--biru-500); --m-biru-200: var(--biru-200);
	--m-biru-100: var(--biru-100); --m-biru-050: var(--biru-050); --m-emas-600: var(--emas-600);
	--m-emas-400: var(--emas-400); --m-abu-600: var(--abu-600); --m-abu-200: var(--abu-200);
	--primary: #004aad;
	--blue: #004aad;
	--navy: #001f47;
}

/* ================= Dasar ================= */
html, html body {
	font-family: var(--font) !important;
	color: var(--teks);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
/* kontainer utama ikut font sistem (beberapa template memasang Poppins di .wrapper) */
html body .wrapper, html body .main-header, html body .main-sidebar, html body .main-footer,
html body .content-wrapper, html body .btn, html body .form-control { font-family: var(--font) !important; }
html body .content-wrapper {
	background: var(--latar) !important;
	background-attachment: fixed !important;
}
::selection { background: var(--biru-100); color: var(--biru-900); }
a { color: var(--biru-600); }
a:hover { color: var(--biru-800); }
h1, h2, h3, h4, h5, h6 { color: inherit; letter-spacing: -.01em; }
:focus-visible { outline: 2px solid var(--biru-500); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ================= Indikator muat: garis emas tipis di tepi atas ================= */
html body .pace {
	position: fixed !important;
	top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important;
	width: 100% !important; height: 3px !important;
	margin: 0 !important; padding: 0 !important;
	background: transparent !important; border: 0 !important; border-radius: 0 !important;
	z-index: 2000 !important; pointer-events: none;
	overflow: hidden;
}
html body .pace .pace-progress {
	position: absolute !important;
	top: 0 !important; right: 100% !important; left: auto !important;
	width: 100% !important; height: 3px !important;
	margin: 0 !important; border-radius: 0 !important;
	background: linear-gradient(90deg, var(--emas-400), var(--emas-500)) !important;
	box-shadow: 0 0 8px rgba(246, 198, 1, .6) !important;
	color: transparent !important; font-size: 0 !important; line-height: 0 !important;
}
html body .pace .pace-progress::before,
html body .pace .pace-progress::after,
html body .pace .pace-activity { display: none !important; }
html body .pace.pace-inactive { display: none !important; }

/* ================= Tombol ================= */
html body .btn { border-radius: 10px; font-weight: 600; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s; }
html body .btn-sm { border-radius: var(--radius-s); }
html body .btn-lg { border-radius: var(--radius); }
.btn-primary, .btn-primary.disabled, .btn-primary:disabled { background-color: var(--biru-600); border-color: var(--biru-600); color: #fff; }
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle { background-color: var(--biru-700); border-color: var(--biru-700); color: #fff; }
.btn:focus, .btn.focus { box-shadow: var(--cincin) !important; }
.btn-outline-primary { color: var(--biru-600); border-color: var(--biru-600); }
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active { background-color: var(--biru-600); border-color: var(--biru-600); color: #fff; }
.btn-link { color: var(--biru-600); }
.btn-warning, .btn-emas { background: var(--emas-400); border-color: var(--emas-400); color: var(--biru-900) !important; }
.btn-warning:hover, .btn-warning:focus, .btn-emas:hover, .btn-emas:focus { background: var(--emas-500); border-color: var(--emas-500); color: var(--biru-900) !important; }
.btn-default, .btn-light { background: #fff; border-color: var(--abu-200); color: var(--abu-700); }
.btn-default:hover, .btn-light:hover { background: var(--abu-050); border-color: var(--abu-300); color: var(--abu-900); }

/* ================= Warna utilitas ================= */
.bg-primary, .badge-primary, .bg-blue, .navbar-primary, .navbar-blue { background: var(--biru-600) !important; color: #fff !important; }
.bg-gradient-primary { background: linear-gradient(135deg, var(--biru-800), var(--biru-600)) !important; color: #fff !important; }
.bg-navy { background-color: var(--biru-900) !important; color: #fff !important; }
.bg-teal, .badge-teal, .bg-lightblue { background-color: var(--biru-500) !important; color: #fff !important; }
.text-primary, .text-blue, .text-navy { color: var(--biru-600) !important; }
.text-teal { color: var(--biru-500) !important; }
.border-primary { border-color: var(--biru-600) !important; }
.text-emas { color: var(--emas-600) !important; }
.bg-emas { background: var(--emas-400) !important; color: var(--biru-900) !important; }
.badge { border-radius: 999px; font-weight: 600; padding: .3em .7em; }
.badge-warning { background: var(--emas-400); color: var(--biru-900); }

/* ================= Kartu ================= */
html body .card {
	border: 1px solid var(--garis);
	border-radius: var(--radius-l);
	box-shadow: var(--bayang-1);
	background: #fff;
}
html body .card > .card-header {
	background: transparent;
	border-bottom: 1px solid var(--garis);
	padding: .9rem 1.15rem;
	border-radius: var(--radius-l) var(--radius-l) 0 0;
}
html body .card > .card-header .card-title {
	color: var(--biru-900);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -.01em;
	text-transform: none;
}
html body .card-primary:not(.card-outline) > .card-header,
html body .card-primary:not(.card-outline) > .card-header .card-title,
html body .card-primary:not(.card-outline) > .card-header a {
	background: linear-gradient(135deg, var(--biru-700), var(--biru-600));
	color: #fff;
	border-bottom: 0;
}
html body .card-outline.card-primary { border-top: 3px solid var(--biru-600); }
html body .card-footer { background: var(--abu-050); border-top: 1px solid var(--garis); border-radius: 0 0 var(--radius-l) var(--radius-l); }

/* Kartu dasbor (kelas lama .glass-card): putih bersih, judul tidak lagi pita biru kapital */
html body .glass-card {
	background: rgba(255, 255, 255, .92) !important;
	-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
	border: 1px solid var(--garis) !important;
	border-radius: var(--radius-l) !important;
	box-shadow: var(--bayang-1) !important;
	margin-bottom: 1.25rem;
	overflow: hidden;
}
html body .glass-card > .card-header {
	background: transparent !important;
	border-bottom: 1px solid var(--garis) !important;
	padding: .85rem 1.15rem !important;
}
html body .glass-card > .card-header .card-title {
	color: var(--biru-900) !important;
	font-size: .95rem !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	display: flex; align-items: center; gap: .5rem;
}
html body .glass-card > .card-header .card-title::before {
	content: ""; width: 4px; height: 1.05em; border-radius: 4px;
	background: linear-gradient(180deg, var(--emas-400), var(--emas-600));
}
html body .glass-card > .card-header a.text-white,
html body .glass-card > .card-header .btn-tool.text-white,
html body .glass-card > .card-header .card-tools a { color: var(--biru-600) !important; }

/* ================= Navigasi, paginasi, tab ================= */
html body .nav-pills .nav-link { color: var(--abu-700); font-weight: 600; border-radius: 999px; }
html body .nav-pills .nav-link:hover { background: var(--biru-050); color: var(--biru-700); }
html body .nav-pills .nav-link.active,
html body .nav-pills .show > .nav-link { background: var(--biru-600) !important; color: #fff !important; box-shadow: 0 4px 10px rgba(0, 74, 173, .22) !important; }
html body .nav-tabs .nav-link.active { color: var(--biru-700); border-top: 2px solid var(--biru-600); }
.page-link { color: var(--biru-600); border-color: var(--garis); }
.page-link:hover { color: var(--biru-800); background: var(--biru-050); }
.page-item.active .page-link { background-color: var(--biru-600); border-color: var(--biru-600); color: #fff; }
.page-item:first-child .page-link { border-radius: 10px 0 0 10px; }
.page-item:last-child .page-link { border-radius: 0 10px 10px 0; }
html body .dropdown-menu {
	background: #fff !important;
	border: 1px solid var(--garis) !important;
	border-radius: var(--radius) !important;
	box-shadow: var(--bayang-2) !important;
	padding: .35rem;
}
html body .dropdown-item { border-radius: var(--radius-s); padding: .45rem .8rem; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--biru-600); }

/* ================= Formulir ================= */
html body .form-control, html body .custom-select { border-radius: 10px; border-color: var(--abu-300); }
html body .form-control-sm, html body .custom-select-sm { border-radius: var(--radius-s); }
html body .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html body .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
html body .input-group-text { background: var(--abu-050); border-color: var(--abu-300); color: var(--abu-600); }
.form-control:focus, .custom-select:focus,
.select2-container--bootstrap4.select2-container--focus .select2-selection { border-color: #6f9fe0; box-shadow: var(--cincin); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--biru-600); border-color: var(--biru-600); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--cincin); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--biru-600); }
.icheck-primary > input:first-child:checked + label::before,
.icheck-primary > input:first-child:checked + input[type="hidden"] + label::before { background-color: var(--biru-600); border-color: var(--biru-600); }
.icheck-primary > input:first-child:not(:checked):not(:disabled):hover + label::before { border-color: var(--biru-600); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"] { background-color: var(--biru-600) !important; color: #fff !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice { background-color: var(--biru-600); border-color: var(--biru-700); color: #fff; }
html body .select2-container--bootstrap4 .select2-selection { border-radius: 10px; border-color: var(--abu-300); }

/* ================= Tabel ================= */
html body .table thead th { border-bottom: 1px solid var(--garis); color: var(--abu-700); font-weight: 600; background: var(--abu-050); }
html body .table td, html body .table th { border-color: var(--garis); }
html body .table-hover tbody tr:hover { background-color: var(--biru-050); }
table.dataTable tbody tr.selected, table.dataTable tbody tr.selected > * { background-color: var(--biru-100) !important; color: var(--biru-900); }

/* ================= Dialog & notifikasi: selalu pekat, mudah dibaca ================= */
html body .swal2-popup {
	background: #fff !important;
	-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
	border: 1px solid var(--garis) !important;
	border-radius: var(--radius-l) !important;
	box-shadow: var(--bayang-2) !important;
	font-family: var(--font) !important;
}
html body .swal2-popup .swal2-title { color: var(--biru-900) !important; letter-spacing: 0 !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
html body .swal2-popup .swal2-html-container,
html body .swal2-popup .swal2-content { color: var(--abu-700) !important; }
html body .swal2-container.swal2-backdrop-show { background: rgba(0, 31, 71, .45) !important; }
.swal2-styled { border-radius: 10px !important; font-weight: 600 !important; }
.swal2-styled.swal2-confirm { background-color: var(--biru-600) !important; }
.swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 3px rgba(0, 74, 173, .35) !important; }
.swal2-icon.swal2-info { border-color: var(--biru-200); color: var(--biru-600); }
html body .modal-content { border: 0; border-radius: var(--radius-l); box-shadow: var(--bayang-2); }
html body .modal-header { border-bottom-color: var(--garis); }
html body .modal-footer { border-top-color: var(--garis); }
html body .alert { border-radius: var(--radius); }
.alert-default-info { background: var(--biru-050) !important; border: 1px solid var(--biru-200) !important; color: var(--biru-800) !important; }
.alert-default-info h5 { color: var(--biru-800); font-weight: 600; }

/* ================= Navbar atas (admin & guru) ================= */
html body .main-header.navbar {
	background: rgba(255, 255, 255, .86) !important;
	-webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid var(--garis) !important;
	box-shadow: 0 2px 16px rgba(0, 31, 71, .06) !important;
}
html body .main-header .navbar-nav .nav-link { color: var(--biru-800); }
html body .main-header .info-tp-smt {
	background: var(--emas-100) !important;
	color: var(--biru-900) !important;
	border: 1px solid rgba(201, 159, 0, .45);
	box-shadow: none !important;
	font-weight: 600;
	border-radius: 999px;
}
html body .main-header .info-tp-smt * { color: var(--biru-900) !important; }
html body .main-header #live-clock {
	color: var(--biru-800) !important;
	background: var(--biru-050) !important;
	border: 1px solid var(--biru-200) !important;
	font-variant-numeric: tabular-nums;
}

/* ================= Sidebar (admin & guru): kaca terang ala DIGILAB ================= */
html body .main-sidebar {
	background: #fff !important;
	-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
	border-right: 1px solid var(--garis) !important;
	box-shadow: 2px 0 16px rgba(0, 31, 71, .05) !important;
}
html body .sidebar-overlay { background: rgba(0, 31, 71, .35) !important; }
html body .main-sidebar .brand-link {
	background: #fff !important;
	color: var(--biru-900) !important;
	border-bottom: 1px solid var(--garis) !important;
	box-shadow: inset 0 -3px 0 var(--emas-400);
}
html body .main-sidebar .brand-link .brand-text { color: var(--biru-900) !important; font-weight: 800 !important; letter-spacing: .02em; }
html body .main-sidebar .user-panel {
	background: var(--biru-050) !important;
	border: 1px solid var(--biru-100) !important;
	border-radius: var(--radius) !important;
}
html body .main-sidebar .user-panel .info a,
html body .main-sidebar .user-panel .info { color: var(--biru-900) !important; }
html body .main-sidebar .nav-header {
	color: var(--abu-500) !important;
	font-size: .7rem !important;
	font-weight: 700 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
}
html body .main-sidebar .nav-sidebar .nav-link {
	color: var(--abu-700) !important;
	border-radius: 10px !important;
	font-weight: 600;
	transition: background-color .15s, color .15s;
}
html body .main-sidebar .nav-sidebar .nav-link .nav-icon { color: var(--abu-500); transition: color .15s; }
html body .main-sidebar .nav-sidebar .nav-link:hover { background: var(--biru-050) !important; color: var(--biru-700) !important; }
html body .main-sidebar .nav-sidebar .nav-link:hover .nav-icon { color: var(--biru-600); }
html body .main-sidebar .nav-sidebar .nav-link.active,
html body .main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link {
	background: linear-gradient(135deg, var(--biru-700), var(--biru-600)) !important;
	color: #fff !important;
	box-shadow: 0 6px 14px rgba(0, 74, 173, .22) !important;
}
html body .main-sidebar .nav-sidebar .nav-link.active .nav-icon,
html body .main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link .nav-icon { color: #fff; }
html body .main-sidebar .nav-treeview .nav-link.active {
	background: var(--biru-100) !important;
	color: var(--biru-800) !important;
	box-shadow: none !important;
}
html body .main-sidebar .nav-treeview .nav-link.active .nav-icon { color: var(--biru-600); }
html body .sidebar { scrollbar-width: thin; scrollbar-color: transparent transparent; }
html body .sidebar:hover { scrollbar-color: var(--abu-300) transparent; }
html body .sidebar::-webkit-scrollbar, html body .main-sidebar::-webkit-scrollbar { width: 6px; background: transparent; }
html body .sidebar::-webkit-scrollbar-track, html body .main-sidebar::-webkit-scrollbar-track { background: transparent !important; }
html body .sidebar::-webkit-scrollbar-thumb, html body .main-sidebar::-webkit-scrollbar-thumb { background: transparent !important; border-radius: 6px; }
html body .sidebar:hover::-webkit-scrollbar-thumb, html body .main-sidebar:hover::-webkit-scrollbar-thumb { background: var(--abu-300) !important; }

/* ================= Hero dasbor (admin & guru) ================= */
html body .content-wrapper > .hero-header.hero-mansaka {
	position: relative;
	height: auto !important;
	min-height: 0 !important;
	margin: 1rem 1rem 0 !important;
	padding: clamp(1.4rem, 3.2vw, 2.4rem) 0 clamp(3.6rem, 6vw, 4.6rem) !important;
	border-radius: var(--radius-l) !important;
	border: 0 !important;
	overflow: hidden;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	text-align: left !important;
	box-shadow: var(--bayang-2) !important;
	background:
		linear-gradient(100deg, rgba(0, 31, 71, .97) 0%, rgba(0, 45, 107, .9) 46%, rgba(0, 58, 138, .62) 78%, rgba(0, 74, 173, .45) 100%),
		url("../img/hero-cbt.webp") no-repeat 85% 40% / cover,
		var(--biru-800) !important;
}
html body .content-wrapper > .hero-header.hero-mansaka::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
	background: linear-gradient(90deg, var(--emas-400), var(--emas-600) 60%, transparent);
}
html body .hero-mansaka .hero-isi { position: relative; z-index: 2; width: 100%; padding: 0 clamp(1.25rem, 3.5vw, 2.5rem); color: #fff; }
html body .hero-mansaka .hero-label {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .32rem .85rem; border-radius: 999px;
	background: rgba(246, 198, 1, .14); border: 1px solid rgba(246, 198, 1, .5);
	color: var(--emas-400); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	margin-bottom: .75rem;
}
html body .hero-mansaka .hero-school-name {
	color: #fff !important;
	font-size: clamp(1.6rem, 3.6vw, 2.5rem) !important;
	font-weight: 800 !important;
	letter-spacing: -.01em !important;
	text-transform: none !important;
	text-shadow: none !important;
	text-align: left !important;
	margin: 0 0 .35rem !important; padding: 0 !important; line-height: 1.15 !important;
}
html body .hero-mansaka .hero-sub { margin: 0; font-size: clamp(.88rem, 1.5vw, 1.02rem); color: rgba(255, 255, 255, .85); }
html body .hero-mansaka .hero-sub b { color: #fff; font-weight: 600; }
/* kartu statistik menumpang sedikit di bawah hero */
html body .hero-mansaka + .content { margin-top: -2.6rem; position: relative; z-index: 3; }
@media (max-width: 768px) {
	html body .content-wrapper > .hero-header.hero-mansaka {
		margin: .75rem .75rem 0 !important;
		background:
			linear-gradient(160deg, rgba(0, 31, 71, .96), rgba(0, 45, 107, .88) 60%, rgba(0, 74, 173, .7)),
			url("../img/hero-cbt.webp") no-repeat 70% 30% / cover,
			var(--biru-800) !important;
	}
}

/* ================= Kartu statistik (kelas lama .small-box-glass) ================= */
html body .small-box-glass {
	position: relative;
	display: flex; flex-direction: column;
	min-height: 0 !important;
	margin-bottom: 1rem;
	background: #fff !important;
	color: var(--teks) !important;
	-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
	border: 1px solid var(--garis) !important;
	border-radius: var(--radius-l) !important;
	box-shadow: var(--bayang-1) !important;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease !important;
}
html body .small-box-glass:hover { transform: translateY(-2px); box-shadow: var(--bayang-2) !important; background: #fff !important; }
html body .small-box-glass .inner { padding: .9rem 1rem .6rem !important; }
html body .small-box-glass .inner h5 { padding-right: 2.7rem; min-height: 2.4rem; display: flex; align-items: center; margin-bottom: .15rem !important; }
html body .small-box-glass h5, html body .small-box-glass h5 b {
	color: var(--biru-900) !important; font-size: 1.45rem !important; font-weight: 800 !important;
	text-shadow: none !important; line-height: 1.1; font-variant-numeric: tabular-nums;
}
html body .small-box-glass .inner span, html body .small-box-glass .inner p {
	color: var(--teks-lembut) !important; font-size: .82rem !important; font-weight: 600;
	overflow-wrap: break-word; hyphens: manual;
}
html body .small-box-glass .icon {
	position: absolute; top: .85rem !important; right: .85rem !important;
	width: 2.4rem; height: 2.4rem; border-radius: var(--radius);
	display: grid; place-items: center;
	background: var(--biru-050); color: var(--biru-600) !important;
	font-size: 1.05rem !important; opacity: 1 !important;
}
html body .small-box-glass .icon i { color: var(--biru-600) !important; font-size: 1.05rem !important; opacity: 1 !important; }
html body .row > div:nth-child(6n+2) > .small-box-glass .icon,
html body .row > div:nth-child(6n+2) > .small-box-glass .icon i { background: var(--emas-100); color: var(--emas-700) !important; }
html body .row > div:nth-child(6n+3) > .small-box-glass .icon,
html body .row > div:nth-child(6n+3) > .small-box-glass .icon i { background: var(--teal-100); color: var(--teal-600) !important; }
html body .row > div:nth-child(6n+4) > .small-box-glass .icon,
html body .row > div:nth-child(6n+4) > .small-box-glass .icon i { background: var(--hijau-100); color: var(--hijau-600) !important; }
html body .row > div:nth-child(6n+5) > .small-box-glass .icon,
html body .row > div:nth-child(6n+5) > .small-box-glass .icon i { background: var(--biru-100); color: var(--biru-700) !important; }
html body .row > div:nth-child(6n) > .small-box-glass .icon,
html body .row > div:nth-child(6n) > .small-box-glass .icon i { background: var(--merah-100); color: var(--merah-600) !important; }
html body .small-box-glass .small-box-footer {
	margin-top: auto;
	background: var(--abu-050) !important;
	border-top: 1px solid var(--garis);
	color: var(--biru-600) !important;
	font-size: .78rem; font-weight: 600;
	padding: .4rem .5rem !important;
	text-decoration: none !important;
	transition: background-color .15s;
}
html body .small-box-glass .small-box-footer:hover { background: var(--biru-050) !important; }

/* Kotak angka di kartu "Statistik & Token" (kelas lama .box-penilaian-glass / .box-info-glass) */
html body .box-penilaian-glass, html body .box-info-glass {
	background: var(--abu-050) !important;
	-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
	border: 1px solid var(--garis) !important;
	border-radius: var(--radius) !important;
	padding: .85rem .6rem !important;
	text-align: center;
	height: 100%;
	transition: border-color .15s, background-color .15s !important;
}
html body .box-penilaian-glass:hover, html body .box-info-glass:hover { transform: none !important; background: var(--biru-050) !important; border-color: var(--biru-200) !important; }
html body .box-penilaian-glass small, html body .box-info-glass small {
	color: var(--teks-lembut) !important; font-size: .7rem !important; font-weight: 700 !important; letter-spacing: .06em !important;
}
html body .box-penilaian-glass h4, html body .box-info-glass h4 { color: var(--biru-900) !important; font-weight: 800 !important; margin: .2rem 0 0 !important; font-variant-numeric: tabular-nums; }

/* TOKEN AKTIF: identitas khas CBT, biru tua dengan token emas */
html body .kotak-token.kotak-token {
	background: linear-gradient(135deg, var(--biru-900), var(--biru-700)) !important;
	border: 1px solid rgba(246, 198, 1, .5) !important;
	box-shadow: 0 8px 20px rgba(0, 31, 71, .22) !important;
}
html body .kotak-token.kotak-token small { color: rgba(255, 255, 255, .78) !important; }
html body .kotak-token.kotak-token #token-view,
html body .kotak-token.kotak-token h4 {
	color: var(--emas-400) !important;
	letter-spacing: .18em !important;
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace !important;
	font-weight: 800 !important;
}

/* Daftar aktivitas & pengumuman di dasbor */
html body #log-list .item {
	background: var(--abu-050) !important;
	-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
	border: 1px solid var(--garis) !important;
	border-radius: var(--radius) !important;
	box-shadow: none !important;
	padding: .65rem .8rem !important;
	margin-bottom: .5rem !important;
}
html body #log-list .item:hover { transform: none !important; background: var(--biru-050) !important; }
html body #log-list .item span, html body #log-list .item .text-muted { color: var(--abu-700) !important; }
html body #log-list .log-item { display: flex; align-items: flex-start; gap: .65rem; }
html body #log-list .log-avatar { flex: none; pointer-events: none; }
html body #log-list .log-isi { flex: 1; min-width: 0; line-height: 1.35; }
html body #log-list .log-baris { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
html body #log-list .log-baris b { color: var(--biru-900); font-weight: 600; font-size: .88rem; }
html body #pengumuman .card, html body #pengumuman .card-default {
	background: #fff !important;
	-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
	border: 1px solid var(--garis) !important;
	border-radius: var(--radius) !important;
	box-shadow: none !important;
}
html body #pengumuman .card-body { color: var(--teks) !important; font-weight: 400 !important; }
html body .table-sm-custom thead { background: var(--abu-050) !important; color: var(--abu-700) !important; }

/* Strip tab kelas di kartu dasbor: satu baris, bisa digeser menyamping */
html body .card .nav-pills.flex-nowrap { flex-wrap: nowrap !important; overflow-x: auto; gap: .35rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html body .card .nav-pills.flex-nowrap::-webkit-scrollbar { display: none; }
html body .card .nav-pills.flex-nowrap .nav-link { white-space: nowrap; padding: .35rem .85rem !important; font-size: .8rem; }

/* ================= Siswa ================= */
.sticky { background-color: var(--biru-800); background-image: url("../img/bgx-biru.jpg"); }
html body .main-header.navbar-green {
	background: rgba(0, 31, 71, .92) !important;
	border-bottom: 2px solid var(--emas-400) !important;
	box-shadow: 0 2px 16px rgba(0, 31, 71, .18) !important;
}
.jadwal-cbt .card-header .card-tools,
.jadwal-cbt .card-header .card-tools b,
.jadwal-cbt .card-header .card-tools i { color: var(--abu-600) !important; }

/* ================= Siswa: dasbor CBT & halaman konfirmasi ================= */
html body.layout-top-nav .card.my-shadow {
	background: #fff !important; color: var(--teks) !important;
	border: 1px solid var(--garis) !important; border-radius: var(--radius-l) !important;
	box-shadow: var(--bayang-1) !important; margin-bottom: 1.25rem !important; overflow: hidden;
}
html body.layout-top-nav .card.my-shadow > .card-header {
	background: transparent !important; color: var(--biru-900) !important;
	border-bottom: 1px solid var(--garis) !important; padding: .85rem 1.1rem !important; font-size: 1rem !important;
}
html body.layout-top-nav .card.my-shadow > .card-header > .text-center,
html body.layout-top-nav .card.my-shadow > .card-header > h5 {
	display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .5rem;
	margin: 0; text-align: left !important;
	font-size: 1rem; font-weight: 700; color: var(--biru-900); line-height: 1.35;
}
html body.layout-top-nav .card.my-shadow > .card-header > .text-center::before,
html body.layout-top-nav .card.my-shadow > .card-header > h5::before {
	content: ""; width: 4px; height: 1.05em; border-radius: 4px; flex: none;
	background: linear-gradient(180deg, var(--emas-400), var(--emas-600));
}
html body.layout-top-nav .card.my-shadow > .card-header > h5 br { flex-basis: 100%; content: ""; }
html body.layout-top-nav .card.my-shadow > .card-body { background: #fff !important; color: var(--teks) !important; padding: 1rem 1.1rem !important; }
html body.layout-top-nav .card.my-shadow .card.border { border: 1px solid var(--garis) !important; border-radius: var(--radius) !important; box-shadow: none !important; }
html body.layout-top-nav .card.my-shadow .card.border .card-title { color: var(--biru-900) !important; font-size: 1rem; }
html body.layout-top-nav .card.my-shadow .card.border > .card-header { background: transparent !important; border: 0 !important; padding: .75rem .9rem .25rem !important; }
html body.layout-top-nav .card.my-shadow .card.border > .card-body { padding: 0 .9rem .5rem !important; }
html body.layout-top-nav .card.my-shadow .list-group-item {
	background: transparent !important; color: var(--abu-700) !important;
	border: 0 !important; border-bottom: 1px dashed var(--garis) !important;
	padding: .5rem 0 !important; font-size: .92rem;
}
html body.layout-top-nav .card.my-shadow .list-group-item:last-child { border-bottom: 0 !important; }
html body.layout-top-nav .card.my-shadow .alert.alert-default-danger {
	background: #fff8f8 !important; border: 1px solid #f5c9c9 !important; color: var(--abu-800) !important;
	border-radius: var(--radius) !important; font-size: .9rem !important; line-height: 1.6 !important;
}
html body.layout-top-nav .card.my-shadow .alert.alert-default-danger ul { margin: .4rem 0 0; padding-left: 1.2rem; }
html body.layout-top-nav .card.my-shadow .alert-default-warning { border-radius: var(--radius); background: var(--emas-100) !important; border: 1px solid rgba(201, 159, 0, .35) !important; color: var(--abu-800) !important; }

/* Pesan ujian dikunci / browser tak didukung di halaman konfirmasi */
html body .pesan-kunci { text-align: center; padding: 1.25rem .75rem .5rem; }
html body .pesan-kunci .ikon {
	width: 3.25rem; height: 3.25rem; margin: 0 auto .75rem; display: grid; place-items: center;
	border-radius: 50%; background: var(--merah-100); color: var(--merah-600); font-size: 1.3rem;
}
html body .pesan-kunci h3 { font-size: 1.2rem; font-weight: 800; color: var(--biru-900); margin: 0 0 .35rem; }
html body .pesan-kunci p { color: var(--abu-600); font-size: .92rem; margin: 0 auto 1rem; max-width: 30ch; }

html body #load-soal { min-width: 9rem; height: 2.9rem; font-weight: 800; letter-spacing: .04em; border-radius: var(--radius); }
@media (max-width: 576px) {
	html body span.float-right:has(> #load-soal) { float: none !important; display: block; }
	html body #load-soal { width: 100%; }
}

/* Kartu jadwal: biru = siap dikerjakan, emas = sedang berlangsung, hijau = selesai */
html body .jadwal-cbt { margin-bottom: 1rem; }
html body .jadwal-cbt > .card.border {
	height: 100%; margin: 0; overflow: hidden;
	border: 1px solid var(--garis) !important; border-radius: var(--radius-l) !important; box-shadow: var(--bayang-1) !important;
}
html body .jadwal-cbt > .card > .card-header { background: var(--abu-050) !important; padding: .6rem .9rem !important; border-bottom: 1px solid var(--garis) !important; }
html body .jadwal-cbt > .card > .card-header .card-title { font-size: .85rem; color: var(--abu-700); }
html body .jadwal-cbt .small-box { border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
html body .jadwal-cbt > .card > .card-body { padding: 0 !important; background: transparent !important; }
html body .jadwal-cbt > .card > .card-header .card-tools,
html body .jadwal-cbt > .card > .card-header .card-tools b { font-size: .82rem; font-weight: 600; }
html body .jadwal-cbt .small-box > .inner { padding: 1rem 1rem .9rem; }
html body .jadwal-cbt .small-box > .inner h6 { font-size: 1.02rem; margin-bottom: .25rem; }
html body .jadwal-cbt .small-box > .inner h5 { font-size: .85rem; font-weight: 600; opacity: .9; margin: 0; }
html body .jadwal-cbt .small-box .icon { color: rgba(255, 255, 255, .18); }
html body .jadwal-cbt .small-box > hr { border-top-color: rgba(255, 255, 255, .18); }
html body .jadwal-cbt .small-box.bg-gradient-danger { background: linear-gradient(135deg, var(--biru-800), var(--biru-600)) !important; color: #fff !important; }
html body .jadwal-cbt .small-box.bg-gradient-warning { background: linear-gradient(135deg, var(--emas-500), var(--emas-400)) !important; color: var(--biru-900) !important; }
html body .jadwal-cbt .small-box.bg-gradient-warning .icon { color: rgba(0, 31, 71, .14); }
html body .jadwal-cbt .small-box.bg-gradient-success { background: linear-gradient(135deg, #116b33, var(--hijau-600)) !important; color: #fff !important; }
html body .jadwal-cbt .small-box > .small-box-footer {
	display: block; width: 100%; border: 0; border-radius: 0 !important;
	padding: .7rem 1rem !important; font-size: .9rem; letter-spacing: .02em;
	background: rgba(0, 0, 0, .14) !important; color: inherit !important;
}
html body .jadwal-cbt .small-box > button.small-box-footer.btn:not(:disabled) {
	background: var(--emas-400) !important; color: var(--biru-900) !important; font-weight: 800;
	transition: background-color .15s;
}
html body .jadwal-cbt .small-box > button.small-box-footer.btn:not(:disabled):hover { background: var(--emas-500) !important; }
html body .jadwal-cbt .small-box.bg-gradient-warning > button.small-box-footer.btn:not(:disabled) { background: var(--biru-800) !important; color: #fff !important; }
html body .jadwal-cbt .small-box.bg-gradient-warning > button.small-box-footer.btn:not(:disabled):hover { background: var(--biru-900) !important; }

/* Profil siswa di pita atas: ringkas */
html body.layout-top-nav .info-box.bg-transparent { min-height: 0; padding: .25rem 0 .5rem; align-items: center; }
html body.layout-top-nav .info-box.bg-transparent .avatar {
	width: 64px !important; height: 64px !important; flex: none;
	border-radius: 50%; object-fit: cover; background: #fff;
	border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}
html body.layout-top-nav .info-box.bg-transparent .info-box-content { padding: 0 0 0 .85rem; line-height: 1.3; }
html body.layout-top-nav .info-box.bg-transparent .info-box-text { font-size: .85rem; opacity: .9; }
html body.layout-top-nav .info-box.bg-transparent h5.info-box-text { font-size: 1.05rem; opacity: 1; margin-bottom: .1rem; }

/* ================= Layar ujian siswa ================= */
/* teks pilihan & dialog tidak rata kanan-kiri (jarak antarkata melebar di HP); `start` menghormati teks Arab (RTL) */
html body.mode-ujian #konten-jawaban,
html body.mode-ujian #konten-jawaban label,
html body.mode-ujian .swal2-html-container,
html body.mode-ujian .swal-glass-html { text-align: start !important; text-justify: auto !important; }
html body.mode-ujian .swal2-popup .swal2-title.swal-glass-title { color: #c62828 !important; }

/* ================= Footer ================= */
html body .main-footer { border-top: 1px solid var(--garis); background: #fff; color: var(--abu-600); font-size: .85rem; }
html body .main-footer a { color: var(--biru-600); }

/* ================= Ponsel ================= */
@media (max-width: 576px) {
	html body .content-wrapper > .content { padding-left: .25rem; padding-right: .25rem; }
	html body .small-box-glass h5, html body .small-box-glass h5 b { font-size: 1.25rem !important; }
	html body .small-box-glass .inner { padding: .75rem .8rem .5rem !important; }
	html body .small-box-glass .inner h5 { padding-right: 2.4rem; min-height: 2.1rem; }
	html body .small-box-glass .icon { width: 2.1rem; height: 2.1rem; top: .7rem !important; right: .7rem !important; }
	html body .small-box-glass .inner span, html body .small-box-glass .inner p { display: block; font-size: .76rem !important; }
	html body .card > .card-header, html body .glass-card > .card-header { padding: .75rem .9rem !important; }
}

/* =====================================================================
 * v2.1 (2 Nov 2026) — nuansa biru lembut yang dominan + lis (garis aksen)
 * Permintaan pemilik: "clean" = tetap biru halus, smooth, berlis — bukan putih-abu.
 * Lapisan ini sengaja di akhir berkas agar menimpa nilai netral di atas.
 * ===================================================================== */
:root {
	--biru-150: #e4edfa;
	--garis-biru: #d3e1f5;
	--latar: radial-gradient(1100px 620px at -10% -12%, rgba(26, 98, 196, .20), transparent 62%),
		radial-gradient(800px 520px at 112% -4%, rgba(246, 198, 1, .10), transparent 60%),
		radial-gradient(900px 640px at 50% 118%, rgba(0, 74, 173, .12), transparent 62%),
		linear-gradient(180deg, #eaf1fb 0%, #dfe9f8 100%);
	--lis: linear-gradient(90deg, var(--biru-700), var(--biru-500) 70%, var(--emas-400));
}
html body .content-wrapper { color: var(--teks); }

/* Kartu: putih kebiruan, garis biru, lis biru di tepi atas (kartu bersarang tidak ikut) */
html body .card,
html body .glass-card {
	background: linear-gradient(180deg, #fff 0%, #fbfdff 100%) !important;
	border-color: var(--garis-biru) !important;
	box-shadow: 0 1px 2px rgba(0, 45, 107, .05), 0 8px 24px rgba(0, 45, 107, .07) !important;
}
html body .card:not(.card .card) { border-top-width: 0 !important; }
html body .card:not(.card .card)::before {
	content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 3px;
	border-radius: var(--radius-l) var(--radius-l) 0 0;
	background: var(--lis);
	pointer-events: none;
}
/* kotak gulir daftar aktivitas: batang gulir tipis */
html body #log-list { scrollbar-width: thin; scrollbar-color: var(--biru-200) transparent; }
html body #log-list::-webkit-scrollbar { width: 5px; }
html body #log-list::-webkit-scrollbar-thumb { background: var(--biru-200); border-radius: 5px; }
html body .card > .card-header,
html body .glass-card > .card-header {
	background: linear-gradient(180deg, var(--biru-050) 0%, rgba(238, 244, 252, 0) 100%) !important;
	border-bottom: 1px solid var(--garis-biru) !important;
}
html body .card .card { border-color: var(--garis-biru) !important; }
html body .card-footer { background: var(--biru-050) !important; border-top-color: var(--garis-biru) !important; }

/* Navbar: biru sangat muda + lis biru→emas di bawahnya */
html body .main-header.navbar:not(.navbar-green) {
	background: rgba(242, 247, 254, .9) !important;
	border-bottom: 1px solid var(--garis-biru) !important;
	box-shadow: 0 4px 18px rgba(0, 45, 107, .07) !important;
}
html body .main-header.navbar::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
	background: var(--lis); opacity: .85; pointer-events: none;
}

/* Sidebar: gradasi biru lembut, garis biru di sisi kanan */
html body .main-sidebar {
	background: linear-gradient(180deg, #f5f9fe 0%, #e8f0fc 100%) !important;
	border-right: 1px solid var(--garis-biru) !important;
	box-shadow: 2px 0 18px rgba(0, 45, 107, .07) !important;
}
html body .main-sidebar .brand-link { background: linear-gradient(180deg, #fff, #f5f9fe) !important; border-bottom: 1px solid var(--garis-biru) !important; }
html body .main-sidebar .user-panel { background: #fff !important; border-color: var(--garis-biru) !important; box-shadow: 0 2px 8px rgba(0, 45, 107, .05); }
html body .main-sidebar .nav-sidebar .nav-link:hover { background: var(--biru-150) !important; }
html body .main-sidebar .nav-treeview .nav-link.active { background: #fff !important; box-shadow: inset 3px 0 0 var(--biru-600) !important; }

/* Kartu statistik: kebiruan dengan lis warna di sisi kiri (senada ikonnya) */
html body .small-box-glass {
	background: linear-gradient(150deg, #fff 0%, #f2f7fe 100%) !important;
	border-color: var(--garis-biru) !important;
	border-left: 4px solid var(--biru-600) !important;
}
html body .small-box-glass:hover { background: linear-gradient(150deg, #fff 0%, #eaf2fd 100%) !important; }
html body .row > div:nth-child(6n+2) > .small-box-glass { border-left-color: var(--emas-500) !important; }
html body .row > div:nth-child(6n+3) > .small-box-glass { border-left-color: var(--teal-600) !important; }
html body .row > div:nth-child(6n+4) > .small-box-glass { border-left-color: var(--hijau-600) !important; }
html body .row > div:nth-child(6n+5) > .small-box-glass { border-left-color: var(--biru-700) !important; }
html body .row > div:nth-child(6n) > .small-box-glass { border-left-color: var(--merah-600) !important; }
html body .small-box-glass .small-box-footer { background: var(--biru-050) !important; border-top-color: var(--garis-biru) !important; }
html body .box-penilaian-glass:not(.kotak-token), html body .box-info-glass {
	background: linear-gradient(160deg, #fff 0%, var(--biru-050) 100%) !important;
	border-color: var(--garis-biru) !important;
	border-top: 3px solid var(--biru-500) !important;
}

/* Tabel, daftar, kotak isian: garis biru */
html body .table thead th { background: var(--biru-050); color: var(--biru-800); border-bottom-color: var(--garis-biru); }
html body .table td, html body .table th { border-color: var(--garis-biru); }
html body .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(238, 244, 252, .55); }
html body #log-list .item { background: linear-gradient(160deg, #fff 0%, var(--biru-050) 100%) !important; border-color: var(--garis-biru) !important; }
html body .form-control, html body .custom-select, html body .input-group-text,
html body .select2-container--bootstrap4 .select2-selection { border-color: #c9d9f0; }
html body .input-group-text { background: var(--biru-050); color: var(--biru-700); }
html body .nav-pills .nav-link:not(.active) { background: var(--biru-050); }
html body .main-footer { background: rgba(242, 247, 254, .9); border-top-color: var(--garis-biru); }

/* Siswa: kartu jadwal & profil ikut garis biru */
html body .jadwal-cbt > .card.border { border-color: var(--garis-biru) !important; }
html body .jadwal-cbt > .card > .card-header { background: var(--biru-050) !important; border-bottom-color: var(--garis-biru) !important; }
html body.layout-top-nav .card.my-shadow > .card-header { background: linear-gradient(180deg, var(--biru-050) 0%, rgba(238, 244, 252, 0) 100%) !important; border-bottom-color: var(--garis-biru) !important; }
html body.layout-top-nav .card.my-shadow .list-group-item { border-bottom-color: var(--garis-biru) !important; }

/* Token: satu baris, mengecil di kotak sempit (dulu terpotong jadi "ODOR / YZ") */
html body .kotak-token.kotak-token #token-view,
html body .kotak-token.kotak-token h4 { white-space: nowrap; font-size: clamp(1.05rem, 2.4vw, 1.5rem) !important; letter-spacing: .12em !important; }
html body .kotak-token.kotak-token small { white-space: nowrap; }

/* Login: panel formulir biru lembut, bingkai & isian bergaris biru */
html body .masuk-bingkai { border-color: var(--garis-biru); box-shadow: 0 2px 4px rgba(0, 45, 107, .05), 0 22px 50px rgba(0, 45, 107, .14); }
html body .masuk-form { background: linear-gradient(180deg, #fff 0%, #f3f8fe 100%); }
html body .masuk-form .input-group { border-color: #c9d9f0; background: #fff; }
html body .masuk-form .input-group-text { color: var(--biru-500); }
html body .masuk-form .masuk-kaki { border-top: 1px solid var(--garis-biru); padding-top: 1rem; }

/* Siswa: tepi halaman ikut biru lembut (header siswa memasang abu #f4f6f9 di body) */
html body.layout-top-nav:not(.mode-ujian) { background: #dfe9f8 !important; }

/* =====================================================================
 * v3 (2 Nov 2026) — lebih hidup, tidak polos (permintaan pemilik):
 * motif geometris islami samar, pendar cahaya, kartu kaca ala DIGILAB,
 * hero bersapaan + ornamen, barisan ikon menu bulat ala web madrasah.
 * Blur kaca hanya di layar >= 768px agar HP kelas bawah tetap ringan.
 * ===================================================================== */
:root {
	/* bintang delapan (khatam) tipis, ubin 64px — SVG sebaris, tanpa unduhan */
	--motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23004aad' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M32 8l7 17 17 7-17 7-7 17-7-17-17-7 17-7z'/%3E%3Cpath d='M15 15h34v34H15z' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3C/g%3E%3C/svg%3E");
	--latar: var(--motif) repeat,
		radial-gradient(1100px 620px at -10% -12%, rgba(26, 98, 196, .24), transparent 62%),
		radial-gradient(800px 520px at 112% -4%, rgba(246, 198, 1, .13), transparent 60%),
		radial-gradient(900px 640px at 50% 118%, rgba(0, 74, 173, .16), transparent 62%),
		linear-gradient(180deg, #e7effb 0%, #d9e6f8 100%);
}

/* Kartu kaca */
html body .card:not(.card .card),
html body .glass-card {
	background: rgba(255, 255, 255, .86) !important;
	border: 1px solid rgba(255, 255, 255, .9) !important;
	box-shadow: 0 1px 2px rgba(0, 45, 107, .06), 0 10px 30px rgba(0, 45, 107, .10) !important;
}
@media (min-width: 768px) {
	html body .card:not(.card .card),
	html body .glass-card,
	html body .small-box-glass,
	html body .menu-cepat a {
		-webkit-backdrop-filter: blur(14px) saturate(140%) !important;
		backdrop-filter: blur(14px) saturate(140%) !important;
	}
	html body .card:not(.card .card), html body .glass-card { background: rgba(255, 255, 255, .74) !important; }
}
html body .card > .card-header,
html body .glass-card > .card-header {
	background: linear-gradient(90deg, rgba(219, 231, 248, .75) 0%, rgba(238, 244, 252, .35) 55%, transparent 100%) !important;
}

/* Hero: ornamen lingkaran & kisi titik, sapaan, tombol aksi */
html body .content-wrapper > .hero-header.hero-mansaka { padding-bottom: clamp(4.2rem, 7vw, 5.2rem) !important; }
html body .content-wrapper > .hero-header.hero-mansaka::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		radial-gradient(circle at 92% 18%, rgba(246, 198, 1, .22) 0 70px, transparent 71px),
		radial-gradient(circle at 92% 18%, transparent 0 96px, rgba(255, 255, 255, .14) 97px 98px, transparent 99px),
		radial-gradient(circle at 78% 115%, rgba(255, 255, 255, .10) 0 150px, transparent 151px),
		radial-gradient(rgba(255, 255, 255, .22) 1.2px, transparent 1.6px) 0 0 / 16px 16px;
	-webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 75%);
	mask-image: linear-gradient(90deg, transparent 35%, #000 75%);
}
html body .hero-mansaka .hero-sapa { margin: .9rem 0 0; color: rgba(255, 255, 255, .9); font-size: .95rem; }
html body .hero-mansaka .hero-sapa b { color: var(--emas-400); font-weight: 700; }
html body .hero-mansaka .hero-sapa span { color: rgba(255, 255, 255, .7); }
html body .hero-mansaka .hero-aksi { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
html body .hero-mansaka .hero-aksi .btn { border-radius: 999px; padding: .5rem 1.15rem; font-size: .88rem; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
html body .btn-kaca {
	background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .45); color: #fff !important;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html body .btn-kaca:hover { background: rgba(255, 255, 255, .22); color: #fff !important; }

/* Barisan ikon menu bulat (ala deretan "Aplikasi" di web madrasah) */
html body .menu-cepat {
	display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem;
	margin: .25rem .5rem 1.25rem;
}
html body .menu-cepat a {
	display: flex; flex-direction: column; align-items: center; gap: .5rem;
	padding: 1rem .5rem .85rem; text-align: center; text-decoration: none !important;
	background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .9);
	border-radius: var(--radius-l); box-shadow: 0 1px 2px rgba(0, 45, 107, .06), 0 8px 22px rgba(0, 45, 107, .09);
	color: var(--biru-900) !important; font-weight: 600; font-size: .85rem;
	transition: transform .18s ease, box-shadow .18s ease;
}
html body .menu-cepat a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 45, 107, .16); }
html body .menu-cepat .ikon {
	width: 3.1rem; height: 3.1rem; border-radius: 50%; display: grid; place-items: center;
	background: linear-gradient(145deg, var(--biru-500), var(--biru-800)); color: #fff; font-size: 1.15rem;
	box-shadow: 0 6px 14px rgba(0, 74, 173, .3), inset 0 0 0 3px rgba(255, 255, 255, .25);
}
html body .menu-cepat a:nth-child(2) .ikon { background: linear-gradient(145deg, #f6c601, #c99f00); color: var(--biru-900); box-shadow: 0 6px 14px rgba(201, 159, 0, .3), inset 0 0 0 3px rgba(255, 255, 255, .3); }
html body .menu-cepat a:nth-child(3) .ikon { background: linear-gradient(145deg, #14b8a6, #0f766e); box-shadow: 0 6px 14px rgba(15, 118, 110, .3), inset 0 0 0 3px rgba(255, 255, 255, .25); }
html body .menu-cepat a:nth-child(4) .ikon { background: linear-gradient(145deg, #1e3a8a, #001f47); }
html body .menu-cepat a:nth-child(5) .ikon { background: linear-gradient(145deg, #22a35a, #15803d); box-shadow: 0 6px 14px rgba(21, 128, 61, .3), inset 0 0 0 3px rgba(255, 255, 255, .25); }
html body .menu-cepat a:nth-child(6) .ikon { background: linear-gradient(145deg, #e05656, #c62828); box-shadow: 0 6px 14px rgba(198, 40, 40, .3), inset 0 0 0 3px rgba(255, 255, 255, .25); }
@media (max-width: 991px) { html body .menu-cepat { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 576px) {
	html body .menu-cepat { gap: .5rem; margin: 0 .25rem 1rem; }
	html body .menu-cepat a { padding: .8rem .35rem .7rem; font-size: .76rem; }
	html body .menu-cepat .ikon { width: 2.6rem; height: 2.6rem; font-size: 1rem; }
	html body .hero-mansaka .hero-aksi .btn { font-size: .8rem; padding: .45rem .9rem; }
}

/* Kartu statistik: rona warna lembut sesuai lis & ikonnya */
html body .small-box-glass { background: linear-gradient(150deg, rgba(255, 255, 255, .92) 35%, rgba(219, 231, 248, .9) 100%) !important; }
html body .row > div:nth-child(6n+2) > .small-box-glass { background: linear-gradient(150deg, rgba(255, 255, 255, .92) 35%, rgba(253, 243, 208, .95) 100%) !important; }
html body .row > div:nth-child(6n+3) > .small-box-glass { background: linear-gradient(150deg, rgba(255, 255, 255, .92) 35%, rgba(204, 251, 241, .9) 100%) !important; }
html body .row > div:nth-child(6n+4) > .small-box-glass { background: linear-gradient(150deg, rgba(255, 255, 255, .92) 35%, rgba(220, 252, 231, .9) 100%) !important; }
html body .row > div:nth-child(6n+5) > .small-box-glass { background: linear-gradient(150deg, rgba(255, 255, 255, .92) 35%, rgba(191, 212, 240, .7) 100%) !important; }
html body .row > div:nth-child(6n) > .small-box-glass { background: linear-gradient(150deg, rgba(255, 255, 255, .92) 35%, rgba(253, 228, 228, .95) 100%) !important; }
html body .small-box-glass .small-box-footer { background: rgba(255, 255, 255, .55) !important; }

/* Sidebar: kartu profil biru tua bercahaya */
html body .main-sidebar .user-panel {
	background: linear-gradient(135deg, var(--biru-800), var(--biru-600)) !important;
	border: 0 !important; box-shadow: 0 8px 18px rgba(0, 45, 107, .25) !important;
	position: relative; overflow: hidden !important;
}
html body .main-sidebar .user-panel::after {
	content: ""; position: absolute; right: -18px; top: -18px; width: 70px; height: 70px; border-radius: 50%;
	background: rgba(246, 198, 1, .22); pointer-events: none;
}
html body .main-sidebar .user-panel .info, html body .main-sidebar .user-panel .info a { color: #fff !important; }
html body .main-sidebar .user-panel .info small, html body .main-sidebar .user-panel .info span { color: rgba(255, 255, 255, .8) !important; }
html body .main-sidebar .user-panel img { border: 2px solid rgba(255, 255, 255, .8); }

/* Ponsel: ikon menu cepat di atas kartu statistik (lebih sering dipakai) */
@media (max-width: 767px) {
	html body .hero-mansaka + .content > .container-fluid { display: flex; flex-direction: column; }
	html body .hero-mansaka + .content > .container-fluid > .menu-cepat { order: -1; margin-top: 0; }
}

/* Siswa: pita biru atas berornamen + sapaan */
html body.layout-top-nav .sticky { position: relative; overflow: hidden; }
html body.layout-top-nav .sticky::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(circle at 88% 30%, rgba(246, 198, 1, .25) 0 46px, transparent 47px),
		radial-gradient(circle at 88% 30%, transparent 0 66px, rgba(255, 255, 255, .16) 67px 68px, transparent 69px),
		radial-gradient(circle at 8% 110%, rgba(255, 255, 255, .10) 0 120px, transparent 121px),
		linear-gradient(180deg, rgba(0, 31, 71, .15), rgba(0, 31, 71, .45));
}
html body.layout-top-nav .info-box.bg-transparent .sapa-siswa { display: block; font-size: .8rem; color: var(--emas-400); font-weight: 600; letter-spacing: .02em; }

/* Kartu jadwal siswa: kotak mapel & tombol menempel ke tepi kartu, sudut bawah ikut membulat
   (aturan padding kartu profil .card.border > .card-body sebelumnya ikut mengenai kartu ini) */
html body.layout-top-nav .card.my-shadow .jadwal-cbt > .card.border { border-radius: var(--radius-l) !important; overflow: hidden; }
html body.layout-top-nav .card.my-shadow .jadwal-cbt > .card.border > .card-body { padding: 0 !important; }
html body.layout-top-nav .card.my-shadow .jadwal-cbt > .card.border > .card-header { border-radius: 0 !important; }
html body .jadwal-cbt .small-box { border-radius: 0 0 var(--radius-l) var(--radius-l) !important; overflow: hidden; }
html body .jadwal-cbt .small-box > .small-box-footer:last-child { border-radius: 0 0 var(--radius-l) var(--radius-l) !important; }

/* =====================================================================
 * v3.1 (2 Nov 2026) — masukan pemilik: garis sidebar & topbar selaras,
 * pemisah menu yang menarik, tombol Keluar selalu terlihat, hero lebih bersih
 * dengan ilustrasi yang tampak dan tepi sejajar barisan kartu.
 * ===================================================================== */

/* 1. Satu garis lis yang menyambung dari brand sidebar ke topbar (tinggi keduanya 57px) */
html body .main-sidebar .brand-link { box-shadow: none !important; border-bottom: 0 !important; position: relative; }
html body .main-sidebar .brand-link::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
	background: var(--biru-700);
}
html body .main-header.navbar { border-bottom: 0 !important; }
html body .main-header.navbar::after { bottom: 0 !important; height: 2px !important; opacity: 1 !important; }

/* 2a. Kartu profil: jabatan tidak terpotong */
html body .main-sidebar .user-panel { align-items: center; padding: .65rem .6rem !important; margin: 14px 8px 4px !important; }
html body .main-sidebar .user-panel .image { flex: none; padding-left: 0 !important; }
html body .main-sidebar .user-panel .info {
	white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
	line-height: 1.25 !important; padding: 0 0 0 .6rem !important; min-width: 0;
}
html body .main-sidebar .user-panel .info a { font-size: .86rem; font-weight: 700; white-space: normal !important; }
html body .main-sidebar .user-panel .info small { display: block; margin-top: .15rem; font-size: .7rem !important; font-weight: 600 !important; line-height: 1.25; }

/* 2b. Pemisah kelompok menu: label kecil + permata emas + garis memudar */
html body .main-sidebar .nav-sidebar > .nav-header {
	display: flex !important; align-items: center; gap: .5rem;
	padding: 1.1rem .9rem .45rem !important; margin-top: .25rem !important;
	font-size: .66rem !important; letter-spacing: .12em; color: var(--biru-700) !important;
}
html body .main-sidebar .nav-sidebar > .nav-header::before {
	content: ""; width: 7px; height: 7px; flex: none; transform: rotate(45deg); border-radius: 1px;
	background: linear-gradient(135deg, var(--emas-400), var(--emas-600));
	box-shadow: 0 0 0 3px rgba(246, 198, 1, .18);
}
html body .main-sidebar .nav-sidebar > .nav-header::after {
	content: ""; flex: 1; height: 1px;
	background: linear-gradient(90deg, var(--biru-200), rgba(191, 212, 240, 0));
}
html body .main-sidebar .nav-sidebar > hr { display: none; }

/* 2c. Ikon menu dalam "chip" putih — tidak monoton */
html body .main-sidebar .nav-sidebar > .nav-item > .nav-link { display: flex; align-items: center; padding: .38rem .6rem !important; margin: 0 8px 3px; width: auto !important; }
html body .main-sidebar .nav-sidebar > .nav-item > .nav-link > .nav-icon {
	flex: none; width: 1.95rem !important; height: 1.95rem; margin: 0 .6rem 0 0 !important;
	display: inline-grid !important; place-items: center; font-size: .85rem !important;
	background: #fff; color: var(--biru-600) !important; border-radius: 9px;
	box-shadow: 0 1px 2px rgba(0, 45, 107, .08), inset 0 0 0 1px var(--garis-biru);
}
html body .main-sidebar .nav-sidebar > .nav-item > .nav-link > p { flex: 1; margin: 0; }
html body .main-sidebar .nav-sidebar > .nav-item > .nav-link > p > .right { top: 50% !important; transform: translateY(-50%); }
html body .main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link > p > .right { transform: translateY(-50%) rotate(-90deg); }
html body .main-sidebar .nav-sidebar > .nav-item > .nav-link.active > .nav-icon,
html body .main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link > .nav-icon {
	background: rgba(255, 255, 255, .18); color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
html body .main-sidebar .nav-treeview { margin: 2px 0 6px; padding-left: .35rem; border-left: 2px solid var(--biru-100); margin-left: 1.6rem !important; }
html body .main-sidebar .nav-treeview > .nav-item > .nav-link { padding: .32rem .6rem !important; margin: 0 8px 1px 4px; font-size: .86rem; }
html body .main-sidebar .nav-treeview > .nav-item > .nav-link > .nav-icon { font-size: .8rem !important; width: 1.4rem !important; }

/* 3. Kaki sidebar: tombol Keluar selalu terlihat (menu tergulir di atasnya) */
html body .main-sidebar { display: flex !important; flex-direction: column; }
html body .main-sidebar > .sidebar { flex: 1 1 auto; min-height: 0; height: auto !important; overflow-y: auto !important; }
html body .main-sidebar > .sidebar nav { margin-bottom: .75rem !important; }
html body #tree-menus li:has(> a[onclick^="logout"]) { display: none; }
html body .sidebar-kaki {
	flex: none; padding: .6rem 8px .75rem;
	border-top: 1px solid var(--garis-biru);
	background: linear-gradient(180deg, rgba(232, 240, 252, .6), #e8f0fc);
}
html body .tombol-keluar {
	display: flex; align-items: center; justify-content: center; gap: .55rem;
	padding: .55rem .75rem; border-radius: 10px;
	background: #fff; color: var(--merah-600) !important; font-weight: 700; font-size: .88rem;
	box-shadow: 0 1px 2px rgba(0, 45, 107, .08), inset 0 0 0 1px #f3c7c7;
	text-decoration: none !important; transition: background-color .15s, color .15s;
}
html body .tombol-keluar:hover { background: var(--merah-600); color: #fff !important; box-shadow: none; }
html body.sidebar-collapse:not(.sidebar-open) .main-sidebar:not(:hover) .tombol-keluar span { display: none; }
html body.sidebar-collapse:not(.sidebar-open) .main-sidebar:not(:hover) .sidebar-kaki { padding-left: 4px; padding-right: 4px; }

/* 4. Hero: tepi sejajar barisan kartu, teks ringkas, ilustrasi tampak jelas */
html body .content-wrapper > .hero-header.hero-mansaka {
	margin: 1rem 1.5rem 0 !important;
	min-height: 300px;
	padding: 2.25rem 0 4.75rem !important;
	background:
		linear-gradient(90deg, rgba(0, 31, 71, .96) 0%, rgba(0, 38, 92, .9) 30%, rgba(0, 45, 107, .55) 52%, rgba(0, 58, 138, .12) 72%, rgba(0, 58, 138, 0) 100%),
		url("../img/hero-cbt.webp") no-repeat 72% 38% / cover,
		var(--biru-800) !important;
}
html body .content-wrapper > .hero-header.hero-mansaka::before {
	background: radial-gradient(rgba(255, 255, 255, .16) 1.1px, transparent 1.5px) 0 0 / 18px 18px !important;
	-webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .6) 30%, transparent 48%) !important;
	mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .6) 30%, transparent 48%) !important;
}
html body .hero-mansaka .hero-isi { padding: 0 2.25rem !important; max-width: 560px; margin: 0 !important; }
html body .hero-mansaka .hero-label { margin-bottom: .9rem; }
html body .hero-mansaka .hero-school-name { font-size: clamp(1.9rem, 3.4vw, 2.7rem) !important; margin-bottom: .6rem !important; }
html body .hero-mansaka .hero-sapa { margin: 0; font-size: 1.08rem; color: #fff; }
html body .hero-mansaka .hero-sapa b { color: var(--emas-400); }
html body .hero-mansaka .hero-tanggal { margin: .3rem 0 0; font-size: .85rem; color: rgba(255, 255, 255, .72); }
html body .hero-mansaka .hero-tanggal i { margin-right: .3rem; color: rgba(255, 255, 255, .6); }
html body .hero-mansaka .hero-aksi { margin-top: 1.25rem; }
@media (max-width: 768px) {
	html body .content-wrapper > .hero-header.hero-mansaka {
		margin: .75rem .75rem 0 !important; min-height: 0; padding: 1.5rem 0 4.5rem !important; text-align: center !important;
		background:
			linear-gradient(180deg, rgba(0, 31, 71, .88) 0%, rgba(0, 45, 107, .78) 55%, rgba(0, 58, 138, .7) 100%),
			url("../img/hero-cbt.webp") no-repeat 65% 35% / cover,
			var(--biru-800) !important;
	}
	html body .content-wrapper > .hero-header.hero-mansaka::before { -webkit-mask-image: none !important; mask-image: none !important; opacity: .5; }
	html body .hero-mansaka .hero-isi { padding: 0 1.25rem !important; max-width: none; text-align: center; }
	html body .hero-mansaka .hero-school-name { text-align: center !important; font-size: 1.9rem !important; }
	html body .hero-mansaka .hero-aksi { justify-content: center; }
}

/* Sidebar terlipat (ikon saja): sembunyikan label kelompok & rapikan kartu profil */
html body.sidebar-collapse:not(.sidebar-open) .main-sidebar:not(:hover) .nav-sidebar > .nav-header { display: none !important; }
html body.sidebar-collapse:not(.sidebar-open) .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link { margin: 0 6px 3px; justify-content: center; }
html body.sidebar-collapse:not(.sidebar-open) .main-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link > .nav-icon { margin: 0 !important; }
html body.sidebar-collapse:not(.sidebar-open) .main-sidebar:not(:hover) .user-panel { margin: 14px 6px 4px !important; padding: .45rem !important; justify-content: center; }
html body.sidebar-collapse:not(.sidebar-open) .main-sidebar:not(:hover) .user-panel::after { display: none; }

/* Sambungan sidebar–topbar: garis vertikal sidebar baru dimulai DI BAWAH garis horizontal (57px),
   jadi tidak lagi menembus garis lis; bayangan topbar dihapus agar kedua sisi garis identik */
html body .main-sidebar { border-right: 0 !important; box-shadow: none !important; }
html body .main-sidebar::after {
	content: ""; position: absolute; z-index: 5; top: 57px; bottom: 0; right: 0; width: 1px; pointer-events: none;
	background: var(--garis-biru);
	box-shadow: 2px 0 16px rgba(0, 45, 107, .08);
}
html body .main-header.navbar:not(.navbar-green) { box-shadow: none !important; }
html body .main-sidebar .brand-link::after { right: 0; }

/* Topbar admin/guru dikunci 57px = tinggi brand sidebar, jadi garis lis selalu satu garis lurus
   di zoom/font apa pun; pil jam berukuran tetap sejak awal (jam baru terisi saat onload,
   dulu membuat topbar tampil kecil lalu membesar ketika halaman di-refresh) */
html body .main-header.navbar:not(.navbar-green) {
	height: 57px !important; min-height: 57px !important; max-height: 57px;
	padding-top: 0 !important; padding-bottom: 0 !important;
	box-sizing: border-box; flex-wrap: nowrap !important; align-items: center !important;
}
html body .main-sidebar .brand-link { height: 57px !important; min-height: 57px; max-height: 57px; box-sizing: border-box; }
html body .main-header #live-clock {
	display: inline-flex !important; align-items: center; justify-content: center;
	height: 34px; min-width: 6.4rem; padding: 0 .8rem !important; line-height: 1 !important;
	white-space: nowrap; font-variant-numeric: tabular-nums;
}
html body .main-header .info-tp-smt { height: 30px; display: inline-flex !important; align-items: center; white-space: nowrap; }
html body.layout-navbar-fixed .wrapper .content-wrapper { margin-top: 57px !important; }

/* Menu sidebar: pada layout navbar-fixed AdminLTE membuat brand `position: fixed`, jadi area menu
   WAJIB berjarak setinggi brand (57px); tanpa ini profil & menu tertimbun di bawah brand */
html body.layout-navbar-fixed .wrapper .main-sidebar > .sidebar { margin-top: 57px !important; }

/* Garis lis atas: SATU garis selebar layar (bukan dua garis di brand & topbar yang bisa
   berselisih 1px karena pembulatan skala layar); melintas di atas sidebar dan topbar */
html body .main-sidebar .brand-link::after,
html body .main-header.navbar::after { display: none !important; }
html body.sidebar-mini.layout-navbar-fixed::before {
	content: ""; position: fixed; z-index: 1045; top: 55px; left: 0; right: 0; height: 2px; pointer-events: none;
	background: linear-gradient(90deg, var(--biru-700) 0, var(--biru-700) 250px, var(--biru-500) 75%, var(--emas-400));
}

/* =====================================================================
 * v3.2 (2 Nov 2026) — pembatas yang halus: garis tepi biru transparan + kilau putih
 * di tepi atas dalam, seragam untuk semua kartu (besar & kecil), sidebar, dan lainnya.
 * Garis tepi sebelumnya putih di atas latar biru muda sehingga kartu "melebur" ke latar.
 * ===================================================================== */
:root {
	--outline: rgba(0, 74, 173, .16);
	--outline-kuat: rgba(0, 74, 173, .30);
	--kilau: inset 0 1px 0 rgba(255, 255, 255, .85);
	--bayang-kartu: 0 1px 2px rgba(0, 45, 107, .06), 0 10px 28px rgba(0, 45, 107, .09);
}

/* Kartu tingkat atas (dasbor, tabel, formulir, kartu siswa) */
html body .card:not(.card .card),
html body .glass-card {
	border: 1px solid var(--outline) !important;
	border-top-width: 0 !important;
	box-shadow: var(--kilau), 0 0 0 0 transparent, var(--bayang-kartu) !important;
}
/* Kartu di dalam kartu (profil & jadwal siswa, panel bersarang) */
html body .card .card:not(.border-0):not(.shadow-none) {
	border: 1px solid var(--outline) !important;
	box-shadow: var(--kilau), 0 2px 8px rgba(0, 45, 107, .05) !important;
}
html body .jadwal-cbt > .card.border { border: 1px solid var(--outline) !important; box-shadow: var(--kilau), 0 6px 18px rgba(0, 45, 107, .08) !important; }

/* Kartu statistik: lis warna kiri tetap, tiga sisi lain bergaris halus */
html body .small-box-glass {
	border-top: 1px solid var(--outline) !important;
	border-right: 1px solid var(--outline) !important;
	border-bottom: 1px solid var(--outline) !important;
	box-shadow: var(--kilau), var(--bayang-kartu) !important;
}
html body .small-box-glass:hover { border-top-color: var(--outline-kuat) !important; border-right-color: var(--outline-kuat) !important; border-bottom-color: var(--outline-kuat) !important; }

/* Ikon menu cepat */
html body .menu-cepat a { border: 1px solid var(--outline) !important; box-shadow: var(--kilau), var(--bayang-kartu) !important; }
html body .menu-cepat a:hover { border-color: var(--outline-kuat) !important; box-shadow: var(--kilau), 0 14px 30px rgba(0, 45, 107, .16) !important; }

/* Kotak angka di kartu Statistik & Token (lis biru atas tetap) */
html body .box-penilaian-glass:not(.kotak-token), html body .box-info-glass {
	border-right: 1px solid var(--outline) !important;
	border-bottom: 1px solid var(--outline) !important;
	border-left: 1px solid var(--outline) !important;
	box-shadow: var(--kilau), 0 2px 8px rgba(0, 45, 107, .05) !important;
}
html body .box-penilaian-glass:not(.kotak-token):hover, html body .box-info-glass:hover { border-color: var(--outline-kuat) !important; border-top-color: var(--biru-500) !important; }

/* Hero: garis tepi gelap tipis + kilau, menyatu dengan kartu di bawahnya */
html body .content-wrapper > .hero-header.hero-mansaka {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), 0 0 0 1px rgba(0, 31, 71, .22), var(--bayang-2) !important;
}

/* Sidebar: garis tepi kanan lebih tegas + kilau tipis di sisi dalam */
html body .main-sidebar::after {
	background: var(--outline-kuat) !important;
	box-shadow: -1px 0 0 rgba(255, 255, 255, .7), 4px 0 18px rgba(0, 45, 107, .08) !important;
}
html body .main-sidebar .user-panel { box-shadow: 0 0 0 1px rgba(0, 31, 71, .25), inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 18px rgba(0, 45, 107, .22) !important; }
html body .main-sidebar .nav-sidebar > .nav-item > .nav-link:not(.active):hover { box-shadow: inset 0 0 0 1px var(--outline); }
html body .sidebar-kaki { border-top-color: var(--outline) !important; }

/* Lainnya: dialog, menu tarik-turun, bingkai login, kotak isian */
html body .modal-content, html body .swal2-popup { border: 1px solid var(--outline) !important; }
html body .dropdown-menu { border-color: var(--outline) !important; }
html body .masuk-bingkai { border: 1px solid var(--outline) !important; }
html body .main-header .info-tp-smt, html body .main-header #live-clock { box-shadow: var(--kilau) !important; }

/* Laptop kecil / tablet lanskap dengan sidebar terbuka: 6 kartu statistik sebaris terlalu sempit
   (angka tertimpa ikon, label terpotong) — jadikan 3 per baris */
@media (min-width: 992px) and (max-width: 1299px) {
	html body .row > .col-lg-2:has(> .small-box-glass) { flex: 0 0 33.3333%; max-width: 33.3333%; }
}