@charset "UTF-8";

/* ===================================== Tambahan CSS ============================================ */
div.dataTables_scrollBody {
	scrollbar-width: thin;
}

table.dataTable.no-footer {
	border-bottom: 1px solid #111;
}

table.dataTable.nowrap th,
table.dataTable.nowrap td {
	white-space: nowrap;
}

table.dataTable.compact thead th,
table.dataTable.compact thead td {
	padding: 4px 17px 4px 4px;
}

table.dataTable.compact tfoot th,
table.dataTable.compact tfoot td {
	padding: 4px;
}

table.dataTable.compact tbody th,
table.dataTable.compact tbody td {
	padding: 4px;
}

table.dataTable th.dt-left,
table.dataTable td.dt-left {
	text-align: left;
}

table.dataTable th.dt-center,
table.dataTable td.dt-center,
table.dataTable td.dataTables_empty {
	text-align: center;
}

table.dataTable th.dt-right,
table.dataTable td.dt-right {
	text-align: right;
}

table.dataTable th.dt-justify,
table.dataTable td.dt-justify {
	text-align: justify;
}

table.dataTable th.dt-nowrap,
table.dataTable td.dt-nowrap {
	white-space: nowrap;
}

table.dataTable thead th.dt-head-left,
table.dataTable thead td.dt-head-left,
table.dataTable tfoot th.dt-head-left,
table.dataTable tfoot td.dt-head-left {
	text-align: left;
}

table.dataTable thead th.dt-head-center,
table.dataTable thead td.dt-head-center,
table.dataTable tfoot th.dt-head-center,
table.dataTable tfoot td.dt-head-center {
	text-align: center;
}

table.dataTable thead th.dt-head-right,
table.dataTable thead td.dt-head-right,
table.dataTable tfoot th.dt-head-right,
table.dataTable tfoot td.dt-head-right {
	text-align: right;
}

table.dataTable thead th.dt-head-justify,
table.dataTable thead td.dt-head-justify,
table.dataTable tfoot th.dt-head-justify,
table.dataTable tfoot td.dt-head-justify {
	text-align: justify;
}

table.dataTable thead th.dt-head-nowrap,
table.dataTable thead td.dt-head-nowrap,
table.dataTable tfoot th.dt-head-nowrap,
table.dataTable tfoot td.dt-head-nowrap {
	white-space: nowrap;
}

table.dataTable tbody th.dt-body-left,
table.dataTable tbody td.dt-body-left {
	text-align: left;
}

table.dataTable tbody th.dt-body-center,
table.dataTable tbody td.dt-body-center {
	text-align: center;
}

table.dataTable tbody th.dt-body-right,
table.dataTable tbody td.dt-body-right {
	text-align: right;
}

table.dataTable tbody th.dt-body-justify,
table.dataTable tbody td.dt-body-justify {
	text-align: justify;
}

table.dataTable tbody th.dt-body-nowrap,
table.dataTable tbody td.dt-body-nowrap {
	white-space: nowrap;
}

table.dataTable th.dt-hide,
table.dataTable td.dt-hide {
	display: none;
}

/* Fix: Mencegah tabel lebar (nowrap, banyak kolom) memperluas layout viewport di mobile.
   Tanpa ini, window.innerWidth bisa melebihi 992px dan CSS media query sidebar
   berubah dari mobile ke desktop → sidebar terlihat terbuka.
   .table-responsive di dalam akan tetap scroll horizontal secara internal. */
@media (max-width: 991.98px) {
	.app-content {
		overflow-x: hidden;
	}
}

.dashboard-shell {
	--dashboard-ink: #172033;
	--dashboard-muted: #718096;
	--dashboard-border: #e7edf5;
	--dashboard-surface: #ffffff;
	padding-block: 0.25rem 1.5rem;
}

.dashboard-shell .row {
	--bs-gutter-x: 1.25rem;
	--bs-gutter-y: 1.25rem;
}

.dashboard-shell .dashboard-hero .custom-card {
	background: linear-gradient(120deg, #165d9d 0%, #2388b9 58%, #2ea69a 100%) !important;
	border: 0;
	box-shadow: 0 14px 28px rgba(24, 91, 132, 0.18);
}

.dashboard-shell .dashboard-hero .card-body {
	padding: 1.75rem 2rem;
}

.dashboard-shell .dashboard-hero h4 {
	font-size: 1.35rem;
	letter-spacing: 0;
}

.dashboard-shell .dashboard-hero p {
	font-size: 0.9rem;
}

.dashboard-shell .dashboard-hero .badge {
	font-size: 0.8rem;
	font-weight: 600;
	color: #165d9d !important;
	box-shadow: 0 5px 12px rgba(8, 54, 84, 0.12);
}

.dashboard-shell .dashboard-summary .custom-card {
	border: 1px solid var(--dashboard-border);
	box-shadow: 0 8px 18px rgba(30, 56, 84, 0.06);
}

.dashboard-shell .dashboard-summary .card-body {
	padding: 1.25rem 1.5rem;
}

.dashboard-shell .dashboard-summary h3,
.dashboard-shell .dashboard-status-grid h2 {
	color: var(--dashboard-ink);
}

.dashboard-shell .dashboard-summary .avatar {
	box-shadow: 0 8px 16px rgba(22, 93, 157, 0.2);
}

.dashboard-shell .dashboard-summary-metrics {
	--bs-gutter-x: 0;
	display: flex;
	flex-wrap: nowrap;
	min-width: 320px;
}

.dashboard-shell .dashboard-summary>.col-md-12>.card>.card-body>.row>.col-auto:last-child {
	flex: 0 0 360px;
	width: 360px;
}

.dashboard-shell .dashboard-summary-metrics .col-3 {
	flex: 1 1 0;
	padding-inline: 0.65rem;
	border-inline-end: 1px solid var(--dashboard-border);
}

.dashboard-shell .dashboard-summary-metrics h5 {
	display: inline-block;
	font-size: 0.95rem;
	white-space: nowrap !important;
}

.dashboard-shell .dashboard-summary-metrics small {
	display: block;
	white-space: nowrap !important;
}

.dashboard-shell .dashboard-summary-metrics .col-3:last-child {
	border-inline-end: 0;
}

.dashboard-shell .dashboard-status-grid .custom-card {
	border: 1px solid var(--dashboard-border);
	box-shadow: 0 7px 16px rgba(30, 56, 84, 0.05);
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.dashboard-shell .dashboard-status-grid .custom-card:hover {
	box-shadow: 0 12px 24px rgba(30, 56, 84, 0.11);
	transform: translateY(-2px);
}

.dashboard-shell .dashboard-status-grid .card-body {
	min-height: 154px;
	padding: 1.25rem;
}

.dashboard-shell .dashboard-status-grid .avatar {
	flex: 0 0 auto;
}

.dashboard-shell .dashboard-status-grid h6 {
	font-size: 0.72rem;
	line-height: 1.35;
}

.dashboard-shell .dashboard-status-grid small {
	font-size: 0.76rem;
}

.dashboard-shell .dashboard-section-heading {
	margin-block-start: 1.75rem;
	padding-inline-start: 0.85rem;
	border-inline-start: 3px solid #2388b9;
}

.dashboard-shell .dashboard-section-heading h4 {
	margin-block-end: 0.35rem;
	color: var(--dashboard-ink);
	font-size: 1rem;
	letter-spacing: 0;
}

.dashboard-shell .dashboard-section-heading .main-content-label-description {
	color: var(--dashboard-muted);
	font-size: 0.78rem;
}

.dashboard-shell .card-header.bg-primary,
.dashboard-shell table thead.bg-primary {
	background: #165d9d !important;
}

.dashboard-shell .table-responsive {
	border-radius: 0.5rem;
}

.dashboard-shell table th {
	font-size: 0.7rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.dashboard-shell table td {
	font-size: 0.78rem;
}

.dashboard-shell .nav-tabs {
	gap: 0.35rem;
	padding: 0.75rem 1rem 0;
	border-block-end: 1px solid var(--dashboard-border);
}

.dashboard-shell .nav-tabs .nav-link {
	border: 0;
	border-block-end: 2px solid transparent;
	color: var(--dashboard-muted);
	font-size: 0.82rem;
	font-weight: 600;
}

.dashboard-shell .nav-tabs .nav-link.active {
	background: transparent;
	border-block-end-color: #2388b9;
	color: #165d9d;
}

.dashboard-shell .nav-tabs .dropdown-menu {
	min-width: 238px;
	padding: 0.45rem;
	border: 1px solid var(--dashboard-border);
	border-radius: 0.55rem;
	box-shadow: 0 14px 28px rgba(30, 56, 84, 0.14);
}

.dashboard-shell .nav-tabs .dropdown-item {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 0.52rem 0.6rem;
	border-radius: 0.35rem;
	color: var(--dashboard-ink);
	font-size: 0.78rem;
	line-height: 1.35;
	white-space: normal;
}

.dashboard-shell .nav-tabs .dropdown-item i {
	flex: 0 0 1rem;
	width: 1rem;
	margin-inline-end: 0 !important;
	padding-block-start: 0.1rem;
	text-align: center;
}

.dashboard-shell .nav-tabs .dropdown-item:hover,
.dashboard-shell .nav-tabs .dropdown-item:focus {
	background: #edf6fb;
	color: #165d9d;
}

.dashboard-shell .nav-tabs .dropdown-divider {
	margin: 0.35rem 0;
}

@media (max-width: 767.98px) {
	.dashboard-shell .dashboard-hero .card-body {
		padding: 1.25rem;
	}

	.dashboard-shell .dashboard-summary .col-auto:last-child {
		flex: 0 0 100%;
		width: 100%;
	}

	.dashboard-shell .dashboard-summary-metrics {
		min-width: 0;
		width: 100%;
	}

	.dashboard-shell .dashboard-summary-metrics .col-3 {
		padding-inline: 0.35rem;
	}

	.dashboard-shell .dashboard-status-grid .card-body {
		min-height: 140px;
	}

	.dashboard-shell .nav-tabs .dropdown-menu {
		min-width: min(238px, calc(100vw - 2rem));
	}
}