/*
 * Dossier_Overview table and Termijnbalk.
 *
 * Reads the custom properties from tokens.css and defines no colour of its own.
 *
 * THE TABLE IS THE PAGE
 * No hero, no slogan, no decorative image: the first things below the page title
 * are a compact sort control and the table itself, which is the visual signature
 * of the site (Requirements 7.5, 22.8).
 *
 * MOBILE FIRST, SO 320px IS THE DEFAULT AND NOT THE EXCEPTION
 * Below 480px every row is a card: the table parts are laid out as blocks, the
 * table head is dropped, and each cell prints its own column name from its
 * data-label attribute. Nothing is then wider than its own column, so the page
 * has nothing to scroll sideways (Requirements 7.7, 23.3). From 480px the same
 * markup becomes a real table again.
 *
 * THE BAR GEOMETRY
 * The width of .itwt-bar__fill is the --fill custom property that
 * ITWT_Termijnbalk::render() writes, straight from the calculator. There is no
 * arithmetic here and no script anywhere: one declaration reads one value
 * (Requirement 7.2).
 *
 * THE ACCENT APPEARS EXACTLY ONCE
 * The three --itwt-overdue tokens are referenced only inside
 * [data-state="verstreken"] blocks in this file. A full bar that is not overdue —
 * the day the term ends — stays neutral ink (Requirements 7.3, 7.4, 22.2).
 *
 * Requirements: 7.1, 7.2, 7.3, 7.4, 7.5, 7.7, 22.2, 22.8, 23.3, 23.7
 */

/* ---------------------------------------------------------------------------
 * The table, as stacked cards (default, so from 320px up)
 * ------------------------------------------------------------------------ */

.itwt-table {
	display: block;
	width: 100%;
}

.itwt-table__caption {
	display: block;
	max-width: var(--itwt-measure-lede);
	margin-block-end: var(--itwt-space-l);
	color: var(--itwt-ink-soft);
	font-size: var(--itwt-size-small);
	text-align: start;
}

/*
 * The column names are carried per cell by the data-label pseudo-elements below,
 * so the head would repeat them once for the whole page and add a row of labels
 * nothing lines up with.
 */
.itwt-table thead {
	display: none;
}

.itwt-table tbody,
.itwt-table tr,
.itwt-table td {
	display: block;
}

.itwt-table tbody tr {
	border: var(--itwt-rule-width) solid var(--itwt-rule);
	border-inline-start: var(--itwt-space-2xs) solid var(--itwt-brand);
	border-radius: var(--itwt-radius);
	background-color: var(--itwt-paper-raised);
	padding: var(--itwt-space-m);
	box-shadow: var(--itwt-shadow-s);
}

.itwt-table tbody tr + tr {
	margin-block-start: var(--itwt-space-m);
}

/* ---------------------------------------------------------------------------
 * Sort control — a GET form, no script. Stays small so the table still leads.
 * ------------------------------------------------------------------------ */

.itwt-sort {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--itwt-space-s);
	margin-block-end: var(--itwt-space-l);
}

.itwt-sort__label {
	font-weight: var(--itwt-weight-strong);
}

.itwt-sort select {
	flex: 1 1 14rem;
}

.itwt-table td {
	/* A long onderwerp or kenmerk wraps instead of pushing the card wider. */
	overflow-wrap: anywhere;
}

.itwt-table td + td {
	margin-block-start: var(--itwt-space-xs);
}

.itwt-table td::before {
	content: attr(data-label);
	display: block;
	color: var(--itwt-brand);
	font-size: var(--itwt-size-label);
	font-weight: var(--itwt-weight-strong);
	letter-spacing: var(--itwt-tracking-label);
	text-transform: uppercase;
}

.itwt-cell--onderwerp a {
	display: inline-flex;
	min-height: var(--itwt-tap-min);
	align-items: center;
	font-weight: var(--itwt-weight-strong);
}

/* ---------------------------------------------------------------------------
 * The Termijnbalk
 * ------------------------------------------------------------------------ */

.itwt-bar {
	display: block;
	min-width: 6rem;
}

.itwt-bar__track {
	overflow: hidden;
	height: var(--itwt-bar-height);
	border: var(--itwt-rule-width) solid var(--itwt-rule);
	border-radius: var(--itwt-radius);
	background-color: var(--itwt-paper);
}

.itwt-bar__fill {
	display: block;
	width: var(--fill, 0%);
	height: 100%;
	background-color: var(--itwt-ink-soft);
	transition: width 240ms linear;
}

.itwt-bar__text {
	margin-block-start: var(--itwt-space-2xs);
	font-size: var(--itwt-size-small);
}

/*
 * The three running states, in the order a term passes through them: green while
 * it runs, amber once it is nearly elapsed, and the accent below once it is
 * exceeded. The sentence beside the bar says the same thing in words, and the
 * graphic itself is aria-hidden, so the colour is a second reading of
 * information that is already there in text.
 *
 * `data-state` comes from ITWT_Termijnbalk::state(), which falls back to op-tijd
 * for any value it does not recognise, so no unexpected state can land here
 * uncoloured.
 */
.itwt-bar[data-state="op-tijd"] .itwt-bar__fill {
	background-color: var(--itwt-ontime);
}

.itwt-bar[data-state="op-tijd"] .itwt-bar__text {
	color: var(--itwt-ontime);
}

.itwt-bar[data-state="bijna"] .itwt-bar__fill {
	background-color: var(--itwt-soon);
}

.itwt-bar[data-state="bijna"] .itwt-bar__text {
	color: var(--itwt-soon);
	font-weight: var(--itwt-weight-strong);
}

/*
 * No derivable einddatum beslistermijn: a dashed, empty track, and no fill
 * element at all. An empty solid bar would read as "the term has not started"
 * and a full one as "the term has run out"; the dashes say that the date is
 * missing, which is what the text beside it also says.
 */
.itwt-bar[data-state="onbekend"] .itwt-bar__track {
	border-style: dashed;
}

.itwt-bar[data-state="onbekend"] .itwt-bar__text {
	color: var(--itwt-ink-soft);
}

/*
 * The one accent, on the one state. Nothing else in this file, and nothing else
 * on the page, references these three tokens.
 */
.itwt-bar[data-state="verstreken"] .itwt-bar__track {
	border-color: var(--itwt-overdue);
	background-color: var(--itwt-overdue-soft);
}

.itwt-bar[data-state="verstreken"] .itwt-bar__fill {
	background-color: var(--itwt-overdue);
}

.itwt-bar[data-state="verstreken"] .itwt-bar__text {
	color: var(--itwt-overdue);
	font-weight: var(--itwt-weight-strong);
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 *
 * base.css already removes every transition under this preference; the bar
 * repeats it here so the rule sits next to the transition it removes and cannot
 * be lost if the sheets are ever loaded apart.
 *
 * Requirements: 23.7
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	.itwt-bar__fill {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * From 480px: a real table
 * ------------------------------------------------------------------------ */

@media (min-width: 30em) {

	.itwt-table {
		display: table;
		border-collapse: collapse;
	}

	.itwt-table__caption {
		display: table-caption;
		caption-side: top;
	}

	.itwt-table thead {
		display: table-header-group;
	}

	.itwt-table tbody {
		display: table-row-group;
	}

	.itwt-table tr {
		display: table-row;
	}

	.itwt-table tbody tr {
		border: 0;
		border-radius: 0;
		padding: 0;
	}

	.itwt-table tbody tr + tr {
		margin-block-start: 0;
	}

	.itwt-table th,
	.itwt-table td {
		display: table-cell;
		border-block-end: var(--itwt-rule-width) solid var(--itwt-rule);
		padding: var(--itwt-space-s) var(--itwt-space-m);
		vertical-align: top;
		text-align: start;
	}

	/*
	 * The column names are set as labels — small, tracked, uppercase — so the
	 * head reads as the key to the table and not as a first row of data. The
	 * heavier rule under it is where the head ends and the record begins.
	 */
	.itwt-table thead th {
		border-block-end: 0;
		background-color: var(--itwt-brand);
		padding-block: var(--itwt-space-s);
		color: var(--itwt-paper-raised);
		font-size: var(--itwt-size-label);
		letter-spacing: var(--itwt-tracking-label);
		text-transform: uppercase;
		white-space: nowrap;
	}

	.itwt-table thead th:first-child {
		border-start-start-radius: var(--itwt-radius);
	}

	.itwt-table thead th:last-child {
		border-start-end-radius: var(--itwt-radius);
	}

	/* The rows sit on the raised surface, so the table reads as one object. */
	.itwt-table tbody td {
		background-color: var(--itwt-paper-raised);
	}

	/*
	 * Hover marks the row under the pointer across all six columns, which is what
	 * makes a wide row readable left to right. The page background is the marker,
	 * so no new colour is needed.
	 */
	.itwt-table tbody tr:hover td {
		background-color: var(--itwt-paper);
	}

	.itwt-table td + td {
		margin-block-start: 0;
	}

	.itwt-table td::before {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Table caption
 *
 * The caption carries the documentary framing, so it is read rather than hidden:
 * it is the table's own introduction and the first thing announced before the
 * rows. Set left, on the reading measure, one step back from the rows it
 * introduces.
 *
 * The second sentence qualifies the first, so it is set smaller and softer — the
 * same relation the framing footer uses. No status colour appears here: a caption
 * describes the table, it does not report a term.
 *
 * Requirements: 7.1, 20.3, 22.2
 * ------------------------------------------------------------------------ */

.itwt-table__caption {
	caption-side: top;
	max-width: var(--itwt-measure);
	padding-block-end: var(--itwt-space-m);
	color: var(--itwt-ink);
	font-size: var(--itwt-size-lede);
	line-height: 1.45;
	text-align: start;
	text-wrap: pretty;
}

.itwt-table__caption-note {
	display: block;
	margin-block-start: var(--itwt-space-2xs);
	color: var(--itwt-ink-soft);
	font-size: var(--itwt-size-small);
	line-height: var(--itwt-line-body);
}