/*
 * mod_my_procure - what the box adds to the component's own stylesheet.
 * The tabs and cards are com_myprocure's procure.css; this is only the
 * short list and a few spacing changes for a box beside other modules.
 */
.mod-procure .my-heading { margin-bottom: 12px; }
.mod-procure .mp-box { padding: 14px; }
/* Turning a page scrolls back to the top of the list; stop short of the template's sticky header. */
.mod-procure [data-mpm-pane] { scroll-margin-top: 160px; }

/* ------------------------------------------------------------ short list --- */
/* compact = the short rows under tabs: a little tighter, the tab already says the type */
.mod-procure--compact .mod-procure__list { gap: 8px; }
.mod-procure--compact .mod-procure__row { padding: 9px 12px; }
.mod-procure--compact .mod-procure__title { font-size: .93rem; }
.mod-procure__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mod-procure__row {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 14px; border: 1px solid var(--mp-line); border-left: 4px solid var(--c);
	border-radius: var(--mp-radius); background: var(--mp-card);
}
.mod-procure__row:hover { border-color: var(--c); }
/* paged out by procure.js - display:flex would otherwise win over [hidden] */
.mod-procure__row[hidden] { display: none; }
.mod-procure .mp-pager { margin-top: 12px; }
.mod-procure__row.is-new { box-shadow: 0 0 0 1px color-mix(in srgb, #dc2626 35%, transparent); }
.mod-procure__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mod-procure__type {
	align-self: flex-start; font-size: .72rem; font-weight: 700; color: #fff; background: var(--c);
	padding: 2px 9px; border-radius: 999px;
}
.mod-procure__title { margin: 0; font-size: .97rem; line-height: 1.5; font-weight: 700; }
.mod-procure__title a { color: inherit; text-decoration: none; }
.mod-procure__title a:hover { text-decoration: underline; text-decoration-color: var(--c); }
.mod-procure__status { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.mod-procure__label { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--pc); white-space: nowrap; }
.mod-procure__bar { flex: 1; max-width: 180px; height: 6px; border-radius: 999px; overflow: hidden;
	background: color-mix(in srgb, var(--pc) 16%, #e2e8f0); }
.mod-procure__bar span { display: block; height: 100%; border-radius: inherit; background: var(--pc); }
.mod-procure__pct { font-weight: 700; color: var(--pc); }
.mod-procure__actions { flex: none; display: flex; align-items: center; gap: 6px; }
.mod-procure__actions .mp-btn { padding: 7px 12px; }

@media (max-width: 640px) {
	.mod-procure__row { flex-direction: column; align-items: stretch; }
	.mod-procure__actions .mp-btn { flex: 1; justify-content: center; }
	.mod-procure__actions .mp-btn.is-ghost { flex: none; }
}

/* อัปเดตล่าสุด above the short list */
.mod-procure__updated { margin: 0 0 10px; }