/**
 * The Timesheets card under a person on the Temporary Staff panels. D-403.
 *
 * Compact rows (Philipp, 2026-09-30): one line each, about 36px, so a
 * person with ten weeks on record still fits the panel. Scoped to .occ-sts
 * and stated with enough weight to beat the theme's own table and link rules,
 * the same way the Timesheets page's table does (b10.441).
 */

.occ-sts {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--occ-ui-line, #e4e7ec);
	border-radius: 10px;
	background: var(--occ-ui-white, #fff);
	/* The columns give way by the card's own width, not the window's (the panel sits beside the list). */
	container-type: inline-size;
}

.occ-sts header.occ-sts-head {
	display: flex;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}

.occ-sts h3.occ-sts-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--occ-ui-text, #101828);
}

.occ-sts .occ-sts-counts,
.occ-sts .occ-sts-quiet {
	font-size: 13px;
	color: var(--occ-ui-muted, #667085);
}

.occ-sts p.occ-sts-note {
	margin: 0;
	padding: 7px 12px;
	border-radius: 8px;
	background: var(--occ-ui-fill-soft, #f9fafb);
	font-size: 13px;
	color: #3d4556;
}

.occ-sts p.occ-sts-empty {
	margin: 0;
	padding: 14px;
	border: 1px dashed var(--occ-ui-border, #d0d5dd);
	border-radius: 8px;
	font-size: 13px;
	text-align: center;
	color: var(--occ-ui-muted, #667085);
}

.occ-sts .occ-sts-wrap {
	overflow: hidden;
	border: 1px solid var(--occ-ui-line-soft, #eaecf0);
	border-radius: 8px;
}

.occ-sts .occ-sts-wrap table.occ-sts-table {
	width: 100%;
	table-layout: fixed;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 13px;
	line-height: 1.35;
	background: transparent;
}

.occ-sts .occ-sts-wrap table.occ-sts-table th,
.occ-sts .occ-sts-wrap table.occ-sts-table td {
	height: 36px;
	padding: 5px 10px;
	border: 0;
	border-top: 1px solid var(--occ-ui-line-soft, #eaecf0);
	vertical-align: middle;
	text-align: left;
	background: transparent;
}

.occ-sts .occ-sts-wrap table.occ-sts-table thead th {
	height: auto;
	padding-top: 7px;
	padding-bottom: 7px;
	border-top: 0;
	background: var(--occ-ui-fill-soft, #f9fafb);
	font-size: 12px;
	font-weight: 600;
	color: var(--occ-ui-muted, #667085);
	white-space: nowrap;
}

/*
 * The row fits the card (Philipp, 2026-09-30): fixed columns, and the two free
 * ones (client and worksite, last change) cut short with the full text on hover.
 */
.occ-sts table.occ-sts-table th.occ-sts-period {
	width: 150px;
}

.occ-sts table.occ-sts-table th.occ-sts-hours {
	/* b10.758: room for "plus 8 h 00 min holiday" (162px measured on MIRROR). */
	width: 190px;
}

.occ-sts table.occ-sts-table th.occ-sts-state {
	width: 140px;
}

.occ-sts table.occ-sts-table th.occ-sts-actions {
	width: 180px;
}

.occ-sts table.occ-sts-table.occ-sts-table--decide th.occ-sts-actions {
	width: 340px;
}

.occ-sts .occ-sts-wrap table.occ-sts-table td.occ-sts-where,
.occ-sts .occ-sts-wrap table.occ-sts-table td.occ-sts-last {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Narrower cards drop the last change, then the client and worksite; Open still has them all. */
@container (max-width: 780px) {
	.occ-sts table.occ-sts-table .occ-sts-last {
		display: none;
	}
}

@container (max-width: 600px) {
	.occ-sts table.occ-sts-table .occ-sts-where {
		display: none;
	}

	.occ-sts table.occ-sts-table th.occ-sts-hours {
		width: auto;
	}
}

.occ-sts .occ-sts-wrap table.occ-sts-table td.occ-sts-period {
	font-weight: 600;
	white-space: nowrap;
	color: var(--occ-ui-text, #101828);
}

.occ-sts .occ-sts-wrap table.occ-sts-table td.occ-sts-where {
	color: #3d4556;
}

.occ-sts td.occ-sts-hours {
	white-space: normal;
}

.occ-sts td.occ-sts-hours .occ-sts-worked {
	margin-right: 6px;
}

.occ-sts td.occ-sts-hours .occ-ts-flags {
	display: contents;
}

.occ-sts td.occ-sts-hours .occ-ct-tag,
.occ-sts td.occ-sts-hours .occ-ts-flag {
	/* Never wider than the cell: a longer chip is clipped inside it, not laid over the next column. */
	box-sizing: border-box;
	max-width: 100%;
	overflow: hidden;
	margin: 1px 4px 1px 0;
	font-size: 12px;
}

.occ-sts .occ-ct-tag {
	--occ-ui-chip-dot: var(--occ-ui-dot-navy);
}

.occ-sts .occ-ct-status--waiting {
	--occ-ui-chip-dot: var(--occ-ui-dot-amber);
}

.occ-sts .occ-ct-status--returned {
	--occ-ui-chip-dot: var(--occ-ui-dot-red);
}

.occ-sts .occ-ct-status--approved {
	--occ-ui-chip-dot: var(--occ-ui-dot-green);
}

.occ-sts .occ-ct-status--other {
	--occ-ui-chip-dot: var(--occ-ui-dot-grey);
}

.occ-sts td.occ-sts-state {
	white-space: nowrap;
}

/* A long status ("Waiting for Hannah Whitfield") is cut short inside its chip; the chip's title has it whole. */
.occ-sts td.occ-sts-state .occ-ct-status {
	box-sizing: border-box;
	max-width: 100%;
}

.occ-sts td.occ-sts-state .occ-sts-state-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.occ-sts .occ-sts-wrap table.occ-sts-table td.occ-sts-last {
	font-size: 12px;
	white-space: nowrap;
	color: var(--occ-ui-muted, #667085);
}

/* Right-aligned so PDF and Open line up in every row; stated with the table's full weight to beat the Assignments pages' last-cell rule. */
.occ-sts .occ-sts-wrap table.occ-sts-table tbody td.occ-sts-actions {
	text-align: right;
	white-space: nowrap;
}

.occ-sts td.occ-sts-actions a.occ-sts-btn {
	display: inline-flex;
	align-items: center;
	height: 26px;
	margin: 2px 0 2px 4px;
	padding: 0 10px;
	border: 1px solid var(--occ-ui-border, #d0d5dd);
	border-radius: 7px;
	background: var(--occ-ui-white, #fff);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: var(--occ-ui-text, #101828);
	text-decoration: none;
	white-space: nowrap;
}

/* No arrow after the last button: the Assignments pages add one to a plain link in a table's last cell. */
.occ-sts .occ-sts-wrap table.occ-sts-table tbody td.occ-sts-actions > a.occ-sts-btn:last-child::after {
	content: none;
}

/* The icons occ-ui.css gives PDF, Open and Approve or return, a size smaller for the compact row. */
.occ-sts td.occ-sts-actions a.occ-sts-btn::before {
	flex-basis: 14px;
	width: 14px;
	height: 14px;
	margin-right: 5px;
	-webkit-mask-size: 14px 14px;
	mask-size: 14px 14px;
}

.occ-sts td.occ-sts-actions a.occ-sts-btn:is(:hover, :focus) {
	background: var(--occ-ui-fill, #f2f4f7);
	color: var(--occ-ui-text, #101828);
}

.occ-sts td.occ-sts-actions a.occ-sts-btn.occ-sts-btn--main {
	border-color: var(--occ-ui-brand, #a41e32);
	background: var(--occ-ui-brand, #a41e32);
	color: #fff;
}

.occ-sts td.occ-sts-actions a.occ-sts-btn.occ-sts-btn--main:is(:hover, :focus) {
	border-color: var(--occ-ui-brand-hover, #7d1626);
	background: var(--occ-ui-brand-hover, #7d1626);
	color: #fff;
}

.occ-sts .occ-sts-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
}

.occ-sts a.occ-sts-all {
	font-size: 13px;
	font-weight: 600;
	color: var(--occ-ui-blue, #2f5d95);
}

.occ-sts a.occ-sts-all:is(:hover, :focus) {
	color: var(--occ-ui-blue-hover, #254a78);
}