/* Club settings with its court chips, and the administration console's
   tables of clubs, coaches, players, revenue, coupons and invoices. */

/* ---- Club settings ---- */

/* The club's logo, against the field that names the club. */
.tj-settings-identity {
	display: flex;
	align-items: center;
	gap: 22px;
}

.tj-settings-logo {
	flex: none;
}

.tj-settings-idbody {
	flex: 1;
	min-width: 0;
}

.tj-settings-namerow {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Named on the row so the type here outranks the shared .tj-input, which is
   set further down the file. An input without a floor of its own holds the
   width of the twenty characters it asks for by default, however little room
   the line has — which is what carried Save off the side of a phone. */
.tj-settings-namerow > .tj-input {
	flex: 1;
	min-width: 0;
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 20px;
}

/* One club the caller belongs to: its badge, its name over what it holds, and
   the control that opens it. The name is worth reading whole, so rather than
   ellipsis it down to a few characters the row keeps a floor under it and lets
   Switch wrap onto a line of its own once the two no longer fit together. */
.tj-clubrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	border: 1.5px solid var(--line);
	border-radius: 14px;
	padding: 12px 16px;
}

.tj-clubrow-body {
	flex: 1;
	min-width: 150px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tj-clubrow-name {
	font-size: 14.5px;
}

.tj-clubrow-switch {
	flex: none;
	margin-left: auto;
}

/* ---- Court chips (club settings) ---- */

.tj-court-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 999px;
	background: var(--surface2);
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 700;
}

.tj-court-chip a {
	color: var(--muted);
	text-decoration: none;
	font-weight: 700;
	line-height: 1;
}

.tj-court-chip a:hover {
	color: var(--alert);
}

/* The chip's name is a borderless input sized to its text. */
.tj-court-chip input {
	border: none;
	background: transparent;
	font: inherit;
	color: inherit;
	padding: 0;
	outline: none;
	field-sizing: content;
	min-width: 44px;
}

/* Editable chips stay flat at rest; a ring on hover advertises that the
   name inside is a text field, and it turns accent while typing. */
.tj-court-chip:has(input) {
	transition: box-shadow .15s ease;
}

.tj-court-chip:has(input):hover {
	box-shadow: inset 0 0 0 1.5px var(--line);
}

.tj-court-chip:has(input:focus) {
	box-shadow: inset 0 0 0 1.5px var(--accent);
}

/* The add affordance is a dashed chip that is really a text input. */
.tj-court-add {
	width: 78px;
	border: 1.5px dashed var(--line);
	border-radius: 999px;
	background: transparent;
	padding: 7px 14px;
	font-family: 'Barlow', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	text-align: center;
	outline: none;
	cursor: pointer;
	transition: width .15s ease, border-color .15s ease, background .15s ease;
}

/* Until it has focus the add chip behaves like a button: pointer cursor
   and an accent invitation on hover; the focus flips it into a text field. */
.tj-court-add:hover {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.tj-court-add:hover::placeholder {
	color: var(--accent);
	opacity: 1;
}

.tj-court-add:focus {
	width: 150px;
	border-color: var(--accent);
	background: transparent;
	cursor: text;
}

/* ---- Admin clubs table ---- */

.tj-club-badge {
	position: relative;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 9px;
	color: #fff;
	display: grid;
	place-items: center;
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	font-size: 14px;
	overflow: hidden;
}

.tj-club-badge-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tj-iconbtn {
	width: 27px;
	height: 27px;
	flex: none;
	display: inline-grid;
	place-items: center;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
	border-radius: 8px;
	cursor: pointer;
	transition: color .15s, border-color .15s;
}

.tj-iconbtn:hover,
.tj-iconbtn-on {
	color: var(--accent);
	border-color: var(--accent);
}

/* An unpaid-invoice marker riding the corner of an icon button. */
.tj-billdot {
	position: absolute;
	top: -3px;
	right: -3px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #d43a3a;
	border: 2px solid var(--surface);
}

.tj-clubgrid {
	display: grid;
	grid-template-columns: 2.2fr 1.8fr 0.7fr 0.8fr 1.1fr 1.2fr;
	gap: 14px;
	align-items: center;
}

.tj-coachgrid {
	display: grid;
	grid-template-columns: 2.4fr 2fr 0.8fr 1.2fr 1.1fr;
	gap: 14px;
	align-items: center;
}

.tj-stripegrid {
	display: grid;
	grid-template-columns: 1.1fr .7fr 2fr 1fr 1fr;
	gap: 12px;
	align-items: center;
}

/* A figure column, and a column whose controls sit at its far end. Both give
   up their right alignment once the table folds into stacked rows. */
.tj-cell-num {
	text-align: right;
}

.tj-cell-end {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* The clubs ⇄ private-coaches flip, sized like the pill buttons beside it. */
.tj-seg-pill {
	height: 38px;
	box-sizing: border-box;
	border-radius: 999px;
}

.tj-seg-pill .tj-seg-opt {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 18px;
	border-radius: 999px;
}

/* One line of the admin console's club and coach tables. The wrapper draws the
   rounded border around the whole table, so a row carries nothing but the rule
   that separates it from the next. */
.tj-tablerow {
	padding: 12px 22px;
	border-bottom: 1px solid var(--line);
	transition: background .15s;
}

.tj-tablerow:hover {
	background: var(--accent-soft);
}

.tj-billgrid {
	display: grid;
	grid-template-columns: 1.3fr 1.3fr 1.5fr 0.9fr 0.9fr 0.4fr;
	gap: 12px;
	align-items: center;
}

/* One invoice line, shared by the coach billing page and the admin console. */
.tj-billrow {
	padding: 8px 0;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
}

.tj-billrow-no {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--muted);
}

.tj-billrow-month {
	font-weight: 600;
}

.tj-billrow-amount {
	text-align: right;
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	font-size: 14px;
}

.tj-billrow-status {
	text-align: center;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 3px 0;
	border-radius: 999px;
}

.tj-billrow-paid {
	background: rgba(78, 138, 74, .16);
	color: #4e8a4a;
}

.tj-billrow-due {
	background: var(--accent-soft);
	color: var(--accent);
}

.tj-billrow-dl {
	display: flex;
	justify-content: flex-end;
}

/* A card's own head: the kicker naming it on the left, a status pill or a line
   of fine print on the right. The billing pages and the invoice card share it,
   so all three heads fold the same way once a phone runs out of width. */
.tj-cardhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.tj-cardhead-note {
	font-size: 11px;
}

/* A card's figures: a label on the left and its amount on the right, one line
   per row, with the last ruled off from the rest as the total. */
.tj-moneylines {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13.5px;
}

.tj-moneyline {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.tj-moneyline-total {
	border-top: 1px solid var(--line);
	padding-top: 8px;
	margin-top: 2px;
}

.tj-moneyline-total > strong:last-child {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-size: 17px;
}

.tj-sectionhead {
	font-weight: 700;
	font-size: 22px;
	letter-spacing: .06em;
}

/* The console's own layout bands. Each track floor is capped at the full width
   so a narrow phone folds the band into one column instead of pushing the page
   into a sideways scroll. */
.tj-adminstrip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: 12px;
	margin-bottom: 30px;
}

.tj-pricegrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 16px;
	margin-bottom: 16px;
}

.tj-peoplegrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
	gap: 16px;
	align-items: start;
}

/* One priced line: what is being priced on the left, its field and unit on
   the right. The unit is pinned so the units of stacked rows line up. */
.tj-pricerow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 12px;
}

.tj-pricerow-sep {
	border-top: 1px solid var(--line);
	margin-top: 12px;
}

.tj-pricerow-label {
	font-size: 13.5px;
	font-weight: 600;
}

.tj-priceunit {
	font-size: 12px;
	width: 118px;
}

/* A table's heading line above its search box and create button. */
.tj-admintoolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.tj-admintoolbar-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tj-admintoolbar-seg {
	width: 280px;
}

.tj-input.tj-tablesearch {
	width: 220px;
	height: 38px;
	border-radius: 999px;
}

/* The revenue table's own search, which has no toolbar to sit in and so
   pushes itself to the card's right edge. */
.tj-input.tj-revsearch {
	display: block;
	width: 240px;
	height: 38px;
	border-radius: 999px;
	margin: 0 0 12px auto;
}

.tj-adminstat {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 14px 18px;
}

.tj-adminstat-value {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	font-size: 28px;
	line-height: 1;
	color: var(--accent);
}

.tj-adminstat-label {
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin-top: 5px;
}

.tj-newclub {
	background: var(--surface);
	border: 1.5px solid var(--accent);
	border-radius: 16px;
	padding: 18px 20px;
	margin-bottom: 12px;
}

.tj-newclub-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: flex-start;
}

/* The row's search field, which carries its result pills underneath, against
   the plain single field beside it. */
.tj-newclub-main {
	flex: 2;
	min-width: 280px;
}

.tj-newclub-side {
	flex: 1;
	min-width: 200px;
}

.tj-newclub-ok {
	color: var(--ball-ink);
	font-size: 12.5px;
	font-weight: 700;
	margin-top: 10px;
}

.tj-headpill {
	border: 1px solid var(--line);
	background: var(--surface2);
	color: var(--ink);
	font-weight: 600;
	font-size: 12px;
	padding: 7px 13px;
	border-radius: 999px;
	cursor: pointer;
	transition: all .15s;
}

.tj-headpill:hover {
	border-color: var(--accent);
}

.tj-headpill-on {
	border-color: var(--accent);
	background: var(--accent-soft);
	color: var(--accent);
}

.tj-trendbar {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	height: 100%;
	cursor: pointer;
	text-decoration: none;
}

.tj-trendbar:hover {
	opacity: .8;
}

.tj-trendbar-fill {
	width: 100%;
	max-width: 52px;
	display: block;
	border-radius: 5px 5px 0 0;
	transition: height .3s;
}

.tj-personrow {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 20px;
	border-bottom: 1px solid var(--line);
}

/* The club pills a person carries, held to the row's right half so a long
   membership list never crowds out the name beside it. */
.tj-persontags {
	flex: none;
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	justify-content: flex-end;
	max-width: 48%;
}

/* One member inside an opened club or private-coach panel: who they are, then
   the buttons that change their standing, pushed to the row's end. */
.tj-memberrow {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid var(--line);
	font-size: 13px;
}

/* What pushes a member row's buttons to its end; pointless once it wraps. */
.tj-memberrow-gap {
	flex: 1;
}

/* Compound with .tj-avatar, whose base rule is declared later in the sheet. */
.tj-avatar.tj-avatar-soft {
	background: var(--surface2);
	color: var(--ink);
}

.tj-clubtag {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
}

/* The pill's unassociate cross: dim until the pill is hovered, then live. */
.tj-clubtag-x {
	margin-left: 5px;
	font-size: 11px;
	line-height: 1;
	color: inherit;
	opacity: .45;
	text-decoration: none;
	cursor: pointer;
}

.tj-clubtag:hover .tj-clubtag-x { opacity: .8; }
.tj-clubtag-x:hover { opacity: 1; color: #d43a3a; }

/* A private coach's own business: outlined rather than filled, so it reads as
   a different kind of tie than the coloured club memberships beside it. */
.tj-clubtag-private {
	background: transparent;
	border: 1px solid var(--line);
	color: var(--muted);
}

.tj-clubtag-0 { background: rgba(224, 84, 38, .13); color: #b5461f; }
.tj-clubtag-1 { background: rgba(78, 138, 74, .15); color: #3f7a3a; }
.tj-clubtag-2 { background: rgba(74, 99, 168, .15); color: #4a63a8; }
.tj-clubtag-3 { background: rgba(140, 104, 176, .16); color: #7a5aa8; }

.tj-headbtn {
	flex: none;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
	font-weight: 700;
	font-size: 10.5px;
	padding: 4px 11px;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s, border-color .15s;
}

.tj-headbtn:hover {
	color: var(--accent);
	border-color: var(--accent);
}

.tj-headbtn-off:hover {
	color: #d43a3a;
	border-color: #d43a3a;
}

.tj-pagebtn {
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	border-radius: 8px;
	width: 30px;
	height: 30px;
	display: inline-grid;
	place-items: center;
	cursor: pointer;
	text-decoration: none;
	transition: border-color .15s;
}

.tj-pagebtn:hover {
	border-color: var(--accent);
}

.tj-pagebtn-off {
	color: var(--line);
	cursor: default;
}

.tj-pagebtn-off:hover {
	border-color: var(--line);
}