/* The session builder's own layout, the responsive shell that carries the
   sidebar as a drawer, and the coach's month calendar. */

/* ---- Session builder ---- */

/* The title and its date and time, against the running total, the save and
   the way over to the player app. */
.tj-builder-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.tj-builder-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.tj-builder-budget {
	text-align: right;
	min-width: 140px;
}

.tj-builder-bar {
	width: 120px;
	height: 5px;
	border-radius: 99px;
	background: var(--surface2);
	overflow: hidden;
	margin: 7px 0 0 auto;
}

/* The plan being built, against the templates and drill picker it is built
   from. Laid out like the schedule's month and day panels, and collapsing
   with them once the columns stop being worth their width. */
.tj-builder-cols {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
	gap: 26px;
	align-items: start;
}

.tj-builder-side {
	position: sticky;
	top: 36px;
	padding: 20px 22px;
}

/* A session being read rather than built has no picker beside it, so the
   plan takes the width the two columns shared. */
.tj-builder-review {
	grid-template-columns: minmax(0, 1fr);
}

/* What is on court right now: the block the running session sits on, and the
   badge that says so. Ball-yellow rather than accent — accent is the colour of
   a plan, and this is the one line of it that is actually happening. */
.tj-nowpill {
	background: var(--ball);
	color: var(--on-ball);
	border-color: transparent;
	font-weight: 700;
}

.tj-blockrow-now {
	box-shadow: inset 0 0 0 2px var(--ball);
}

/* One block in the plan: its minutes, a tint for what kind of block it is,
   what it is, and the controls that move or drop it. */
.tj-blockrow {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-radius: 14px;
}

.tj-blockrow-mins {
	width: 58px;
	flex: none;
	text-align: center;
}

.tj-blockrow-tint {
	width: 4px;
	flex: none;
	align-self: stretch;
	border-radius: 99px;
}

.tj-blockrow-body {
	flex: 1;
	min-width: 0;
}

.tj-blockrow-acts {
	display: flex;
	gap: 6px;
	flex: none;
}

/* Naming a block of your own, with the minutes stepped beside the name. The
   name is told it may shrink — a flex item defaults to its content's width as
   its floor, which would push the panel wider than the screen it sits on. */
.tj-customblock {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--surface);
	border: 1.5px solid var(--accent);
	border-radius: 14px;
	padding: 16px 18px;
}

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

.tj-customblock-name {
	flex: 1;
	min-width: min(180px, 100%);
}

.tj-customblock-steps {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
}

.tj-builder-tplhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

/* ---- Responsive shell ---- */

/* Hamburger that brings the hidden sidebar back as a drawer on narrow
   screens; body.tj-side-open (toggled in theme.js) shows the drawer. */
.tj-menu-btn {
	display: none;
	position: fixed;
	top: calc(var(--mimic-banner-h, 0px) + 14px);
	left: 14px;
	z-index: 45;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
}

.tj-menu-btn svg {
	width: 20px;
	height: 20px;
}

.tj-side-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(0, 0, 0, .45);
}

/* ---- Month calendar (coach schedule) ---- */

.tj-sched-cols {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
	gap: 26px;
	align-items: start;
}

.tj-cal-nav {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	color: var(--muted);
	font-size: 15px;
	text-decoration: none;
	transition: color .15s, border-color .15s;
}

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

.tj-cal-dow {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 6px 0;
}

.tj-cal-cell {
	aspect-ratio: 1;
	border-radius: 12px;
	border: 1.5px solid transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}

.tj-cal-cell:hover,
.tj-cal-cell.tj-selected,
.tj-cal-cell.tj-drop-hover {
	background: var(--accent-soft);
}

.tj-cal-cell.tj-today,
.tj-cal-cell.tj-drop-hover {
	border-color: var(--accent);
}

.tj-cal-num {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--ink);
}

.tj-cal-cell.tj-today .tj-cal-num {
	color: var(--accent);
}

.tj-cal-dots {
	display: flex;
	gap: 3px;
	height: 6px;
}

.tj-cal-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.tj-sched-row {
	border-top: 1px solid var(--line);
	padding: 12px 0 4px;
}

.tj-sched-row.tj-draggable {
	cursor: grab;
}

.tj-drag-grip {
	flex: none;
	font-size: 13px;
	letter-spacing: 1px;
	cursor: grab;
	user-select: none;
}

.tj-icon-btn {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: var(--surface);
	color: var(--muted);
	font-size: 11px;
	text-decoration: none;
	transition: color .15s, border-color .15s;
}

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

.tj-icon-btn.tj-danger:hover {
	color: #d43a3a;
	border-color: #d43a3a;
}

.tj-att-chip {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--surface2);
	color: var(--muted);
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 12px;
	text-decoration: line-through;
	transition: transform .15s;
}

.tj-att-chip.tj-on {
	background: var(--ball);
	color: var(--on-ball);
	text-decoration: none;
}

.tj-att-chip:hover {
	transform: translateY(-1px);
	text-decoration: inherit;
}

.tj-pick-chip {
	height: 28px;
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	background: var(--surface2);
	color: var(--muted);
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .03em;
	padding: 0 12px;
	text-decoration: none;
	transition: transform .15s;
}

.tj-pick-chip.tj-on {
	background: var(--accent);
	color: var(--on-accent);
}

.tj-pick-chip:hover {
	transform: translateY(-1px);
}

.tj-dash-btn,
.tj-plan-btn {
	flex: 1;
	text-align: center;
	padding: 11px;
	border-radius: 12px;
	font-size: 13.5px;
	text-decoration: none;
	transition: color .2s, border-color .2s;
}

.tj-dash-btn {
	border: 1.5px dashed var(--line);
	color: var(--muted);
	font-weight: 600;
}

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

.tj-plan-btn {
	border: 1.5px solid var(--line);
	background: var(--surface);
	color: var(--accent);
	font-weight: 700;
}

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

.tj-hist-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 2px;
	border-top: 1px solid var(--line);
	color: inherit;
	text-decoration: none;
	transition: background .15s;
}

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