/* =========================
   PROCUREMENT PRO THEME (TEAL AURORA)
   ========================= */
:root {
	--proc-1: #0f766e; /* teal deep */
	--proc-2: #22c55e; /* green bright */
	--proc-3: #99f6e4; /* mint highlight */

	--proc-ink: #0b1220;
	--proc-muted: #64748b;

	--proc-card: rgba(255, 255, 255, 0.78);
	--proc-stroke: rgba(255, 255, 255, 0.28);

	--proc-shadow: 0 22px 60px rgba(2, 14, 40, 0.16);
	--proc-shadow-soft: 0 14px 35px rgba(2, 14, 40, 0.12);

	--proc-radius-xl: 22px;
	--proc-radius-lg: 18px;
}

/* HERO */
.proc-hero {
	position: relative;
	border-radius: 18px 18px 28px 28px !important;
	overflow: hidden;
	min-height: 520px;
	padding-bottom: 70px;
	background:
		radial-gradient(
			900px 420px at 15% 20%,
			rgba(255, 255, 255, 0.28),
			transparent 65%
		),
		radial-gradient(
			700px 360px at 75% 35%,
			rgba(255, 255, 255, 0.22),
			transparent 70%
		),
		linear-gradient(
			135deg,
			rgba(15, 118, 110, 0.95),
			rgba(34, 197, 94, 0.78) 55%,
			rgba(153, 246, 228, 0.55)
		);
}
.proc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			1200px 500px at 50% -10%,
			rgba(255, 255, 255, 0.25),
			transparent 60%
		),
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.28),
			rgba(0, 0, 0, 0.05) 55%,
			rgba(255, 255, 255, 0)
		);
	pointer-events: none;
}
.proc-hero-inner {
	position: relative;
	z-index: 1;
}
.proc-kicker {
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.92);
	font-weight: 800;
	text-transform: uppercase;
}
.proc-lead {
	color: rgba(255, 255, 255, 0.95);
}
.proc-wave {
	color: #ffffff !important;
}
.proc-hero .divider.proc-wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	z-index: 2;
	color: #ffffff !important;
}

/* CARD GLASS */
.proc-card {
	border-radius: var(--proc-radius-xl);
	background: var(--proc-card);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: var(--proc-shadow);
}

/* TOP SUMMARY */
.proc-top {
	margin-top: -9rem;
}
.proc-stat {
	border-radius: 18px;
	padding: 16px;
	border: 1px solid rgba(148, 163, 184, 0.22);
	box-shadow: var(--proc-shadow-soft);
	background:
		radial-gradient(
			700px 220px at 20% 0%,
			rgba(255, 255, 255, 0.28),
			transparent 70%
		),
		linear-gradient(135deg, rgba(15, 94, 118, 0.12), rgba(34, 159, 197, 0.1));
}
.proc-stat h4 {
	margin: 0;
	font-weight: 900;
	color: #0f172a;
}
.proc-stat .meta {
	color: rgba(15, 23, 42, 0.68);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 800;
}
.proc-stat .big {
	font-weight: 1000;
	font-size: 20px;
	color: var(--proc-ink);
}
.proc-stat .sub {
	color: rgba(15, 23, 42, 0.72);
	font-weight: 700;
}

/* FORM */
.proc-form .form-select,
.proc-form .form-control {
	border-radius: 14px;
	border: 1px solid rgba(148, 163, 184, 0.45);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 10px 20px rgba(2, 14, 40, 0.06);
}
.proc-btn {
	border-radius: 14px !important;
	border: 0 !important;
	background: linear-gradient(135deg, var(--proc-1), var(--proc-2));
	box-shadow: 0 16px 30px rgba(15, 118, 110, 0.2);
}
.proc-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 20px 40px rgba(15, 118, 110, 0.24);
}

/* TABS */
.proc-tabs .nav-link {
	border-radius: 999px !important;
	font-weight: 800;
}
.proc-tabs .nav-link.active {
	background: linear-gradient(
		135deg,
		rgba(15, 118, 110, 0.95),
		rgba(34, 197, 94, 0.85)
	) !important;
	border: 0 !important;
}

/* FILTER BAR */
.proc-filter {
	display: flex;
	gap: 10px;
	align-items: end;
	justify-content: space-between;
	flex-wrap: wrap;
}
.proc-filter .left {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: end;
}
.proc-filter .label {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(15, 23, 42, 0.65);
	font-weight: 900;
}

/* TABLE */
.proc-table {
	border-radius: var(--proc-radius-lg);
	overflow: hidden;
	border: 1px solid rgba(148, 163, 184, 0.22);
	box-shadow: 0 16px 40px rgba(2, 14, 40, 0.07);
	background: #fff;
}
.proc-table table {
	border-collapse: separate !important;
	border-spacing: 0 !important;
	width: 100%;
	margin: 0;
}
.proc-table thead tr {
	background:
		radial-gradient(
			700px 220px at 20% 0%,
			rgba(255, 255, 255, 0.24),
			transparent 70%
		),
		linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(34, 197, 94, 0.82));
}
.proc-table thead th {
	background: transparent !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.22) !important;
	text-align: center !important;
	vertical-align: middle;
	font-weight: 900;
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 5;
}
.proc-table tbody td {
	border-color: rgba(148, 163, 184, 0.14) !important;
	vertical-align: middle;
	font-size: 13px;
	color: var(--proc-ink);
}
.proc-table tbody tr:hover td {
	background: rgba(34, 197, 94, 0.08);
}
.proc-table tbody td:nth-child(2) {
	text-align: left !important;
	white-space: normal !important;
	word-break: break-word;
}
.proc-table tbody td:not(:nth-child(2)) {
	text-align: right;
}
.proc-mono {
	font-family:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
		"Courier New", monospace;
	font-size: 11px;
	color: rgba(15, 23, 42, 0.8);
}

/* PROGRESS */
.proc-progress {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-end;
}
.proc-progress .progress {
	width: 140px;
	height: 10px;
	background: rgba(148, 163, 184, 0.25);
	border-radius: 999px;
	overflow: hidden;
}
.proc-progress .progress-bar {
	border-radius: 999px;
}
.proc-pct {
	min-width: 52px;
	text-align: right;
	font-size: 12px;
	font-weight: 900;
	color: rgba(15, 23, 42, 0.85);
}

/* progress colors */
.proc-bar-danger {
	background: linear-gradient(135deg, #ef4444, #f97316);
}
.proc-bar-warn {
	background: linear-gradient(135deg, #f59e0b, #fbbf24);
}
.proc-bar-info {
	background: linear-gradient(135deg, #06b6d4, #22c55e);
}
.proc-bar-primary {
	background: linear-gradient(135deg, #0f766e, #22c55e);
}
.proc-bar-ok {
	background: linear-gradient(135deg, #16a34a, #22c55e);
}

/* badge */
.proc-badge {
	font-weight: 500;
	border-radius: 999px;
	padding: 2px 10px;
	letter-spacing: 0.02em;
	vertical-align: middle;
}
.proc-badge-aktif {
	background: rgba(59, 130, 246, 0.12);
	color: #1d4ed8;
	border: 1px solid rgba(59, 130, 246, 0.25);
}
.proc-badge-selesai {
	background: rgba(34, 197, 94, 0.12);
	color: #15803d;
	border: 1px solid rgba(34, 197, 94, 0.25);
}
.proc-badge-other {
	background: rgba(100, 116, 139, 0.12);
	color: #334155;
	border: 1px solid rgba(100, 116, 139, 0.25);
}

/* links */
.proc-link {
	color: #0f766e;
	font-weight: 900;
	text-decoration: none;
}
.proc-link:hover {
	color: #115e59;
	text-decoration: underline;
}
/* ===== Key-Value rows (label kiri, nilai kanan) ===== */
.proc-kicker-dark {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 900;
	color: rgba(15, 23, 42, 0.65);
}
.proc-form-label {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 900;
	color: rgba(15, 23, 42, 0.65);
}
.proc-kv {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.proc-kv-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.65);
	border: 1px solid rgba(148, 163, 184, 0.18);
}
.proc-kv-label {
	font-weight: 800;
	color: rgba(15, 23, 42, 0.72);
}
.proc-kv-value {
	font-weight: 1000;
	color: var(--proc-ink);
	text-align: right;
	white-space: nowrap;
}
@media (max-width: 576px) {
	.proc-kv-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.proc-kv-value {
		width: 100%;
		text-align: left;
	}
}