:root {
	--brand-1: #0d3b66;
	--brand-2: #145da0;
	--brand-accent: #2e9cca;
	--sidebar-width: 250px;
	--navbar-height: 56px;
}

* { box-sizing: border-box; }

html, body {
	min-height: 100%;
	background: #f4f6f9;
}

body {
	font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Padding atas hanya untuk halaman yang memakai navbar aplikasi (dashboard dkk),
   BUKAN untuk halaman mandiri seperti login / 404 tamu. */
body.app-body {
	padding-top: var(--navbar-height);
}

/* ---------- Navbar ---------- */
.app-navbar {
	height: var(--navbar-height);
	background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
	box-shadow: 0 2px 6px rgba(0,0,0,.15);
	z-index: 1040;
}
.app-navbar .navbar-brand { font-weight: 600; letter-spacing: .2px; }

/* ---------- Layout ---------- */
.app-wrapper {
	display: flex;
	align-items: stretch;
	min-height: calc(100vh - var(--navbar-height));
}

.app-sidebar {
	width: var(--sidebar-width);
	background: linear-gradient(180deg, var(--brand-1), #0a2e4f);
	color: #fff;
}
.app-sidebar .nav-link {
	color: rgba(255,255,255,.85);
	padding: .65rem 1.25rem;
	display: flex;
	align-items: center;
	gap: .6rem;
	border-left: 3px solid transparent;
	font-size: .92rem;
}
.app-sidebar .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.app-sidebar .nav-link:hover {
	background: rgba(255,255,255,.08);
	color: #fff;
}
.app-sidebar .nav-link.active {
	background: rgba(255,255,255,.14);
	border-left-color: var(--brand-accent);
	color: #fff;
	font-weight: 600;
}
.app-sidebar .nav-section-title {
	color: rgba(255,255,255,.45);
	text-transform: uppercase;
	font-size: .7rem;
	letter-spacing: .08em;
	font-weight: 700;
	padding: 1rem 1.25rem .25rem;
}

@media (min-width: 992px) {
	.app-sidebar {
		position: fixed;
		top: var(--navbar-height);
		bottom: 0;
		left: 0;
		visibility: visible;
	}
	.app-content { margin-left: var(--sidebar-width); }
}

.app-content {
	flex: 1;
	min-width: 0;
	width: 100%;
}

/* ---------- Cards ---------- */
.stat-card {
	border: none;
	border-radius: .8rem;
	color: #fff;
	box-shadow: 0 4px 14px rgba(0,0,0,.08);
	overflow: hidden;
	position: relative;
}
.stat-card .bi { font-size: 2.2rem; opacity: .35; position: absolute; right: 1rem; top: 1rem; }
.stat-card h3 { font-weight: 700; margin-bottom: 0; }
.stat-card.bg-c1 { background: linear-gradient(135deg,#145da0,#0d3b66); }
.stat-card.bg-c2 { background: linear-gradient(135deg,#2e9cca,#145da0); }
.stat-card.bg-c3 { background: linear-gradient(135deg,#28a745,#1e7e34); }
.stat-card.bg-c4 { background: linear-gradient(135deg,#f0932b,#c96f16); }

.card { border: none; border-radius: .7rem; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.card-header { background: #fff; border-bottom: 1px solid #eef0f3; font-weight: 600; }

.table-responsive { border-radius: .5rem; overflow: hidden; }
table.dataTableApp thead th { white-space: nowrap; background: #eef2f7; }

.badge-ma { font-size: .78rem; }

/* ---------- Login page ---------- */
.login-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--brand-1), var(--brand-2) 60%, var(--brand-accent));
	padding: 1rem;
}
.login-card {
	max-width: 420px;
	width: 100%;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.login-card .brand-header {
	background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
	color: #fff;
	padding: 2rem 2rem 1.5rem;
	text-align: center;
}
.login-card .brand-badge {
	width: 68px;
	height: 68px;
	margin: 0 auto;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
.login-card .brand-badge i {
	font-size: 2rem;
	color: var(--brand-1);
}
.login-card .brand-header h5 { color: #fff; }
.login-card .brand-subtitle { color: rgba(255,255,255,.8); }
.login-card .login-form-body { background: #fff; }

/* ---------- Print ---------- */
@media print {
	.no-print { display: none !important; }
	body { padding-top: 0; background: #fff; }
	.app-content { margin-left: 0 !important; }
	.card { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ---------- Misc ---------- */
.form-label { font-weight: 600; font-size: .88rem; }
.required::after { content: " *"; color: #dc3545; }
.chart-wrap { position: relative; height: 320px; }
@media (max-width: 576px) {
	.chart-wrap { height: 260px; }
}