/**
 * Styling dashboard publik (Bagian 5 & 6, direvisi menyesuaikan identitas visual UNDIP/TPST).
 *
 * Token warna & tipografi di bawah diambil dari masthead & elemen situs undip.ac.id (navy tua,
 * judul serif, badge pill navy, tombol navy uppercase). Setiap token tetap punya fallback ke
 * variabel CSS Elementor/Hello Elementor (--e-global-color-*, --e-global-typography-*) supaya
 * dashboard otomatis ikut tema kalau variabel itu memang terkonfigurasi di situs live, dan baru
 * jatuh ke nilai literal di bawah kalau tidak. Font Libre Baskerville/Inter mengikuti identitas
 * yang sudah dipakai untuk console OCR UPT K3L sebelumnya.
 */
/* ---------- Normalize defensif ----------
 * Situs ini pernah mengalami CSS yang "kadang tidak terproses" akibat elemen mentah (label,
 * input, button) kena aturan global tema/plugin lain (lihat catatan Bagian 1.3 & 4 di dokumen
 * analisis teknis situs). Blok ini menetapkan margin/line-height eksplisit ke nol HANYA pada
 * elemen mentah di dalam field toolbar (bukan reset lebar/box-sizing luas yang bisa menimpa
 * aturan warna/latar milik komponen sendiri di bawah), supaya spacing vertikal field Dari/Sampai
 * (pakai <label> asli) tetap konsisten dengan field Lokasi/Kategori (pakai <span
 * class="uptk3l-field__label">) walau ada CSS global yang menata <label> site-wide.
 */
.uptk3l-field label,
.uptk3l-field__label,
.uptk3l-field input,
.uptk3l-dropdown-btn,
.uptk3l-pill,
.uptk3l-btn {
	margin: 0;
}

.uptk3l-dash {
	--uptk3l-navy: var(--e-global-color-primary, #0c1554);
	--uptk3l-navy-dark: var(--e-global-color-secondary, #080d38);
	--uptk3l-gold: #c9a227;
	--uptk3l-ink: var(--e-global-color-text, #1f2430);
	--uptk3l-muted: #667085;
	--uptk3l-border: #e4e7ee;
	--uptk3l-surface: #ffffff;
	--uptk3l-canvas: #f5f6fa;
	--uptk3l-font-body: var(--e-global-typography-text-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
	--uptk3l-font-display: var(--e-global-typography-primary-font-family, 'Libre Baskerville', Georgia, 'Times New Roman', serif);
	--uptk3l-radius: 8px;

	font-family: var(--uptk3l-font-body);
	line-height: 1.4;
	color: var(--uptk3l-ink);
	background: var(--uptk3l-canvas);
	border-radius: var(--uptk3l-radius);
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid var(--uptk3l-border);
	position: relative;
}
.uptk3l-dash *, .uptk3l-dash *::before, .uptk3l-dash *::after { box-sizing: border-box; }

.uptk3l-dash *:focus-visible {
	outline: 2px solid var(--uptk3l-gold);
	outline-offset: 2px;
}

/* ---------- Masthead: pita navy, mengikuti bahasa visual header situs ---------- */
.uptk3l-dash__masthead {
	background: linear-gradient(135deg, var(--uptk3l-navy), var(--uptk3l-navy-dark));
	color: #fff;
	padding: 22px 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 10px;
}
.uptk3l-eyebrow {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--uptk3l-gold);
	margin-bottom: 6px;
}
.uptk3l-dash__title {
	margin: 0;
	font-family: var(--uptk3l-font-display);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.25;
	color: #fff;
}
.uptk3l-dash__updated {
	font-size: 0.75rem;
	color: rgba(255,255,255,0.75);
	white-space: nowrap;
}

/* ---------- Toolbar filter ---------- */
.uptk3l-dash__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px 16px;
	padding: 18px 24px;
	background: var(--uptk3l-surface);
	border-bottom: 1px solid var(--uptk3l-border);
}
.uptk3l-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	position: relative;
	min-width: 0;
	flex: 1 1 150px;
}
.uptk3l-field--dropdown { flex: 1 1 200px; }
/* Kategori berisi pill dengan label panjang (mis. "B3 (Bahan Berbahaya dan Beracun)") yang tidak
 * muat di kolom sempit; beri baris penuh sendiri (order tinggi + basis 100%) supaya pill bisa
 * wrap secara wajar selebar toolbar, bukan dipaksa masuk kolom ~260px lalu memaksa seluruh baris
 * ikut melar (itulah penyebab label field lain jadi tampak berantakan/naik-turun sebelumnya). */
.uptk3l-field--grow { flex: 1 1 100%; min-width: 0; order: 10; }
.uptk3l-field label,
.uptk3l-field__label {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--uptk3l-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.uptk3l-field input[type="month"],
.uptk3l-field input[type="search"] {
	font-family: inherit;
	font-size: 0.85rem;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--uptk3l-border);
	border-radius: 6px;
	min-width: 140px;
	width: 100%;
	color: var(--uptk3l-ink);
	background: #fff;
}
.uptk3l-field input:focus { border-color: var(--uptk3l-navy); }

/* Dropdown checklist kustom (pengganti <select multiple> — jauh lebih praktis untuk ±25 lokasi).
 * Tinggi disamakan literal (40px) dengan input[type=month] di atas — jangan andalkan padding yang
 * sama saja, karena browser me-render kontrol native month/date dengan chrome internal yang
 * tingginya tidak konsisten dibanding <button> biasa meski padding-nya identik. Tanpa height
 * eksplisit yang sama, align-items:flex-end pada .uptk3l-dash__toolbar bisa membuat field ini
 * "melayang" tidak sejajar dengan field Dari/Sampai di sebelahnya. */
.uptk3l-dropdown-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-family: inherit;
	font-size: 0.85rem;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--uptk3l-border);
	border-radius: 6px;
	background: #fff;
	color: var(--uptk3l-ink);
	cursor: pointer;
	min-width: 170px;
	width: 100%;
}
.uptk3l-dropdown-btn:hover { border-color: var(--uptk3l-navy); }
.uptk3l-chevron { color: var(--uptk3l-muted); flex-shrink: 0; transition: transform 0.15s ease; }
.uptk3l-dropdown-btn[aria-expanded="true"] .uptk3l-chevron { transform: rotate(180deg); }

.uptk3l-dropdown-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	width: 260px;
	max-width: 80vw;
	background: #fff;
	border: 1px solid var(--uptk3l-border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(12, 21, 84, 0.14);
	padding: 10px;
}
.uptk3l-dropdown-search {
	width: 100%;
	margin-bottom: 8px;
}
.uptk3l-dropdown-actions {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}
.uptk3l-dropdown-actionbtn {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--uptk3l-navy);
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px 0;
	text-decoration: underline;
}
.uptk3l-dropdown-list {
	max-height: 220px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.uptk3l-dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.82rem;
	padding: 6px 6px;
	border-radius: 4px;
	cursor: pointer;
}
.uptk3l-dropdown-item:hover { background: var(--uptk3l-canvas); }
.uptk3l-dropdown-item input { accent-color: var(--uptk3l-navy); }
.uptk3l-dropdown-empty {
	font-size: 0.78rem;
	color: var(--uptk3l-muted);
	padding: 10px 4px;
	text-align: center;
}

/* Kategori sebagai pill toggle — meminjam bahasa visual badge "BERITA" di situs induk */
.uptk3l-pillgroup {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.uptk3l-pill {
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1.5px solid var(--uptk3l-pill-accent, var(--uptk3l-navy));
	background: #fff;
	color: var(--uptk3l-pill-accent, var(--uptk3l-navy));
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}
.uptk3l-pill:hover { background: color-mix(in srgb, var(--uptk3l-pill-accent, var(--uptk3l-navy)) 10%, #fff); }
.uptk3l-pill[aria-pressed="true"] {
	background: var(--uptk3l-pill-accent, var(--uptk3l-navy));
	color: #fff;
}

.uptk3l-toolbar-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-left: auto; flex: 0 0 auto; }

.uptk3l-btn {
	font-family: inherit;
	background: var(--uptk3l-navy);
	color: #fff;
	border: 1.5px solid var(--uptk3l-navy);
	height: 40px;
	padding: 0 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}
.uptk3l-btn:hover { background: var(--uptk3l-navy-dark); border-color: var(--uptk3l-navy-dark); }
.uptk3l-btn--ghost { background: transparent; color: var(--uptk3l-navy); }
.uptk3l-btn--ghost:hover { background: var(--uptk3l-canvas); }
.uptk3l-btn--sm { height: 32px; padding: 0 12px; font-size: 0.72rem; }
.uptk3l-btn:disabled { opacity: 0.45; cursor: not-allowed; background: var(--uptk3l-muted); border-color: var(--uptk3l-muted); }

/* ---------- Chip filter aktif — visibilitas cepat apa yang sedang difilter ---------- */
.uptk3l-dash__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 24px;
	background: var(--uptk3l-surface);
	border-bottom: 1px solid var(--uptk3l-border);
}
.uptk3l-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	background: var(--uptk3l-canvas);
	border: 1px solid var(--uptk3l-border);
	border-radius: 999px;
	padding: 4px 6px 4px 12px;
	color: var(--uptk3l-ink);
}
.uptk3l-chip button {
	border: none;
	background: var(--uptk3l-border);
	color: var(--uptk3l-ink);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 0.7rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.uptk3l-chip button:hover { background: var(--uptk3l-navy); color: #fff; }

/* ---------- KPI cards ---------- */
.uptk3l-dash__kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	padding: 20px 24px 4px;
}
.uptk3l-kpi {
	background: var(--uptk3l-surface);
	border: 1px solid var(--uptk3l-border);
	border-radius: var(--uptk3l-radius);
	padding: 16px;
	box-shadow: 0 1px 2px rgba(12, 21, 84, 0.04);
}
.uptk3l-kpi__badge {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #fff;
	background: var(--uptk3l-accent);
	border-radius: 999px;
	padding: 3px 10px;
	margin-bottom: 10px;
}
.uptk3l-kpi__value { font-family: var(--uptk3l-font-display); font-size: 1.7rem; font-weight: 700; color: var(--uptk3l-ink); }
.uptk3l-kpi__unit { font-family: var(--uptk3l-font-body); font-size: 0.85rem; font-weight: 400; color: var(--uptk3l-muted); }

/* ---------- Seksi konten: full-width berturutan, bukan kolom sempit berdampingan ---------- */
.uptk3l-dash__section {
	background: var(--uptk3l-surface);
	border: 1px solid var(--uptk3l-border);
	border-radius: var(--uptk3l-radius);
	padding: 18px 20px;
	margin: 16px 24px 0;
}
.uptk3l-dash__section h3 {
	margin: 0 0 14px;
	font-family: var(--uptk3l-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--uptk3l-ink);
}
.uptk3l-section-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}
.uptk3l-section-head h3 { margin: 0; }
.uptk3l-chart-wrap { position: relative; }

.uptk3l-table-wrap { overflow-x: auto; }
.uptk3l-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.uptk3l-table th, .uptk3l-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--uptk3l-border);
}
.uptk3l-table__num { text-align: right; }
.uptk3l-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.uptk3l-table th {
	color: var(--uptk3l-muted);
	font-weight: 700;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	position: sticky;
	top: 0;
	background: var(--uptk3l-surface);
}
.uptk3l-table tbody tr:hover { background: var(--uptk3l-canvas); }
.uptk3l-table__empty {
	text-align: center;
	padding: 28px 12px !important;
	color: var(--uptk3l-muted);
}
.uptk3l-table__empty-hint { display: block; font-size: 0.78rem; margin-top: 4px; }
.uptk3l-table__empty-link {
	display: inline-block;
	margin-top: 10px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--uptk3l-navy);
	cursor: pointer;
	text-decoration: underline;
	background: none;
	border: none;
}

.uptk3l-table__pagination {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
}
.uptk3l-table__page-label { font-size: 0.78rem; color: var(--uptk3l-muted); }

/* ---------- Footer ---------- */
.uptk3l-dash__footer {
	padding: 14px 24px 20px;
	font-size: 0.74rem;
	color: var(--uptk3l-muted);
}

/* ---------- Loading & error ---------- */
.uptk3l-dash__loading {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 40px 12px;
	font-size: 0.85rem;
	color: var(--uptk3l-muted);
}
.uptk3l-dash.is-loading .uptk3l-dash__loading { display: flex; }
.uptk3l-dash.is-loading .uptk3l-dash__kpis,
.uptk3l-dash.is-loading .uptk3l-dash__section {
	opacity: 0.35;
	pointer-events: none;
	filter: grayscale(0.3);
}
.uptk3l-spinner {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--uptk3l-border);
	border-top-color: var(--uptk3l-navy);
	animation: uptk3l-spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.uptk3l-spinner { animation: none; border-top-color: var(--uptk3l-border); }
}
@keyframes uptk3l-spin { to { transform: rotate(360deg); } }

.uptk3l-dash__error {
	margin: 16px 24px 0;
	padding: 12px 16px;
	border-radius: 6px;
	background: #fdecea;
	color: #a4271f;
	font-size: 0.85rem;
	border: 1px solid #f3c6c2;
}

/* ---------- Responsif ---------- */
@media (max-width: 900px) {
	.uptk3l-dash__kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 782px) {
	.uptk3l-dash__masthead { padding: 18px 16px; }
	.uptk3l-dash__toolbar { padding: 16px; flex-direction: column; align-items: stretch; }
	.uptk3l-field, .uptk3l-field--grow { width: 100%; }
	.uptk3l-field--grow { order: 0; }
	.uptk3l-dropdown-panel { width: 100%; }
	.uptk3l-toolbar-actions { margin-left: 0; justify-content: flex-end; }
	.uptk3l-dash__chips { padding: 10px 16px; }
	.uptk3l-dash__kpis { padding: 16px 16px 4px; }
	.uptk3l-dash__section { margin: 12px 16px 0; padding: 16px; }
	.uptk3l-dash__footer { padding: 12px 16px 16px; }
}
@media (max-width: 480px) {
	.uptk3l-dash__kpis { grid-template-columns: 1fr; }
	.uptk3l-dash__title { font-size: 1.3rem; }
}