/* =========================================================================
   SIKA — Tata Letak Aplikasi (shell)
   ====================================================================== */

.s-aplikasi {
	min-height: 100vh;
	position: relative;
}

/* Ornamen latar lembut di sudut kanan atas */
.s-aplikasi::before {
	content: '';
	position: fixed;
	top: -280px;
	right: -180px;
	width: 720px;
	height: 720px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(94, 200, 255, 0.16) 0%, rgba(94, 200, 255, 0) 68%);
	pointer-events: none;
	z-index: 0;
}

/* =========================================================================
   Sidebar
   ====================================================================== */

.s-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--sidebar-w);
	background: var(--permukaan);
	border-right: 1px solid var(--garis);
	display: flex;
	flex-direction: column;
	z-index: var(--z-sidebar);
	transition: transform var(--lambat) var(--ease-keluar);
}

.s-sidebar-merek {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-5) var(--s-5);
	height: var(--topbar-h);
	flex-shrink: 0;
}

.s-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--r-md);
	background: var(--gradien-utama);
	box-shadow: var(--bayang-biru);
	color: #fff;
	font-weight: 800;
	font-size: var(--t-base);
	letter-spacing: -0.04em;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	transition: transform var(--sedang) var(--ease-pegas);
}

.s-sidebar-merek:hover .s-logo { transform: rotate(-6deg) scale(1.05); }

.s-sidebar-merek .s-logo {
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.s-sidebar-merek .s-logo::after {
	display: none;
}

.s-sidebar-merek .s-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}



.s-merek-teks { min-width: 0; }

.s-merek-nama {
	font-size: var(--t-lg);
	font-weight: 800;
	letter-spacing: -0.035em;
	color: var(--teks);
	line-height: 1.15;
}

.s-merek-sub {
	font-size: var(--t-2xs);
	font-weight: 600;
	color: var(--teks-3);
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Kartu tahun ajaran ---- */

.s-ta-kartu {
	margin: 0 var(--s-4) var(--s-4);
	padding: 12px 14px;
	border-radius: var(--r-lg);
	background: var(--gradien-lembut);
	border: 1px solid var(--biru-100);
	display: flex;
	align-items: center;
	gap: var(--s-3);
}

.s-ta-kartu .s-ikon { color: var(--biru-500); flex-shrink: 0; }

.s-ta-label {
	font-size: var(--t-2xs);
	font-weight: 700;
	color: var(--biru-600);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.s-ta-nilai {
	font-size: var(--t-sm);
	font-weight: 700;
	color: var(--biru-800);
	white-space: nowrap;
}

/* ---- Navigasi ---- */

.s-nav {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0 var(--s-3) var(--s-4);
}

.s-nav-grup { margin-bottom: var(--s-5); }

.s-nav-judul {
	padding: 0 12px var(--s-2);
	font-size: var(--t-2xs);
	font-weight: 700;
	color: var(--teks-4);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.s-nav-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 12px;
	margin-bottom: 2px;
	border-radius: var(--r-md);
	font-size: var(--t-md);
	font-weight: 600;
	color: var(--teks-2);
	letter-spacing: -0.008em;
	transition: color var(--sedang) var(--ease-keluar),
	            background-color var(--sedang) var(--ease-keluar);
	overflow: hidden;
	isolation: isolate;
}

.s-nav-item .s-ikon {
	flex-shrink: 0;
	color: var(--teks-4);
	transition: color var(--sedang) var(--ease-keluar), transform var(--sedang) var(--ease-pegas);
}

.s-nav-item span:not(.s-lencana) {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.s-nav-item:hover {
	background: var(--permukaan-3);
	color: var(--teks);
}

.s-nav-item:hover .s-ikon {
	color: var(--biru-500);
	transform: scale(1.08);
}

/* Item aktif — pil bergradien */
.s-nav-item.aktif {
	color: #fff;
	background: var(--gradien-utama);
	box-shadow: var(--bayang-biru);
}

.s-nav-item.aktif .s-ikon { color: #fff; }

.s-nav-item.aktif .s-lencana {
	background: rgba(255, 255, 255, 0.26);
	color: #fff;
}

/* Garis penanda di tepi kiri saat aktif */
.s-nav-item.aktif::before {
	content: '';
	position: absolute;
	left: -12px;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 22px;
	border-radius: var(--r-bulat);
	background: var(--biru-500);
	opacity: 0;
}

/* ---- Kaki sidebar: kartu pengguna ---- */

.s-sidebar-kaki {
	padding: var(--s-3) var(--s-4) var(--s-4);
	border-top: 1px solid var(--garis-lembut);
	flex-shrink: 0;
}

.s-pengguna-kartu {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: 10px;
	border-radius: var(--r-lg);
	background: var(--permukaan-2);
	border: 1px solid var(--garis-lembut);
	transition: all var(--sedang) var(--ease-keluar);
}

.s-pengguna-kartu:hover {
	background: var(--biru-50);
	border-color: var(--biru-200);
}

.s-pengguna-info { min-width: 0; flex: 1; }

.s-pengguna-nama {
	font-size: var(--t-sm);
	font-weight: 700;
	color: var(--teks);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}

.s-pengguna-peran {
	font-size: var(--t-2xs);
	font-weight: 600;
	color: var(--teks-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* =========================================================================
   Topbar
   ====================================================================== */

.s-topbar {
	position: sticky;
	top: 0;
	z-index: var(--z-topbar);
	height: var(--topbar-h);
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: 0 var(--s-6);
	background: var(--gradien-kaca);
	backdrop-filter: blur(14px) saturate(1.6);
	-webkit-backdrop-filter: blur(14px) saturate(1.6);
	border-bottom: 1px solid var(--garis);
}

.s-topbar-judul { min-width: 0; flex: 1; }

.s-topbar-judul h1 {
	font-size: var(--t-xl);
	font-weight: 800;
	letter-spacing: -0.028em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}

.s-topbar-jejak {
	font-size: var(--t-xs);
	color: var(--teks-3);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.s-topbar-aksi {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	flex-shrink: 0;
}

.s-menu-tbl { display: none; }

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

.s-lonceng-tbl {
	position: relative;
}

.s-lonceng-tbl.ada-baru .s-ikon {
	animation: s-lonceng 1.6s var(--ease-halus) 700ms;
	transform-origin: top center;
}

.s-lonceng-titik {
	position: absolute;
	top: 6px;
	right: 6px;
	min-width: 17px;
	height: 17px;
	padding: 0 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-bulat);
	background: var(--bahaya-500);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	border: 2px solid var(--permukaan);
	font-variant-numeric: tabular-nums;
}

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

.s-notif-panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	width: min(392px, calc(100vw - 32px));
	background: var(--permukaan);
	border: 1px solid var(--garis);
	border-radius: var(--r-2xl);
	box-shadow: var(--bayang-xl);
	z-index: var(--z-dropdown);
	overflow: hidden;
	animation: s-turun 260ms var(--ease-keluar) both;
	transform-origin: top right;
}

.s-notif-panel[hidden] { display: none; }

.s-notif-kepala {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s-4) var(--s-5);
	border-bottom: 1px solid var(--garis-lembut);
}

.s-notif-kepala h4 { font-size: var(--t-base); font-weight: 700; }

.s-notif-daftar {
	max-height: 400px;
	overflow-y: auto;
}

.s-notif-item {
	display: flex;
	gap: var(--s-3);
	padding: 14px var(--s-5);
	border-bottom: 1px solid var(--garis-lembut);
	transition: background-color var(--cepat) var(--ease-keluar);
	position: relative;
	text-align: left;
	width: 100%;
	cursor: pointer;
}

.s-notif-item:hover { background: var(--biru-50); }
.s-notif-item:last-child { border-bottom: none; }

.s-notif-item.baru { background: var(--biru-50); }

.s-notif-item.baru::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--biru-500);
}

.s-notif-ikon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--r-sm);
	flex-shrink: 0;
	background: var(--biru-50);
	color: var(--biru-600);
}

.s-notif-ikon .s-ikon { width: 17px; height: 17px; }

.s-notif-ikon--sukses     { background: var(--sukses-50); color: var(--sukses-600); }
.s-notif-ikon--bahaya     { background: var(--bahaya-50); color: var(--bahaya-600); }
.s-notif-ikon--peringatan { background: var(--peringatan-50); color: var(--peringatan-600); }
.s-notif-ikon--info       { background: var(--info-50); color: var(--info-600); }

.s-notif-isi { flex: 1; min-width: 0; }

.s-notif-judul {
	font-size: var(--t-sm);
	font-weight: 700;
	color: var(--teks);
	line-height: 1.4;
}

.s-notif-pesan {
	font-size: var(--t-xs);
	color: var(--teks-3);
	line-height: 1.55;
	margin-top: 2px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.s-notif-waktu {
	font-size: var(--t-2xs);
	color: var(--teks-4);
	font-weight: 600;
	margin-top: 4px;
}

.s-notif-kaki {
	padding: var(--s-3) var(--s-5);
	border-top: 1px solid var(--garis-lembut);
	background: var(--permukaan-2);
	text-align: center;
}

/* =========================================================================
   Area utama
   ====================================================================== */

.s-utama {
	margin-left: var(--sidebar-w);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 1;
}

.s-isi {
	flex: 1;
	padding: var(--s-6);
	max-width: var(--isi-maks);
	width: 100%;
	margin: 0 auto;
}

@media (min-width: 1500px) {
	.s-isi { padding: var(--s-7) var(--s-6); }
}

/* Kaki halaman */
.s-kaki {
	padding: var(--s-5) var(--s-6);
	text-align: center;
	font-size: var(--t-xs);
	color: var(--teks-4);
	border-top: 1px solid var(--garis-lembut);
}

/* =========================================================================
   Grid & bagian halaman
   ====================================================================== */

.s-grid {
	display: grid;
	gap: var(--s-5);
}

.s-grid--2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-grid--3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-grid--4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s-grid--otomatis { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.s-grid--2-1 { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
.s-grid--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); }

.s-bagian-kepala {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-4);
	flex-wrap: wrap;
	margin-bottom: var(--s-5);
}

.s-bagian-kepala h2 {
	font-size: var(--t-xl);
	font-weight: 800;
	letter-spacing: -0.028em;
}

.s-bagian-kepala p {
	font-size: var(--t-md);
	color: var(--teks-3);
	margin-top: 3px;
}

/* Bilah alat / filter */
.s-bilah-alat {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	flex-wrap: wrap;
	padding: var(--s-4) var(--s-5);
	background: var(--permukaan);
	border: 1px solid var(--garis);
	border-radius: var(--r-xl);
	box-shadow: var(--bayang-xs);
	margin-bottom: var(--s-5);
}

.s-bilah-alat .s-input-bungkus { flex: 1 1 220px; min-width: 180px; }
.s-bilah-alat .s-pilih { width: auto; min-width: 150px; flex: 0 1 auto; }

/* =========================================================================
   Responsif
   ====================================================================== */

@media (max-width: 1180px) {
	.s-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.s-grid--2-1,
	.s-grid--1-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
	:root { --sidebar-w: 256px; }

	.s-sidebar {
		transform: translate3d(-100%, 0, 0);
		box-shadow: none;
	}

	.s-sidebar.terbuka {
		transform: translate3d(0, 0, 0);
		box-shadow: var(--bayang-xl);
	}

	.s-utama { margin-left: 0; }

	.s-menu-tbl { display: inline-flex; }

	.s-tirai-sidebar {
		position: fixed;
		inset: 0;
		z-index: var(--z-tirai);
		background: rgba(19, 39, 62, 0.4);
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
		animation: s-muncul 240ms var(--ease-keluar) both;
	}

	.s-sidebar { z-index: calc(var(--z-tirai) + 1); }

	.s-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	.s-isi { padding: var(--s-4); }
	.s-topbar { padding: 0 var(--s-4); }
	.s-topbar-judul h1 { font-size: var(--t-lg); }
	.s-topbar-jejak { display: none; }

	.s-grid { gap: var(--s-4); }
	.s-grid--2,
	.s-grid--3,
	.s-grid--4 { grid-template-columns: minmax(0, 1fr); }

	.s-kartu--isi { padding: var(--s-5); }
	.s-kartu-kepala,
	.s-kartu-badan { padding: var(--s-4) var(--s-5); }

	.s-bagian-kepala { align-items: flex-start; }
}

@media (max-width: 520px) {
	.s-kartu { border-radius: var(--r-xl); }
	.s-bilah-alat { padding: var(--s-3) var(--s-4); }
	.s-bilah-alat .s-pilih { width: 100%; }
}