/* FFM calibration files - the grid and the panel behind an expanded row.

   These live in a stylesheet rather than in the components because the tables sit INSIDE a
   RadzenDataGrid row, and Radzen's own '.rz-grid-table thead th' is a descendant selector: it
   reaches every nested thead cell and paints it with the grid's header background. It outranks a
   bare '.ffm-grid-table th', which is what left the column headers white on white. Everything
   that styles a nested header is therefore scoped under .ffm-detail to outrank it. */

.ffm-detail {
	/* Two depths of the app's primary, so the two header levels read as levels rather than as one
	   flat slab. The rules inside the header are white so the header stays one surface; the rules
	   in the data are grey so the numbers stay the loudest thing in the table. */
	--ffm-head: var(--mud-palette-primary);
	--ffm-head-deep: var(--mud-palette-primary-darken);
	--ffm-rule: rgba(128, 128, 128, 0.3);
	--ffm-rule-head: rgba(255, 255, 255, 0.18);
	--ffm-zebra: rgba(128, 128, 128, 0.05);
}

.ffm-detail .ffm-section-title {
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 4px;
	color: var(--mud-palette-primary);
}

/* ---------- the factory matrices ---------- */

/* Separate borders, not collapsed: a collapsed border does not travel with a sticky cell, and the
   row-header column sticks. Each cell draws only its right and bottom edge, the table draws the
   other two, so nothing doubles up. */
.ffm-detail .ffm-grid-table {
	border-collapse: separate;
	border-spacing: 0;
	font-size: 11px;
	font-family: monospace;
	border-top: 1px solid var(--ffm-rule);
	border-left: 1px solid var(--ffm-rule);
}

.ffm-detail .ffm-grid-table th,
.ffm-detail .ffm-grid-table td {
	border-right: 1px solid var(--ffm-rule);
	border-bottom: 1px solid var(--ffm-rule);
	padding: 2px 6px;
	text-align: right;
	min-width: 45px;
}

.ffm-detail .ffm-grid-table tbody tr:nth-child(even) td {
	background: var(--ffm-zebra);
}

/* The header L: the band across the top and the column down the left are one surface. */
.ffm-detail .ffm-grid-table thead th,
.ffm-detail .ffm-grid-table tbody th {
	background-color: var(--ffm-head);
	color: #fff;
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.03em;
	padding: 2px 6px;
	white-space: nowrap;
	border-right-color: var(--ffm-rule-head);
	border-bottom-color: var(--ffm-rule-head);
}

.ffm-detail .ffm-grid-table th.ffm-grid-axis,
.ffm-detail .ffm-grid-table th.ffm-grid-corner {
	background-color: var(--ffm-head-deep);
}

/* The axis label spans the whole block, so it centres; the corner names the other axis and sits
   in the angle of the L, against the row headers below it. */
.ffm-detail .ffm-grid-table th.ffm-grid-axis {
	text-align: center;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.ffm-detail .ffm-grid-table th.ffm-grid-corner {
	text-align: right;
	vertical-align: bottom;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.9);
}

/* One hard edge where the header meets the data - the bottom of the last header row and the right
   of the row-header column. Everything else inside the header stays a white hairline. */
.ffm-detail .ffm-grid-table thead tr:last-child th,
.ffm-detail .ffm-grid-table th.ffm-grid-corner {
	border-bottom-color: var(--ffm-head-deep);
}

.ffm-detail .ffm-grid-table tbody th {
	border-right-color: var(--ffm-head-deep);
}

/* The offset tables are wider than the panel, so the left leg of the L stays put while the values
   scroll under it. Without it the row label is the first thing to leave the screen. */
.ffm-detail .ffm-grid-table thead tr:first-child th:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
}

.ffm-detail .ffm-grid-table tbody th {
	position: sticky;
	left: 0;
	z-index: 1;
}

/* ---------- the calibration entry list ---------- */

.ffm-detail .ffm-calib-table {
	border-collapse: collapse;
	font-size: 12px;
}

.ffm-detail .ffm-calib-table th,
.ffm-detail .ffm-calib-table td {
	border: 1px solid var(--ffm-rule);
	padding: 4px 8px;
}

.ffm-detail .ffm-calib-table thead th {
	background-color: var(--ffm-head);
	color: #fff;
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.03em;
	text-align: left;
	white-space: nowrap;
	padding: 4px 8px;
	border-color: var(--ffm-rule-head);
	border-bottom-color: var(--ffm-head-deep);
}

.ffm-detail .ffm-calib-table tbody tr:nth-child(even) td {
	background: var(--ffm-zebra);
}

/* ---------- the Racepool column ---------- */

/* Keep the Racepool title on one line and park its filter button next to it. */
.ffm-racepool-header {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.ffm-racepool-title {
	white-space: nowrap;
}

.ffm-racepool-header .mud-icon-button {
	padding: 2px;
}

.ffm-racepool-cell {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ffm-racepool-cell .mud-input-control-boolean-input {
	margin: 0;
}

.ffm-racepool-cell .mud-checkbox > .mud-icon-button {
	padding: 2px;
}