/* mod_sipp_perkara — warna utama diatur lewat --sp-primary (parameter modul) */
.mod-sipp {
	--sp-ink: color-mix(in srgb, var(--sp-primary) 30%, #0a1511);
	--sp-muted: color-mix(in srgb, var(--sp-ink) 62%, #fff);
	--sp-line: color-mix(in srgb, var(--sp-primary) 10%, #e8ece9);
	--sp-tint: color-mix(in srgb, var(--sp-primary) 11%, #fff);
	--sp-bg: #fff;
	--sp-radius: 18px;

	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
	margin: var(--sp-mt, 24px) 0 var(--sp-mb, 24px);
	font-family: inherit;
	color: var(--sp-ink);
	line-height: 1.4;
}

.mod-sipp *, .mod-sipp *::before, .mod-sipp *::after { box-sizing: border-box; }
.mod-sipp [hidden] { display: none !important; }

.sp-card {
	background: var(--sp-bg);
	border-radius: var(--sp-radius);
	box-shadow: 0 1px 2px rgb(10 21 17 / .04), 0 8px 28px rgb(10 21 17 / .06);
	border: 1px solid var(--sp-line);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.sp-card--wide { grid-column: 1 / -1; }

.sp-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px 16px;
	padding: 22px 32px 8px;
}
.mod-sipp .sp-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--sp-ink); letter-spacing: -.01em; }
.sp-meta { margin: 0; font-size: .85rem; color: var(--sp-muted); }
.sp-meta strong { color: var(--sp-primary); font-weight: 700; }

/* ---------- Judul bar ---------- */
.mod-sipp .sp-banner {
	grid-column: 1 / -1;
	margin: 0 0 -4px;
	padding: 14px 24px;
	background: var(--sp-primary);
	color: #fff;
	text-align: center;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	border-radius: 12px;
}

/* ---------- Daftar sidang ---------- */
.sp-list { list-style: none; margin: 8px 32px 0; padding: 0; position: relative; }
.sp-list::before {
	content: ""; position: absolute; left: 78px; top: 8px; bottom: 8px;
	width: 1px; background: var(--sp-line);
}
.sp-item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	column-gap: 28px;
	align-items: center;
	padding: 14px 0;
	position: relative;
}
.sp-item::before {
	content: ""; position: absolute; left: 75px; top: 50%; margin-top: -3.5px;
	width: 7px; height: 7px; border-radius: 50%; background: var(--sp-primary);
}
.sp-time { text-align: center; display: flex; flex-direction: column; line-height: 1.1; }
.sp-time__hm { font-weight: 700; font-size: 1.05rem; color: var(--sp-ink); font-variant-numeric: tabular-nums; }
.sp-time__tz { font-size: .68rem; font-weight: 700; letter-spacing: .12em; color: var(--sp-muted); margin-top: 3px; }
.sp-body { padding-left: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-nomor { font-weight: 700; font-size: .95rem; color: var(--sp-ink); overflow-wrap: anywhere; }
.sp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sp-badge {
	background: var(--sp-tint); color: var(--sp-primary);
	font-size: .7rem; font-weight: 700; letter-spacing: .04em;
	padding: 3px 9px; border-radius: 6px;
}
.sp-room { font-size: .85rem; color: var(--sp-muted); }
.sp-date { font-size: .85rem; color: var(--sp-muted); white-space: nowrap; }

/* ---------- Footer / pager ---------- */
.sp-foot {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
	padding: 16px 32px; margin-top: auto; border-top: 1px solid var(--sp-line);
}
.sp-foot__count, .sp-note { margin: 0; font-size: .82rem; color: var(--sp-muted); }
.sp-foot__count strong { color: var(--sp-ink); }
.sp-pager { display: flex; align-items: center; gap: 12px; }
.sp-pager__state { font-size: .85rem; font-weight: 700; min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; }
.sp-btn {
	width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
	background: #fff; color: var(--sp-ink); border: 1px solid var(--sp-line); border-radius: 8px;
	font-size: 1.1rem; line-height: 1; padding: 0; transition: background .15s, border-color .15s;
}
.sp-btn:hover:not(:disabled) { background: var(--sp-tint); border-color: var(--sp-primary); }
.sp-btn:disabled { opacity: .4; cursor: default; }
.sp-btn:focus-visible, .sp-link:focus-visible { outline: 2px solid var(--sp-primary); outline-offset: 2px; }
.sp-link { font-size: .82rem; font-weight: 600; color: var(--sp-primary); text-decoration: none; }
.sp-link:hover { text-decoration: underline; }

/* ---------- Keadaan kosong / error ---------- */
.sp-empty { flex: 1; justify-content: center; text-align: center; padding: 36px 28px 40px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sp-empty__icon {
	width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
	background: var(--sp-tint); color: var(--sp-primary); margin-bottom: 4px;
}
.sp-empty__title { margin: 0; font-weight: 700; font-size: 1.02rem; }
.sp-empty__text { margin: 0 0 6px; color: var(--sp-muted); font-size: .9rem; max-width: 52ch; text-wrap: balance; }

/* ---------- Laporan ---------- */
.sp-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin: 0; padding: 4px 32px 22px; gap: 0; }
.sp-stat {
	display: flex; flex-direction: column-reverse; gap: 4px;
	padding-right: 28px; margin-right: 28px; border-right: 1px solid var(--sp-line); position: relative;
}
.sp-stat:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.sp-stat::before { content: ""; width: 24px; height: 1px; background: var(--sp-muted); opacity: .6; margin-bottom: 10px; align-self: flex-start; order: 3; }
.sp-stat dt { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-muted); }
.sp-stat dd { margin: 0; font-size: 2.3rem; line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--sp-ink); font-variant-numeric: tabular-nums; }

.sp-tablewrap { overflow-x: auto; border-top: 1px solid var(--sp-line); }
.sp-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin: 0; }
.sp-table th, .sp-table td { padding: 14px 0; border: 0; background: none; }
.sp-table th:first-child, .sp-table td:first-child { padding-left: 32px; }
.sp-table th:last-child, .sp-table td:last-child { padding-right: 32px; }
.sp-table thead th {
	font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--sp-muted); text-align: left; padding: 14px 0;
}
.sp-table tbody tr { border-top: 1px solid var(--sp-line); }
.sp-table tbody th { text-align: left; font-weight: 700; color: var(--sp-ink); }
.sp-table .sp-num { text-align: right; padding-left: 16px; font-variant-numeric: tabular-nums; }
.sp-table thead .sp-num { text-align: right; }
.sp-table td.sp-num { color: var(--sp-muted); }
.sp-table td.sp-num--strong { color: var(--sp-primary); font-weight: 700; }

/* ---------- Responsif ---------- */
@media (max-width: 991px) {
	.mod-sipp { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 575px) {
	.mod-sipp .sp-banner { font-size: 1.1rem; padding: 12px 16px; }
	.sp-head { padding: 18px 18px 6px; }
	.sp-list { margin: 6px 18px 0; }
	.sp-list::before { left: 60px; }
	.sp-item { grid-template-columns: 52px 1fr; column-gap: 22px; }
	.sp-item::before { left: 57px; }
	.sp-date { display: none; }
	.sp-foot { padding: 14px 18px; }
	.sp-stats { padding: 4px 18px 18px; }
	.sp-stat { padding-right: 16px; margin-right: 16px; }
	.sp-stat dd { font-size: 1.8rem; }
	.sp-table th:first-child, .sp-table td:first-child { padding-left: 18px; }
	.sp-table th:last-child, .sp-table td:last-child { padding-right: 18px; }
}
@media (prefers-reduced-motion: reduce) { .sp-btn { transition: none; } }