/*
	styles5.css — Projects redesign proof of concept, behind Experimental25.

	Loaded for everyone (see ContentController.css4) but every rule is scoped to
	`.experimental-25`, so it is inert unless the flag is on. content.js adds the
	body class in the responsive render block and in the live-toggle switch.

	Turn it on locally with ?experimental=25 on any app URL.

	Values were read from the design prototype's computed styles
	(basicops-design.vercel.app/desktop/screens/projects/projects.html), not
	estimated. The status colours are BasicOps' existing palette — the design
	reuses them unchanged; only the presentation differs (tinted pill instead of
	a coloured dot plus text).
*/

/* ---------- tokens ---------- */

body.experimental-25 {
	--e25-ink: #0a0a0a;
	--e25-muted: #62748e;
	--e25-divider: #e2e8f0;

	--e25-header-size: 11px;
	--e25-header-weight: 600;
	--e25-header-tracking: 0.4px;
	--e25-header-height: 36px;

	--e25-cell-size: 14px;
	--e25-cell-weight: 500;

	--e25-group-height: 32px;
	--e25-group-size: 12px;
	--e25-group-weight: 600;

	--e25-pill-radius: 6px;
	--e25-pill-padding: 3px 8px;
	--e25-pill-size: 12px;
	--e25-pill-weight: 600;

	--e25-badge-size: 10px;
	--e25-badge-padding: 1px 6px;
}

/* ---------- column headers ---------- */

.experimental-25 .listRow.listHeader {
	height: var(--e25-header-height);
	border-bottom: 1px solid var(--e25-divider);
}

.experimental-25 .listHeader .table-view-group-inner {
	font-size: var(--e25-header-size);
	font-weight: var(--e25-header-weight);
	letter-spacing: var(--e25-header-tracking);
	text-transform: uppercase;
	color: var(--e25-muted);
}

/* ---------- group rows ---------- */

.experimental-25 .grouprow.listRow {
	height: var(--e25-group-height);
	background-color: transparent;
	border-bottom: 1px solid var(--e25-divider);
}

.experimental-25 .grouprow .groupCell {
	font-size: var(--e25-group-size);
	font-weight: var(--e25-group-weight);
	color: var(--e25-ink);
}

/* ---------- data rows ---------- */

.experimental-25 .datarow .list-cell {
	font-size: var(--e25-cell-size);
	font-weight: var(--e25-cell-weight);
	color: var(--e25-ink);
}

.experimental-25 .datarow,
.experimental-25 .listColumnBorders {
	border-color: var(--e25-divider);
}

/* ---------- status pills ----------

	The design renders status as a tinted pill. In the app the colour lives on a
	descendant (.drop-down-button-status.wf-*), not on the container, so the pill
	is selected with :has(). Moving the wf- class onto the container in grid.js
	would let these collapse into two rules — worth considering, but it is a
	client change rather than CSS.
*/

.experimental-25 .list-cell .selectDropDown.grid-drop-down {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: var(--e25-pill-padding);
	border-radius: var(--e25-pill-radius);
	font-size: var(--e25-pill-size);
	font-weight: var(--e25-pill-weight);
	white-space: nowrap;
}

.experimental-25 .list-cell .selectDropDown.grid-drop-down .select-indicator-outer-grid {
	display: none;
}

.experimental-25 .list-cell .selectDropDown.grid-drop-down .selectDropDownName {
	color: inherit;
}

.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-project-at-risk) { color: #ffbf10; background-color: #ffbf101f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-project-complete) { color: #449a88; background-color: #449a881f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-project-in-trouble) { color: #cf371b; background-color: #cf371b1f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-project-on-hold) { color: #737373; background-color: #7373731f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-project-on-track) { color: #8382ed; background-color: #8382ed1f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-10) { color: #2c9ab7; background-color: #2c9ab71f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-11) { color: #fb7ec9; background-color: #fb7ec91f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-12) { color: #af66b1; background-color: #af66b11f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-13) { color: #3c6bd1; background-color: #3c6bd11f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-14) { color: #973f05; background-color: #973f051f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-15) { color: #31d056; background-color: #31d0561f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-16) { color: #eb7b64; background-color: #eb7b641f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-17) { color: #31d0bd; background-color: #31d0bd1f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-18) { color: #ff8710; background-color: #ff87101f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-19) { color: #4d90ca; background-color: #4d90ca1f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-20) { color: #bebebe; background-color: #bebebe1f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-accepted) { color: #8382ed; background-color: #8382ed1f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-blocked) { color: #cf371b; background-color: #cf371b1f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-cancelled) { color: #9b9b9b; background-color: #9b9b9b1f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-complete) { color: #449a88; background-color: #449a881f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-in-progress) { color: #9fb604; background-color: #9fb6041f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-new) { color: #c4b6f4; background-color: #c4b6f41f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-on-hold) { color: #484848; background-color: #4848481f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-reviewed) { color: #f1d900; background-color: #f1d9001f; }
.experimental-25 .list-cell .selectDropDown.grid-drop-down:has(.wf-task-under-review) { color: #ffbf10; background-color: #ffbf101f; }

/* ---------- surface and dividers ----------

	The grid paints rows white on a grey `.list-bg` surface (#f4f4f4) and separates
	columns with vertical borders on `.table-view-group`. The design has a white
	surface, no vertical rules, and a horizontal divider per row.
*/

.experimental-25 .list-bg {
	background-color: #ffffff;
}

.experimental-25 .table-view-group {
	border-right: none;
}

.experimental-25 .datarow .datarow-inner {
	border-bottom: 1px solid var(--e25-divider);
}

.experimental-25 .listHeader .table-view-group {
	border-right: none;
}

/* ---------- group count badge ---------- */

.experimental-25 .grouprow .groupCell .count,
.experimental-25 .grouprow .groupCell .group-count {
	font-size: var(--e25-badge-size);
	font-weight: 600;
	padding: var(--e25-badge-padding);
	border-radius: 999px;
	color: var(--e25-muted);
	background-color: #f1f5f9;
}

/* ---------- row density ----------

	grid.js measures row height at runtime (_rowHeight = e.outerHeight()) and
	drives virtual-scroll padding from it, so changing it here is safe — but the
	measurement is guarded by `if (!this._rowHeight)`, so the flag must be on
	before first render. Toggling it live leaves stale scroll arithmetic.
*/

.experimental-25 .projects .datarow {
	height: 38px;
}

/* ---------- status stripe ----------

	The app draws a 5px .workflow-bar in the status colour down the left edge of
	each row. The design has no such stripe — status is carried by the pill alone.
*/

.experimental-25 .datarow .workflow-bar {
	display: none;
}

/* ---------- group count badge ---------- */

.experimental-25 .grouprow .list-view-count {
	font-size: var(--e25-badge-size);
	font-weight: 600;
	min-width: 0;
	height: auto;
	padding: var(--e25-badge-padding);
	border-radius: 999px;
	color: var(--e25-muted);
	background-color: #f1f5f9;
}

/* ---------- group row spacing ----------

	.projects-view .grouprow adds 12px/13px vertical padding on top of the 32px
	content box (box-sizing is content-box), giving a 59px band. The design's
	group row is 32px with a little air above it to separate it from the previous
	group's last row.
*/

.experimental-25 .projects-view .grouprow {
	padding-top: 8px;
	padding-bottom: 0;
}

/* ---------- progress donut ----------

	The donut is an unclassed <svg> rendered with width="38" height="38" and NO
	viewBox, drawing at absolute coordinates (circle cx=19 r=14). Setting CSS
	width/height therefore crops it instead of scaling it. Scaling the rendered
	result is the only pure-CSS option; it leaves the 38px layout box intact,
	which is fine because the row is 38px too.

	The proper fix is one line in the component: add viewBox="0 0 38 38", after
	which width/height would scale normally. Worth doing when we touch the client.
*/

.experimental-25 .datarow .display-flex.justify-center svg {
	transform: scale(0.53);
	transform-origin: center;
}