/* =========================================================================
   SIKA — Komponen UI
   ====================================================================== */

/* =========================================================================
   Kartu
   ====================================================================== */

.s-kartu {
	background: var(--permukaan);
	border: 1px solid var(--garis);
	border-radius: var(--r-2xl);
	box-shadow: var(--bayang-sm);
	transition: box-shadow var(--sedang) var(--ease-keluar),
	            transform var(--sedang) var(--ease-keluar),
	            border-color var(--sedang) var(--ease-keluar);
	position: relative;
}

.s-kartu--padat   { border-radius: var(--r-xl); }
.s-kartu--isi     { padding: var(--s-6); }
.s-kartu--isi-kecil { padding: var(--s-5); }

.s-kartu--angkat:hover {
	transform: translate3d(0, -3px, 0);
	box-shadow: var(--bayang-lg);
	border-color: var(--biru-200);
}

.s-kartu--klik {
	cursor: pointer;
}

.s-kartu--klik:active {
	transform: translate3d(0, -1px, 0) scale(0.995);
}

.s-kartu--sorot {
	border-color: var(--biru-200);
	background: var(--gradien-lembut);
}

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

.s-kartu-kepala h3,
.s-kartu-kepala h4 {
	font-size: var(--t-base);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.s-kartu-kepala .s-sub {
	font-size: var(--t-xs);
	color: var(--teks-3);
	font-weight: 500;
	margin-top: 1px;
}

.s-kartu-badan { padding: var(--s-6); }
.s-kartu-badan--rapat { padding: var(--s-4) var(--s-6); }
.s-kartu-badan--kosong { padding: 0; }

.s-kartu-kaki {
	padding: var(--s-4) var(--s-6);
	border-top: 1px solid var(--garis-lembut);
	background: var(--permukaan-2);
	border-radius: 0 0 var(--r-2xl) var(--r-2xl);
}

/* =========================================================================
   Tombol
   ====================================================================== */

.s-tbl {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	padding: 0 var(--s-5);
	height: 42px;
	border-radius: var(--r-md);
	font-size: var(--t-md);
	font-weight: 600;
	letter-spacing: -0.008em;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	border: 1px solid transparent;
	transition: transform var(--cepat) var(--ease-keluar),
	            box-shadow var(--sedang) var(--ease-keluar),
	            background-color var(--cepat) var(--ease-keluar),
	            border-color var(--cepat) var(--ease-keluar),
	            color var(--cepat) var(--ease-keluar);
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.s-tbl:active:not(:disabled) {
	transform: scale(0.97);
}

.s-tbl:disabled,
.s-tbl[aria-disabled='true'] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none !important;
}

.s-tbl .s-ikon {
	flex-shrink: 0;
}

/* Riak (ripple) — elemen disuntikkan oleh JS */
.s-riak {
	position: absolute;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.28;
	transform: scale(0);
	animation: s-gelombang 620ms var(--ease-keluar) forwards;
	pointer-events: none;
}

/* -- Varian -- */

.s-tbl--utama {
	background: var(--gradien-utama);
	color: #fff;
	box-shadow: var(--bayang-biru);
}

.s-tbl--utama:hover:not(:disabled) {
	box-shadow: var(--bayang-biru-lg);
	filter: saturate(1.08) brightness(1.03);
}

.s-tbl--kedua {
	background: var(--permukaan);
	color: var(--teks-2);
	border-color: var(--garis-tebal);
	box-shadow: var(--bayang-xs);
}

.s-tbl--kedua:hover:not(:disabled) {
	background: var(--biru-50);
	border-color: var(--biru-300);
	color: var(--biru-700);
}

.s-tbl--lembut {
	background: var(--biru-50);
	color: var(--biru-700);
	border-color: var(--biru-100);
}

.s-tbl--lembut:hover:not(:disabled) {
	background: var(--biru-100);
	border-color: var(--biru-200);
}

.s-tbl--hantu {
	background: transparent;
	color: var(--teks-3);
}

.s-tbl--hantu:hover:not(:disabled) {
	background: var(--permukaan-3);
	color: var(--teks);
}

.s-tbl--sukses {
	background: linear-gradient(135deg, var(--sukses-500), #34D399);
	color: #fff;
	box-shadow: 0 8px 22px -6px rgba(16, 185, 129, 0.42);
}

.s-tbl--sukses:hover:not(:disabled) {
	filter: brightness(1.04);
	box-shadow: 0 14px 32px -8px rgba(16, 185, 129, 0.5);
}

.s-tbl--bahaya {
	background: linear-gradient(135deg, var(--bahaya-500), #FF7C86);
	color: #fff;
	box-shadow: 0 8px 22px -6px rgba(240, 82, 95, 0.4);
}

.s-tbl--bahaya:hover:not(:disabled) {
	filter: brightness(1.04);
}

.s-tbl--garis-bahaya {
	background: var(--bahaya-50);
	color: var(--bahaya-700);
	border-color: var(--bahaya-100);
}

.s-tbl--garis-bahaya:hover:not(:disabled) {
	background: var(--bahaya-100);
}

/* -- Ukuran -- */

.s-tbl--kecil {
	height: 34px;
	padding: 0 var(--s-3);
	font-size: var(--t-sm);
	border-radius: var(--r-sm);
	gap: 6px;
}

.s-tbl--besar {
	height: 50px;
	padding: 0 var(--s-6);
	font-size: var(--t-base);
	border-radius: var(--r-lg);
}

.s-tbl--penuh { width: 100%; }

/* -- Tombol ikon -- */

.s-tbl-ikon {
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-md);
	color: var(--teks-3);
	background: transparent;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all var(--cepat) var(--ease-keluar);
	position: relative;
	flex-shrink: 0;
}

.s-tbl-ikon:hover {
	background: var(--permukaan-3);
	color: var(--biru-600);
}

.s-tbl-ikon:active { transform: scale(0.92); }

.s-tbl-ikon--kecil { width: 32px; height: 32px; border-radius: var(--r-sm); }
.s-tbl-ikon--kotak { background: var(--permukaan); border-color: var(--garis); box-shadow: var(--bayang-xs); }
.s-tbl-ikon--kotak:hover { border-color: var(--biru-300); background: var(--biru-50); }
.s-tbl-ikon--bahaya:hover { background: var(--bahaya-50); color: var(--bahaya-600); }
.s-tbl-ikon--sukses { color: var(--sukses-600, #10b981); }
.s-tbl-ikon--sukses:hover { background: rgba(16, 185, 129, 0.14); color: var(--sukses-600, #10b981); }
.s-tbl-ikon--info { color: var(--biru-600, #2563eb); }
.s-tbl-ikon--info:hover { background: var(--biru-50); color: var(--biru-600, #2563eb); }
.s-tbl-ikon--netral:hover { background: var(--permukaan-3); color: var(--teks); }

/* Live Inline Editing pada Data Master (Tabel Kelas & Mapel) */
tr[data-inline-mode="1"] {
	background: var(--biru-50) !important;
}
tr[data-inline-mode="1"] td {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
	vertical-align: middle !important;
}

/* Spinner dalam tombol */
.s-tbl--memuat {
	color: transparent !important;
	pointer-events: none;
}

.s-tbl--memuat::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 17px;
	height: 17px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: s-putar 640ms linear infinite;
}

.s-tbl--kedua.s-tbl--memuat::after,
.s-tbl--lembut.s-tbl--memuat::after,
.s-tbl--hantu.s-tbl--memuat::after {
	border-color: var(--biru-200);
	border-top-color: var(--biru-600);
}

/* =========================================================================
   Lencana & pil
   ====================================================================== */

.s-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px 4px 8px;
	border-radius: var(--r-bulat);
	font-size: var(--t-xs);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	border: 1px solid transparent;
}

.s-badge .s-ikon { width: 13px; height: 13px; stroke-width: 2.2; }

.s-badge--netral     { background: var(--abu-100); color: var(--abu-600); border-color: var(--abu-200); }
.s-badge--info       { background: var(--info-50); color: var(--info-600); border-color: var(--info-100); }
.s-badge--proses     { background: var(--ungu-50); color: var(--ungu-600); border-color: var(--ungu-100); }
.s-badge--sukses     { background: var(--sukses-50); color: var(--sukses-700); border-color: var(--sukses-100); }
.s-badge--peringatan { background: var(--peringatan-50); color: var(--peringatan-700); border-color: var(--peringatan-100); }
.s-badge--bahaya     { background: var(--bahaya-50); color: var(--bahaya-700); border-color: var(--bahaya-100); }
.s-badge--biru       { background: var(--biru-50); color: var(--biru-700); border-color: var(--biru-100); }

.s-pil {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: var(--r-bulat);
	background: var(--permukaan-3);
	color: var(--teks-2);
	font-size: var(--t-xs);
	font-weight: 600;
	border: 1px solid var(--garis);
}

/* Lencana angka (notifikasi) */
.s-lencana {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	padding: 0 6px;
	border-radius: var(--r-bulat);
	background: var(--bahaya-500);
	color: #fff;
	font-size: var(--t-2xs);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.s-lencana--biru { background: var(--biru-500); }
.s-lencana--lembut { background: var(--biru-100); color: var(--biru-700); }

/* Lampu status kepatuhan */
.s-lampu {
	position: relative;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.s-lampu::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: inherit;
	opacity: 0.22;
	animation: s-denyut 2.4s var(--ease-halus) infinite;
}

.s-lampu--hijau  { background: var(--sukses-500); }
.s-lampu--kuning { background: var(--peringatan-500); }
.s-lampu--merah  { background: var(--bahaya-500); }

/* =========================================================================
   Avatar
   ====================================================================== */

.s-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--r-md);
	background: var(--avatar-0);
	color: #fff;
	font-size: var(--t-sm);
	font-weight: 700;
	letter-spacing: -0.02em;
	flex-shrink: 0;
	box-shadow: var(--bayang-xs);
	user-select: none;
	position: relative;
	overflow: hidden;
}

.s-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

.s-avatar--foto {
	background: var(--permukaan-sub, #f1f5f9);
	border: 1px solid var(--garis, #e2e8f0);
}

.s-avatar--w0 { background: var(--avatar-0); }
.s-avatar--w1 { background: var(--avatar-1); }
.s-avatar--w2 { background: var(--avatar-2); }
.s-avatar--w3 { background: var(--avatar-3); }
.s-avatar--w4 { background: var(--avatar-4); }
.s-avatar--w5 { background: var(--avatar-5); }

.s-avatar--kecil { width: 32px; height: 32px; font-size: var(--t-xs); border-radius: var(--r-sm); }
.s-avatar--besar { width: 52px; height: 52px; font-size: var(--t-base); border-radius: var(--r-lg); }
.s-avatar--xl    { width: 76px; height: 76px; font-size: var(--t-xl); border-radius: var(--r-xl); }
.s-avatar--bulat { border-radius: var(--r-bulat); }

/* =========================================================================
   Formulir
   ====================================================================== */

.s-grup {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.s-label {
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--teks-2);
	letter-spacing: -0.005em;
	display: flex;
	align-items: center;
	gap: 5px;
}

.s-label .s-wajib { color: var(--bahaya-500); font-weight: 700; }

.s-bantuan {
	font-size: var(--t-xs);
	color: var(--teks-3);
	line-height: 1.5;
}

.s-input,
.s-pilih,
.s-area {
	width: 100%;
	padding: 11px 14px;
	background: var(--permukaan);
	border: 1.5px solid var(--garis-tebal);
	border-radius: var(--r-md);
	font-size: var(--t-md);
	color: var(--teks);
	transition: border-color var(--cepat) var(--ease-keluar),
	            box-shadow var(--cepat) var(--ease-keluar),
	            background-color var(--cepat) var(--ease-keluar);
	-webkit-appearance: none;
	appearance: none;
}

.s-input::placeholder,
.s-area::placeholder {
	color: var(--teks-4);
}

.s-input:hover:not(:disabled),
.s-pilih:hover:not(:disabled),
.s-area:hover:not(:disabled) {
	border-color: var(--biru-300);
}

.s-input:focus,
.s-pilih:focus,
.s-area:focus {
	border-color: var(--biru-500);
	box-shadow: var(--cincin);
	background-color: var(--permukaan);
}

.s-input:disabled,
.s-pilih:disabled,
.s-area:disabled {
	background-color: var(--permukaan-3);
	color: var(--teks-3);
	cursor: not-allowed;
}

.s-input--salah,
.s-area--salah {
	border-color: var(--bahaya-500);
}

.s-input--salah:focus {
	box-shadow: var(--cincin-bahaya);
}

.s-area {
	min-height: 96px;
	resize: vertical;
	line-height: 1.65;
}

.s-area--tinggi { min-height: 148px; }

.s-pilih {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B7F9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 40px;
	cursor: pointer;
}

/* Input dengan ikon di depan */
.s-input-bungkus {
	position: relative;
	display: flex;
	align-items: center;
}

.s-input-bungkus .s-input-ikon {
	position: absolute;
	left: 14px;
	color: var(--teks-4);
	pointer-events: none;
	transition: color var(--cepat) var(--ease-keluar);
	display: flex;
}

.s-input-bungkus .s-input {
	padding-left: 42px;
}

.s-input-bungkus:focus-within .s-input-ikon {
	color: var(--biru-500);
}

.s-input-bungkus .s-input-aksi {
	position: absolute;
	right: 8px;
}

.s-input-bungkus--aksi .s-input { padding-right: 46px; }

/* Kotak centang & radio */
.s-centang {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	cursor: pointer;
	user-select: none;
	font-size: var(--t-md);
	color: var(--teks-2);
}

.s-centang input {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--garis-tebal);
	border-radius: 6px;
	background: var(--permukaan);
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	transition: all var(--cepat) var(--ease-keluar);
}

.s-centang input:hover { border-color: var(--biru-400); }

.s-centang input:checked {
	background: var(--gradien-utama);
	border-color: var(--biru-500);
}

.s-centang input:checked::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
	animation: s-skala 200ms var(--ease-pegas) both;
}

.s-centang input:focus-visible { box-shadow: var(--cincin); }

/* Sakelar (toggle) */
.s-sakelar {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	cursor: pointer;
	user-select: none;
}

.s-sakelar input {
	appearance: none;
	-webkit-appearance: none;
	width: 44px;
	height: 25px;
	border-radius: var(--r-bulat);
	background: var(--abu-300);
	position: relative;
	cursor: pointer;
	transition: background-color var(--sedang) var(--ease-keluar);
	flex-shrink: 0;
}

.s-sakelar input::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--bayang-sm);
	transition: transform var(--sedang) var(--ease-pegas);
}

.s-sakelar input:checked { background: var(--biru-500); }
.s-sakelar input:checked::after { transform: translateX(19px); }
.s-sakelar input:focus-visible { box-shadow: var(--cincin); }

/* Baris formulir */
.s-form-baris {
	display: grid;
	gap: var(--s-4);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

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

@media (max-width: 640px) {
	.s-form-baris--2,
	.s-form-baris--3 { grid-template-columns: 1fr; }
}

/* Kelompok segmen (pilihan berdampingan) */
.s-segmen {
	display: inline-flex;
	padding: 4px;
	background: var(--permukaan-3);
	border: 1px solid var(--garis);
	border-radius: var(--r-md);
	gap: 3px;
}

.s-segmen button,
.s-segmen a {
	padding: 7px 14px;
	border-radius: var(--r-xs);
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--teks-3);
	transition: all var(--cepat) var(--ease-keluar);
	white-space: nowrap;
}

.s-segmen button:hover,
.s-segmen a:hover { color: var(--teks); }

.s-segmen [aria-selected='true'],
.s-segmen .aktif {
	background: var(--permukaan);
	color: var(--biru-700);
	box-shadow: var(--bayang-xs);
}

/* =========================================================================
   Tabel
   ====================================================================== */

.s-tabel-bungkus {
	overflow-x: auto;
	border-radius: var(--r-xl);
	-webkit-overflow-scrolling: touch;
}

.s-tabel {
	width: 100%;
	min-width: 560px;
	font-size: var(--t-md);
}

.s-tabel thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--permukaan-2);
	padding: 12px var(--s-4);
	text-align: left;
	font-size: var(--t-xs);
	font-weight: 700;
	color: var(--teks-3);
	text-transform: uppercase;
	letter-spacing: 0.055em;
	white-space: nowrap;
	border-bottom: 1px solid var(--garis);
}

.s-tabel tbody td {
	padding: 13px var(--s-4);
	border-bottom: 1px solid var(--garis-lembut);
	color: var(--teks-2);
	vertical-align: middle;
}

.s-tabel tbody tr {
	transition: background-color var(--cepat) var(--ease-keluar);
}

.s-tabel tbody tr:hover {
	background: var(--biru-50);
}

.s-tabel tbody tr:last-child td {
	border-bottom: none;
}

.s-tabel .kolom-aksi {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}

.s-tabel .kolom-no {
	width: 48px;
	color: var(--teks-4);
	font-variant-numeric: tabular-nums;
}

.s-tabel--rapat tbody td { padding: 9px var(--s-3); }
.s-tabel--rapat thead th { padding: 9px var(--s-3); }

.s-tabel-utama {
	font-weight: 600;
	color: var(--teks);
}

/* =========================================================================
   Keadaan kosong & memuat
   ====================================================================== */

.s-kosong {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--s-9) var(--s-6);
	gap: var(--s-4);
}

.s-kosong-ikon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: var(--r-2xl);
	background: var(--gradien-lembut);
	border: 1px solid var(--biru-100);
	color: var(--biru-400);
}

.s-kosong-ikon .s-ikon { width: 34px; height: 34px; stroke-width: 1.5; }

.s-kosong h4 {
	font-size: var(--t-lg);
	font-weight: 700;
}

.s-kosong p {
	font-size: var(--t-md);
	color: var(--teks-3);
	max-width: 400px;
	line-height: 1.65;
}

/* Rangka (skeleton) */
.s-rangka {
	background: linear-gradient(90deg, var(--abu-100) 25%, var(--abu-50) 37%, var(--abu-100) 63%);
	background-size: 400% 100%;
	animation: s-kilau 1.5s ease-in-out infinite;
	border-radius: var(--r-sm);
}

.s-rangka--teks { height: 13px; margin: 5px 0; }
.s-rangka--judul { height: 20px; width: 45%; }
.s-rangka--baris { height: 46px; margin-bottom: var(--s-2); border-radius: var(--r-md); }

/* Pemuat berputar */
.s-pemuat {
	width: 22px;
	height: 22px;
	border: 2.5px solid var(--biru-100);
	border-top-color: var(--biru-500);
	border-radius: 50%;
	animation: s-putar 700ms linear infinite;
}

.s-pemuat--besar { width: 36px; height: 36px; border-width: 3px; }

/* =========================================================================
   Notifikasi Toast
   ====================================================================== */

.s-toast-wadah {
	position: fixed;
	top: calc(var(--topbar-h) + 12px);
	right: var(--s-5);
	z-index: var(--z-toast);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	pointer-events: none;
	max-width: min(400px, calc(100vw - 32px));
	width: 100%;
}

.s-toast {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: 14px 16px;
	padding-right: 42px;
	background: var(--permukaan);
	border: 1px solid var(--garis);
	border-radius: var(--r-lg);
	box-shadow: var(--bayang-xl);
	pointer-events: auto;
	overflow: hidden;
	animation: s-geser-kanan 420ms var(--ease-pegas) both;
	will-change: transform, opacity;
	cursor: default;
}

.s-toast::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--biru-500);
	border-radius: 0 var(--r-xs) var(--r-xs) 0;
}

.s-toast--keluar {
	animation: s-toast-keluar 300ms var(--ease-masuk) forwards;
}

@keyframes s-toast-keluar {
	to {
		opacity: 0;
		transform: translate3d(24px, 0, 0) scale(0.96);
		max-height: 0;
		margin-top: -8px;
		padding-top: 0;
		padding-bottom: 0;
	}
}

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

.s-toast-ikon .s-ikon { width: 17px; height: 17px; stroke-width: 2.3; }

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

.s-toast-judul {
	font-size: var(--t-md);
	font-weight: 700;
	color: var(--teks);
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.s-toast-pesan {
	font-size: var(--t-sm);
	color: var(--teks-3);
	line-height: 1.55;
	margin-top: 2px;
}

.s-toast-tutup {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-xs);
	color: var(--teks-4);
	transition: all var(--cepat) var(--ease-keluar);
}

.s-toast-tutup:hover { background: var(--permukaan-3); color: var(--teks-2); }
.s-toast-tutup .s-ikon { width: 14px; height: 14px; }

/* Bilah hitung mundur */
.s-toast-bilah {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2.5px;
	background: var(--biru-400);
	opacity: 0.5;
	transform-origin: left;
	animation: s-toast-bilah linear forwards;
}

@keyframes s-toast-bilah {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/* Varian toast */
.s-toast--sukses::before { background: var(--sukses-500); }
.s-toast--sukses .s-toast-ikon { background: var(--sukses-50); color: var(--sukses-600); }
.s-toast--sukses .s-toast-bilah { background: var(--sukses-500); }

.s-toast--bahaya::before { background: var(--bahaya-500); }
.s-toast--bahaya .s-toast-ikon { background: var(--bahaya-50); color: var(--bahaya-600); }
.s-toast--bahaya .s-toast-bilah { background: var(--bahaya-500); }

.s-toast--peringatan::before { background: var(--peringatan-500); }
.s-toast--peringatan .s-toast-ikon { background: var(--peringatan-50); color: var(--peringatan-600); }
.s-toast--peringatan .s-toast-bilah { background: var(--peringatan-500); }

@media (max-width: 640px) {
	.s-toast-wadah {
		top: auto;
		bottom: var(--s-4);
		left: var(--s-4);
		right: var(--s-4);
		max-width: none;
	}

	.s-toast { animation: s-naik 420ms var(--ease-pegas) both; }
}

/* =========================================================================
   Modal
   ====================================================================== */

.s-tirai {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--s-5);
	background: rgba(19, 39, 62, 0.42);
	backdrop-filter: blur(6px) saturate(1.2);
	-webkit-backdrop-filter: blur(6px) saturate(1.2);
	animation: s-muncul 220ms var(--ease-keluar) both;
	overflow-y: auto;
}

.s-tirai[hidden],
[hidden] {
	display: none !important;
}

.s-tirai--keluar { animation: s-muncul 200ms var(--ease-masuk) reverse both; }

.s-modal {
	width: 100%;
	max-width: 520px;
	background: var(--permukaan);
	border-radius: var(--r-2xl);
	box-shadow: var(--bayang-xl);
	animation: s-skala 340ms var(--ease-pegas) both;
	margin: auto;
	overflow: hidden;
}

.s-modal--lebar { max-width: 780px; }
.s-modal--sempit { max-width: 420px; }

.s-tirai--keluar .s-modal {
	animation: s-skala 200ms var(--ease-masuk) reverse both;
}

.s-modal-kepala {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-4);
	padding: var(--s-6) var(--s-6) var(--s-4);
}

.s-modal-kepala h3 {
	font-size: var(--t-lg);
	font-weight: 700;
	letter-spacing: -0.018em;
}

.s-modal-kepala p {
	font-size: var(--t-sm);
	color: var(--teks-3);
	margin-top: 4px;
	line-height: 1.6;
}

.s-modal-badan {
	padding: 0 var(--s-6) var(--s-5);
	max-height: min(60vh, 520px);
	overflow-y: auto;
}

.s-modal-kaki {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--s-3);
	padding: var(--s-4) var(--s-6);
	background: var(--permukaan-2);
	border-top: 1px solid var(--garis-lembut);
}

.s-modal-kaki--antara { justify-content: space-between; }

@media (max-width: 640px) {
	.s-tirai { padding: 0; align-items: flex-end; }

	.s-modal {
		max-width: none;
		border-radius: var(--r-2xl) var(--r-2xl) 0 0;
		animation: s-naik 340ms var(--ease-pegas) both;
	}

	.s-modal-kaki { flex-direction: column-reverse; }
	.s-modal-kaki .s-tbl { width: 100%; }
}

/* Ikon besar dalam modal konfirmasi */
.s-modal-ikon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--r-lg);
	flex-shrink: 0;
	background: var(--biru-50);
	color: var(--biru-600);
}

.s-modal-ikon--bahaya { background: var(--bahaya-50); color: var(--bahaya-600); }
.s-modal-ikon--sukses { background: var(--sukses-50); color: var(--sukses-600); }
.s-modal-ikon--peringatan { background: var(--peringatan-50); color: var(--peringatan-600); }
.s-modal-ikon .s-ikon { width: 24px; height: 24px; }

/* Wadah purge database pada modal */
.s-purge-wadah {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.s-purge-status {
	font-size: var(--t-sm);
	color: var(--teks-2);
	padding: 10px 14px;
	background: var(--permukaan-2);
	border: 1px solid var(--garis);
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

.s-purge-opsi {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	padding: 12px 14px;
	background: var(--permukaan-2);
	border: 1.5px solid var(--garis);
	border-radius: var(--r-lg);
	transition: all var(--cepat) var(--ease-keluar);
}

.s-purge-opsi:hover {
	border-color: var(--garis-tebal);
	background: var(--permukaan-3);
}

.s-purge-opsi--aktif {
	border-color: var(--bahaya-500) !important;
	background: rgba(240, 82, 95, 0.08) !important;
}

.s-purge-opsi input[type="checkbox"] {
	margin-top: 2px;
	flex-shrink: 0;
}

/* =========================================================================
   Tab
   ====================================================================== */

.s-tab {
	display: flex;
	gap: var(--s-1);
	border-bottom: 1px solid var(--garis);
	overflow-x: auto;
	scrollbar-width: none;
}

.s-tab::-webkit-scrollbar { display: none; }

.s-tab-item {
	position: relative;
	padding: 12px var(--s-4);
	font-size: var(--t-md);
	font-weight: 600;
	color: var(--teks-3);
	white-space: nowrap;
	transition: color var(--sedang) var(--ease-keluar);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.s-tab-item::after {
	content: '';
	position: absolute;
	left: var(--s-3);
	right: var(--s-3);
	bottom: -1px;
	height: 2.5px;
	background: var(--gradien-utama);
	border-radius: var(--r-bulat);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--sedang) var(--ease-keluar);
}

.s-tab-item:hover { color: var(--teks); }

.s-tab-item.aktif {
	color: var(--biru-700);
}

.s-tab-item.aktif::after { transform: scaleX(1); }

/* =========================================================================
   Bilah kemajuan
   ====================================================================== */

.s-bilah {
	height: 8px;
	background: var(--permukaan-3);
	border-radius: var(--r-bulat);
	overflow: hidden;
}

.s-bilah-isi {
	height: 100%;
	border-radius: var(--r-bulat);
	background: var(--gradien-utama);
	transition: width 900ms var(--ease-keluar);
	position: relative;
	overflow: hidden;
}

.s-bilah-isi::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	background-size: 200% 100%;
	animation: s-kilau 2.1s ease-in-out infinite;
}

.s-bilah--kecil { height: 5px; }
.s-bilah-isi--hijau  { background: linear-gradient(135deg, var(--sukses-500), #34D399); }
.s-bilah-isi--kuning { background: linear-gradient(135deg, var(--peringatan-500), #FBBF24); }
.s-bilah-isi--merah  { background: linear-gradient(135deg, var(--bahaya-500), #FB7185); }

/* Cincin kemajuan (SVG) */
.s-cincin-kemajuan {
	transform: rotate(-90deg);
}

.s-cincin-kemajuan circle {
	fill: none;
	stroke-linecap: round;
}

.s-cincin-jalur { stroke: var(--permukaan-3); }

.s-cincin-isi {
	stroke: url(#gradienCincin);
	transition: stroke-dashoffset 1.1s var(--ease-keluar);
}

/* =========================================================================
   Tooltip
   ====================================================================== */

[data-tip] {
	position: relative;
}

[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 9px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	padding: 6px 10px;
	background: var(--abu-800);
	color: #fff;
	font-size: var(--t-xs);
	font-weight: 600;
	white-space: nowrap;
	border-radius: var(--r-xs);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--cepat) var(--ease-keluar), transform var(--cepat) var(--ease-keluar);
	z-index: var(--z-dropdown);
	box-shadow: var(--bayang-md);
}

[data-tip]:hover::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* =========================================================================
   Dropdown
   ====================================================================== */

.s-dropdown {
	position: relative;
}

.s-dropdown-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 220px;
	background: var(--permukaan);
	border: 1px solid var(--garis);
	border-radius: var(--r-xl);
	box-shadow: var(--bayang-xl);
	padding: var(--s-2);
	z-index: var(--z-dropdown);
	animation: s-turun 220ms var(--ease-keluar) both;
	transform-origin: top right;
}

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

.s-dropdown-item {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	width: 100%;
	padding: 10px 12px;
	border-radius: var(--r-sm);
	font-size: var(--t-md);
	font-weight: 500;
	color: var(--teks-2);
	text-align: left;
	transition: all var(--cepat) var(--ease-keluar);
}

.s-dropdown-item:hover {
	background: var(--biru-50);
	color: var(--biru-700);
}

.s-dropdown-item .s-ikon { color: var(--teks-4); transition: color var(--cepat); }
.s-dropdown-item:hover .s-ikon { color: var(--biru-500); }

.s-dropdown-item--bahaya:hover { background: var(--bahaya-50); color: var(--bahaya-700); }
.s-dropdown-item--bahaya:hover .s-ikon { color: var(--bahaya-500); }

.s-dropdown-pisah {
	height: 1px;
	background: var(--garis-lembut);
	margin: var(--s-2) 0;
}

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

/* =========================================================================
   Peringatan sebaris (alert)
   ====================================================================== */

.s-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: 14px 16px;
	border-radius: var(--r-lg);
	font-size: var(--t-md);
	line-height: 1.6;
	border: 1px solid transparent;
}

.s-alert .s-ikon { flex-shrink: 0; margin-top: 1px; }
.s-alert-judul { font-weight: 700; display: block; margin-bottom: 2px; }

.s-alert--info       { background: var(--biru-50); color: var(--biru-800); border-color: var(--biru-100); }
.s-alert--sukses     { background: var(--sukses-50); color: var(--sukses-700); border-color: var(--sukses-100); }
.s-alert--peringatan { background: var(--peringatan-50); color: var(--peringatan-700); border-color: var(--peringatan-100); }
.s-alert--bahaya     { background: var(--bahaya-50); color: var(--bahaya-700); border-color: var(--bahaya-100); }

/* =========================================================================
   Panel Database UI & Dropzone Komponen (Data Master)
   ====================================================================== */

/* Kartu Ringkas statistik */
.s-kartu--ringkas {
	padding: var(--s-5) var(--s-6);
	background: var(--permukaan);
	border: 1px solid var(--garis);
	border-radius: var(--r-2xl);
	box-shadow: var(--bayang-sm);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	position: relative;
	overflow: hidden;
	transition: all var(--sedang) var(--ease-keluar);
}

.s-kartu--ringkas:hover {
	transform: translate3d(0, -3px, 0);
	box-shadow: var(--bayang-md);
	border-color: var(--biru-200);
}

.s-baris--antara {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	width: 100%;
}

.s-kartu--ringkas .s-kartu-label {
	font-size: var(--t-xs);
	font-weight: 700;
	color: var(--teks-3);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	flex: 1;
	line-height: 1.3;
}

.s-kartu--ringkas .s-kartu-nilai {
	font-size: var(--t-xl);
	font-weight: 800;
	color: var(--teks);
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin-top: 2px;
}

.s-kartu--ringkas .s-kartu-sub {
	font-size: var(--t-xs);
	color: var(--teks-4);
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
}

/* Badge Ikon Bulat / Kotak Lembut */
.s-pemberitahuan-ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--r-xl);
	flex-shrink: 0;
	box-shadow: var(--bayang-xs);
}

.s-pemberitahuan-ikon--info    { background: var(--biru-50); color: var(--biru-600); border: 1px solid var(--biru-100); }
.s-pemberitahuan-ikon--sukses  { background: var(--sukses-50); color: var(--sukses-600); border: 1px solid var(--sukses-100); }
.s-pemberitahuan-ikon--proses  { background: var(--info-50); color: var(--info-600); border: 1px solid var(--info-100); }
.s-pemberitahuan-ikon--bahaya  { background: var(--bahaya-50); color: var(--bahaya-600); border: 1px solid var(--bahaya-100); }

/* Form Dropzone Restorasi & Impor File */
.s-dropzone {
	position: relative;
	width: 100%;
}

.s-dropzone-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
	padding: var(--s-7) var(--s-6);
	background: var(--permukaan-2);
	border: 2px dashed var(--garis-tebal);
	border-radius: var(--r-2xl);
	cursor: pointer;
	text-align: center;
	transition: all var(--sedang) var(--ease-keluar);
}

.s-dropzone-label:hover,
.s-dropzone input:focus + .s-dropzone-label {
	background: var(--biru-50);
	border-color: var(--biru-400);
	color: var(--biru-700);
	box-shadow: var(--cincin);
}

.s-dropzone-label .s-ikon {
	color: var(--biru-500);
	transition: transform var(--sedang) var(--ease-pegas);
}

.s-dropzone-label:hover .s-ikon {
	transform: translateY(-4px) scale(1.12);
}

.s-dropzone-file-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: 6px 14px;
	background: var(--gradien-lembut);
	border: 1px solid var(--biru-200);
	color: var(--biru-800);
	border-radius: var(--r-bulat);
	font-size: var(--t-xs);
	font-weight: 600;
	box-shadow: var(--bayang-xs);
	animation: s-muncul 200ms var(--ease-keluar) both;
}

/* Filter Kategori & Tombol database */
.db-filter-kat {
	transition: all var(--cepat) var(--ease-keluar);
	border-radius: var(--r-bulat);
	font-weight: 600;
}

.db-filter-kat.aktif {
	background: var(--gradien-utama) !important;
	color: #ffffff !important;
	border-color: transparent !important;
	box-shadow: 0 4px 12px rgba(46, 155, 240, 0.28);
}

.s-garis {
	border: 0;
	border-top: 1px solid var(--garis-lembut);
	margin: var(--s-2) 0;
}