body {
	padding-top: 56px;
}

.card-hover {
	transition: transform .15s ease, box-shadow .15s ease;
}

.card-hover:hover {
	transform: translateY(-2px);
	box-shadow: var(--bs-box-shadow) !important;
}

/* Long descriptions and specifications in list tables */
table.dataTable td {
	white-space: normal;
	word-break: break-word;
}

table.dataTable td a {
	text-decoration: none;
}

table.dataTable td a:hover {
	text-decoration: underline;
}

/* Tom Select inside Bootstrap forms */
.ts-wrapper.form-select {
	padding: 0;
}

.ts-dropdown {
	z-index: 1060;
}

.login-page {
	padding-top: 0;
}

/* Wide tables scroll inside their container instead of the whole page */
.dt-layout-table > div {
	overflow-x: auto;
}

/* Let the expanded mobile menu scroll inside the fixed navbar */
@media (max-width: 991.98px) {
	.navbar-collapse {
		max-height: calc(100vh - 56px);
		overflow-y: auto;
	}
}

/* ------------------------------------------------------------------
 * Penawaran report (home page)
 * Color roles are read by home-report.js; dark values are their own
 * steps, validated against the dark card surface (#212529).
 * ---------------------------------------------------------------- */
.viz-root {
	--viz-series: #2a78d6;
	--viz-other: #b4b2a9;
	--viz-grid: #e1e0d9;
	--viz-axis: #c3c2b7;
	--viz-muted: #6c757d;
	--viz-delta-up: #006300;
	--viz-delta-down: #d03b3b;
}

[data-bs-theme="dark"] .viz-root {
	--viz-series: #3987e5;
	--viz-other: #5f5e5a;
	--viz-grid: #343a40;
	--viz-axis: #495057;
	--viz-muted: #adb5bd;
	--viz-delta-up: #0ca30c;
	--viz-delta-down: #e66767;
}

.viz-root .stat-value {
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.25;
}

.viz-root .stat-value-sm {
	font-size: 1.25rem;
	line-height: 1.75;
}

.viz-root .stat-delta.is-up {
	color: var(--viz-delta-up);
}

.viz-root .stat-delta.is-down {
	color: var(--viz-delta-down);
}

.viz-root .hero-figure {
	font-size: 3rem;
	font-weight: 600;
	line-height: 1.1;
}

.viz-root .report-chart {
	min-height: 320px;
}

.viz-root .report-body {
	transition: opacity .15s ease;
}

/* Refetch keeps the previous render visible at reduced opacity */
.viz-root.is-loading .report-body {
	opacity: .5;
	pointer-events: none;
}

.viz-root .report-table-wrap {
	max-height: 420px;
}

.viz-root .report-table td.num,
.viz-root .report-table th.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.viz-root .report-table tfoot td {
	font-weight: 600;
}

/* ApexCharts tooltip: value first, label second */
.viz-tooltip {
	padding: .5rem .75rem;
	font-size: .8125rem;
	min-width: 10rem;
}

.viz-tooltip .viz-tooltip-value {
	font-weight: 600;
	font-size: .9375rem;
	color: var(--bs-body-color);
}

.viz-tooltip .viz-tooltip-key {
	display: inline-block;
	width: 12px;
	height: 2px;
	margin-right: .375rem;
	vertical-align: middle;
}

.viz-tooltip .viz-tooltip-label {
	color: var(--bs-secondary-color);
}

.apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-tooltip.apexcharts-theme-dark {
	background: var(--bs-body-bg) !important;
	border: 1px solid var(--bs-border-color) !important;
	box-shadow: var(--bs-box-shadow-sm) !important;
	color: var(--bs-body-color) !important;
}

/* Breakdown: ranked HTML bars. The label always follows the bar end in text ink;
   the bar never grows into the 7.5rem reserved for it. */
.viz-root {
	position: relative;
}

.breakdown-row {
	display: grid;
	grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
	align-items: center;
	gap: .75rem;
	padding: .3125rem .375rem;
	border-radius: var(--bs-border-radius-sm);
	outline-offset: -2px;
}

.breakdown-row:hover,
.breakdown-row:focus-visible {
	background: var(--bs-tertiary-bg);
}

.breakdown-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: right;
	font-size: .875rem;
	color: var(--bs-body-color);
	text-decoration: none;
}

a.breakdown-name:hover {
	text-decoration: underline;
}

.breakdown-track {
	display: flex;
	align-items: center;
	gap: .5rem;
	min-width: 0;
}

.breakdown-bar {
	flex: none;
	height: 14px;
	min-width: 2px;
	width: calc((100% - 7.5rem) * var(--ratio, 0));
	background: var(--viz-series);
	border-radius: 0 4px 4px 0; /* square at the baseline, rounded data end */
}

.breakdown-row.is-other .breakdown-bar {
	background: var(--viz-other);
}

.breakdown-value {
	flex: none;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--bs-secondary-color);
	white-space: nowrap;
}

.breakdown-tooltip {
	position: absolute;
	z-index: 1070;
	pointer-events: none;
	background: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
}

/* Narrow screens: name above its bar */
@media (max-width: 575.98px) {
	.breakdown-row {
		grid-template-columns: minmax(0, 1fr);
		gap: .25rem;
	}

	.breakdown-name {
		text-align: left;
	}
}

/* The interval buttons scroll inside the card header on small screens */
.interval-scroll {
	max-width: 100%;
	overflow-x: auto;
}

.interval-scroll .btn-group {
	flex-wrap: nowrap;
}