/* The administration's tables folded onto a phone's width. */

/* ---- The administration on a narrow screen ----

   Its tables carry five to eight columns each, which stop fitting well before
   a phone's width. Below this every row folds onto two or three lines of its
   own instead: the column headings step aside for a label carried by each
   cell, and figures that lined up on the right fall back to reading from the
   left, where a stacked row starts. Nothing is dropped — an operator on a
   phone still sees every column. */
@media (max-width: 760px) {
	.tj-gridhead {
		display: none;
	}

	/* The revenue headings double as its sort controls, so that one line
	   stays — as a plain sort bar rather than a set of column titles. */
	.tj-revenuegrid.tj-gridhead {
		display: flex;
		gap: 16px;
	}

	.tj-revenuegrid.tj-gridhead > span {
		display: none;
	}

	/* Each folded cell names itself with the heading it lost. */
	.tj-clubgrid > [data-label]::before,
	.tj-coachgrid > [data-label]::before,
	.tj-revenuegrid > [data-label]::before,
	.tj-coupongrid > [data-label]::before {
		content: attr(data-label);
		margin-right: 6px;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: .07em;
		text-transform: uppercase;
		color: var(--muted);
	}

	.tj-cell-num {
		text-align: left;
	}

	.tj-cell-end {
		justify-content: flex-start;
	}

	.tj-clubgrid,
	.tj-coachgrid,
	.tj-revenuegrid,
	.tj-coupongrid,
	.tj-stripegrid,
	.tj-billgrid {
		align-items: center;
		row-gap: 5px;
		column-gap: 12px;
	}

	.tj-clubgrid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
		grid-template-areas:
			"club  club    actions"
			"head  head    head"
			"staff players price";
	}

	.tj-clubgrid > :nth-child(1) { grid-area: club; }
	.tj-clubgrid > :nth-child(2) { grid-area: head; }
	.tj-clubgrid > :nth-child(3) { grid-area: staff; }
	.tj-clubgrid > :nth-child(4) { grid-area: players; }
	.tj-clubgrid > :nth-child(5) { grid-area: price; }
	.tj-clubgrid > :nth-child(6) { grid-area: actions; }

	.tj-coachgrid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
		grid-template-areas:
			"coach   coach   actions"
			"biz     biz     biz"
			"players players price";
	}

	.tj-coachgrid > :nth-child(1) { grid-area: coach; }
	.tj-coachgrid > :nth-child(2) { grid-area: biz; }
	.tj-coachgrid > :nth-child(3) { grid-area: players; }
	.tj-coachgrid > :nth-child(4) { grid-area: price; }
	.tj-coachgrid > :nth-child(5) { grid-area: actions; }

	.tj-revenuegrid {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name actions"
			"plan plan"
			"ai   revenue";
	}

	.tj-revenuegrid > :nth-child(1) { grid-area: name; }
	.tj-revenuegrid > :nth-child(2) { grid-area: plan; }
	.tj-revenuegrid > :nth-child(3) { grid-area: ai; }
	.tj-revenuegrid > :nth-child(4) { grid-area: revenue; }
	.tj-revenuegrid > :nth-child(5) { grid-area: actions; }

	.tj-coupongrid {
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas:
			"code     status   revoke"
			"type     months   ai"
			"redeemed redeemed created";
	}

	.tj-coupongrid > :nth-child(1) { grid-area: code; }
	.tj-coupongrid > :nth-child(2) { grid-area: type; }
	.tj-coupongrid > :nth-child(3) { grid-area: months; }
	.tj-coupongrid > :nth-child(4) { grid-area: ai; }
	.tj-coupongrid > :nth-child(5) { grid-area: status; }
	.tj-coupongrid > :nth-child(6) { grid-area: redeemed; }
	.tj-coupongrid > :nth-child(7) { grid-area: created; }
	.tj-coupongrid > :nth-child(8) { grid-area: revoke; }

	.tj-stripegrid {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"when    kind"
			"what    what"
			"outcome amount";
	}

	.tj-stripegrid > :nth-child(1) { grid-area: when; }
	.tj-stripegrid > :nth-child(2) { grid-area: kind; }
	.tj-stripegrid > :nth-child(3) { grid-area: what; }
	.tj-stripegrid > :nth-child(4) { grid-area: amount; }
	.tj-stripegrid > :nth-child(5) { grid-area: outcome; }

	.tj-billgrid {
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas:
			"no     status dl"
			"month  month  amount"
			"detail detail detail";
	}

	.tj-billgrid > :nth-child(1) { grid-area: no; }
	.tj-billgrid > :nth-child(2) { grid-area: month; }
	.tj-billgrid > :nth-child(3) { grid-area: detail; }
	.tj-billgrid > :nth-child(4) { grid-area: amount; }
	.tj-billgrid > :nth-child(5) { grid-area: status; }
	.tj-billgrid > :nth-child(6) { grid-area: dl; }

	/* The status pill sizes to its own text once the column no longer holds
	   it open. */
	.tj-billrow-status {
		padding: 3px 11px;
	}

	/* The rows give back some of the side padding a stacked row cannot spare. */
	.tj-tablerow {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* A create form's fields each take the whole line rather than holding out
	   for the width they ask for on a desktop. */
	.tj-newclub-row > * {
		flex: 1 1 100%;
		min-width: 0;
	}

	/* The mint row's AI switch has no field to stand clear of once stacked. */
	.tj-mintrow-ai {
		margin-left: 0;
	}

	.tj-admintop h1 {
		font-size: 32px;
	}

	/* The section flip and its search box each claim their own line, and the
	   search grows into whatever the create button leaves. */
	.tj-admintoolbar-seg,
	.tj-admintoolbar-actions {
		width: 100%;
	}

	.tj-admintoolbar-actions {
		flex-wrap: wrap;
	}

	/* The search keeps a legible width of its own, so a long create button
	   drops to the next line rather than squeezing the field shut. */
	.tj-input.tj-tablesearch {
		flex: 1 1 auto;
		min-width: 170px;
		width: auto;
	}

	.tj-input.tj-revsearch {
		width: 100%;
	}

	/* A priced line's label takes the whole width rather than folding into a
	   narrow column beside its field, and the unit no longer needs pinning. */
	.tj-pricerow {
		flex-wrap: wrap;
		gap: 6px 10px;
	}

	.tj-pricerow-label {
		flex: 1 1 100%;
	}

	.tj-priceunit {
		width: auto;
	}

	/* A person's club pills drop below their name; the mimic button is ordered
	   ahead of them so it stays on the first line. */
	.tj-persontags {
		order: 1;
		flex-basis: 100%;
		max-width: 100%;
		justify-content: flex-start;
	}

	.tj-personrow {
		flex-wrap: wrap;
		padding: 11px 16px;
	}

	/* A member's buttons wrap under their name instead of squeezing it out. */
	.tj-memberrow {
		flex-wrap: wrap;
		gap: 6px 10px;
	}

	.tj-memberrow-gap {
		display: none;
	}
}