/* Sneat-inspired theme for BCA Mutasi viewer */
:root {
	--sneat-primary: #696cff;
	--sneat-bg: #f5f5f9;
	--sneat-card: #ffffff;
	--sneat-text: #566a7f;
	--sneat-heading: #233446;
	--sneat-border: #e8eaf3;
	--sneat-menu-bg: #2b2c40;
	--sneat-menu-text: #a3a4cc;
	--sneat-menu-active-bg: #696cff;
	--sneat-shadow: 0 2px 6px 0 rgba(67, 89, 113, .12);
}

body {
	background: var(--sneat-bg);
	color: var(--sneat-text);
	font-family: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- layout ---------- */
.layout-wrapper { display: flex; min-height: 100vh; }

.sidebar {
	width: 260px; flex-shrink: 0;
	background: var(--sneat-menu-bg);
	color: var(--sneat-menu-text);
	position: sticky; top: 0; height: 100vh;
	display: flex; flex-direction: column;
	z-index: 1040;
}
.sidebar .brand {
	padding: 1.25rem 1.5rem;
	color: #fff; font-weight: 700; font-size: 1.15rem;
	display: flex; align-items: center; gap: .6rem;
	text-decoration: none;
}
.sidebar .brand .logo {
	width: 34px; height: 34px; border-radius: .5rem;
	background: var(--sneat-primary);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.1rem; color: #fff; flex-shrink: 0;
}
.menu-header {
	padding: 1rem 1.5rem .4rem;
	font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
	color: #7c7db6;
}
.menu-item { padding: 0 .9rem; }
.menu-link {
	display: flex; align-items: center; gap: .8rem;
	padding: .65rem 1rem; margin: .15rem 0;
	border-radius: .5rem;
	color: var(--sneat-menu-text); text-decoration: none;
	font-size: .95rem; font-weight: 500;
}
.menu-link i { font-size: 1.15rem; width: 1.4rem; text-align: center; }
.menu-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.menu-link.active { color: #fff; background: var(--sneat-menu-active-bg); box-shadow: 0 2px 6px rgba(105,108,255,.5); }
.sidebar .foot {
	margin-top: auto; padding: 1rem 1.5rem;
	font-size: .75rem; color: #7c7db6;
	border-top: 1px solid rgba(255,255,255,.08);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
	background: var(--sneat-card);
	box-shadow: var(--sneat-shadow);
	padding: .9rem 1.75rem;
	position: sticky; top: 0; z-index: 1030;
	display: flex; align-items: center; gap: 1rem;
}
.topbar .page-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--sneat-heading); }
.topbar .page-sub { font-size: .82rem; color: #a1acb8; }
.menu-toggle { display: none; border: 0; background: none; font-size: 1.4rem; color: var(--sneat-text); }

.content { padding: 1.75rem; }

/* ---------- cards ---------- */
.card {
	border: 0; border-radius: .5rem;
	box-shadow: var(--sneat-shadow);
	background: var(--sneat-card);
}
.card-header {
	background: var(--sneat-card);
	border-bottom: 1px solid var(--sneat-border);
	font-weight: 600; color: var(--sneat-heading);
	padding: 1rem 1.5rem;
	border-radius: .5rem .5rem 0 0 !important;
}
.kpi .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #a1acb8; }
.kpi .value { font-size: 1.3rem; font-weight: 700; color: var(--sneat-heading); margin-top: .2rem; white-space: nowrap; }
.kpi .sub { font-size: .78rem; color: #a1acb8; }
.kpi .icon-box {
	width: 42px; height: 42px; border-radius: .5rem;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.25rem; flex-shrink: 0;
}

/* ---------- table ---------- */
.table { color: var(--sneat-text); margin-bottom: 0; }
.table thead th {
	color: var(--sneat-heading); font-weight: 600; font-size: .82rem;
	text-transform: uppercase; letter-spacing: .03em;
	border-bottom: 2px solid var(--sneat-border);
	white-space: nowrap;
}
.table thead tr.filters th { border-bottom: 1px solid var(--sneat-border); padding: .4rem .75rem; text-transform: none; }
.table thead tr.filters input { font-size: .8rem; }
.table tbody td { vertical-align: middle; font-size: .9rem; }
.table tbody tr:hover { background: rgba(105,108,255,.04); }
.table td.amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.db td.amount { color: #ff3e1d; font-weight: 600; }
tr.cr td.amount { color: #71dd37; font-weight: 600; }

.tag-pill {
	display: inline-block; padding: .2em .65em; border-radius: 999px;
	font-size: .72rem; font-weight: 600; color: #fff; white-space: nowrap;
}
.bg-bullet { display: inline-block; width: .85em; height: .85em; border-radius: 50%; background: gray; margin-right: .35em; }

#detail-summary { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
#detail-summary a {
	cursor: pointer; color: var(--sneat-text); text-decoration: none;
	background: var(--sneat-bg); border: 1px solid var(--sneat-border);
	border-radius: 999px; padding: .28rem .75rem; font-size: .8rem; display: inline-block;
}
#detail-summary a:hover { border-color: var(--sneat-primary); color: var(--sneat-primary); }
#detail-summary a.active { background: var(--sneat-primary); border-color: var(--sneat-primary); color: #fff; }
#detail-summary a.active strong { color: #fff; }
#detail-summary strong { text-transform: capitalize; color: var(--sneat-heading); }

.dataTables_wrapper .dataTables_info { color: #a1acb8; font-size: .85rem; }
.dataTables_wrapper .dataTables_length select { margin: 0 .4rem; }
.dataTables_wrapper .pagination { margin-bottom: 0; justify-content: flex-end; }
.dataTables_wrapper .pagination .page-link {
	border-radius: .375rem; margin-left: .25rem;
	border: 1px solid var(--sneat-border); color: var(--sneat-text);
}
.dataTables_wrapper .pagination .page-item.active .page-link {
	background: var(--sneat-primary); border-color: var(--sneat-primary); color: #fff;
	box-shadow: 0 2px 6px rgba(105,108,255,.4);
}
.dataTables_wrapper .pagination .page-item.disabled .page-link { color: #c3c9d4; }

.btn-primary {
	background: var(--sneat-primary); border-color: var(--sneat-primary);
	box-shadow: 0 2px 6px rgba(105,108,255,.4);
}
.btn-primary:hover { background: #5f61e6; border-color: #5f61e6; }
.form-select:focus, .form-control:focus { border-color: var(--sneat-primary); box-shadow: 0 0 0 .2rem rgba(105,108,255,.15); }

@media (max-width: 991.98px) {
	.sidebar { position: fixed; left: 0; transform: translateX(-100%); transition: transform .25s; }
	body.menu-open .sidebar { transform: none; }
	.menu-toggle { display: inline-block; }
	.content { padding: 1rem; }
	.kpi .value { font-size: 1.2rem; }
}

/* topbar responsif: kontrol pindah ke baris sendiri di layar kecil */
@media (max-width: 575.98px) {
	.topbar { flex-wrap: wrap; row-gap: .6rem; padding: .8rem 1rem; }
	.topbar .ms-auto { flex: 1 1 100%; margin-left: 0 !important; }
	.topbar .ms-auto form { width: 100%; }
	.topbar .ms-auto select.form-select { flex: 1 1 auto; min-width: 0; max-width: none !important; }
}