/* The Play / Join popups (hall.html #create-table-popup, #join-table-popup; js/gemp-022/tables/*).  The base form
   layout (.table-form, .inner-table-form, .label-column, .result-box...) stays in hall.css. */

/* ---- (i) help toggles: the same look as the admin pages (css/gemp-001/leagueAdmin.css) ---- */
.info-toggle {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	line-height: 1.1em;
	margin-left: 0.35em;
	border-radius: 50%;
	border: 1px solid #8ab;
	color: #8ab;
	background: transparent;
	font-size: 75%;
	font-weight: bold;
	font-style: italic;
	font-family: Georgia, serif;
	text-align: center;
	cursor: pointer;
	vertical-align: middle;
	user-select: none;
}

.info-toggle:hover,
.info-toggle:focus-visible {
	background: #8ab;
	color: #111;
	outline: none;
}

.info-text {
	color: #aaa;
	font-size: 85%;
	margin: -0.2em 0 0.3em 0;
	padding: 0.3em 0.6em;
	border-left: 2px solid #567;
}

.info-text code {
	color: #ddd;
}

/* the heading's (i) keeps the heading's size readable */
.table-form h1 .info-toggle {
	font-size: 45%;
}

/* ---- the popup itself: one size for the menu and every form (CreateTable.WIDTH x HEIGHT, clamped to the window);
   a form taller than that scrolls inside it ---- */
.play-dialog .ui-dialog-content {
	overflow-y: auto;
	padding: 0.5em 1.5em 2em 1.5em;
}

/* the Back button stays in the upper left while a long form scrolls */
#create-table-overlay {
	position: sticky;
	top: 0;
	z-index: 5;
	align-self: flex-start;
}

/* room around the forms, as before the popup sized itself to its content */
.play-flow .table-form > .inner-table-form,
.play-flow .table-form > h1 {
	margin-top: 1rem;
}

.play-flow .inner-table-form,
.play-flow .player-deck {
	gap: 0.6em;
}

.play-flow .table-blurb {
	margin-bottom: 0.8rem;
}

.play-flow .result-label {
	margin-top: 0.4em;
}

#create-table-popup #create-table-selection {
	margin: 2rem 4rem;
	gap: 1.6rem;
}

/* as on production: the icon sits just left of the title and the pair is centred; the subtitle is centred on its own
   line underneath both */
#create-table-selection button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	text-align: center;
}

.play-choice-title {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* the icon span is blockified inside the flex title; give it the height it had as an inline span (35px image).  Its
   50px left padding (icons.css) is the icon plus the gap before the title, as on production. */
#create-table-selection .bigger-icon {
	flex: 0 0 auto;
	height: 27px;
}

.play-subtitle {
	font-size: 55%;
	font-weight: normal;
	color: #bbb;
}

#join-table-subtitle {
	font-size: 95%;
	text-align: center;
	margin-top: -0.4em;
}

#tournament-table-options,
#play-league-panel {
	width: 90%;
	padding: 1rem;
}

/* the league list here is for joining: no league code for league admins (they look codes up in the Events tab and
   admin pages), which leaves the row its room */
#play-league-list .event-row-code {
	display: none;
}

#play-league-panel {
	border: 1px solid grey;
	max-height: 45vh;
	overflow-y: auto;
}

/* ---- results and errors ---- */
.result-box.result-success {
	border-color: #5a7a4a;
}

.result-box.result-error,
.play-error {
	border-color: #a55;
	color: #f2c4c4;
}

.play-error {
	border: 1px solid #a55;
	padding: 0.4em 0.8em;
	margin: 0.4em auto;
	width: 90%;
}

.play-next-steps {
	border: 1px solid #567;
	padding: 0.5em 0.8em;
	margin-bottom: 0.6em;
}

.play-next-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0.4em 0;
}

/* ---- format (i) text ---- */
.format-info .format-description {
	color: #ccc;
	margin: 0.3em 0 0.2em 0;
}

.format-info .format-facts {
	margin: 0.3em 0;
	padding-left: 1.4em;
}

.format-info .format-links {
	margin-top: 0.2em;
}

.format-info a {
	color: #8ab;
}

/* disabled but still readable: the placeholder explains why the field is off */
#unranked-invitee:disabled,
#unranked-desc:disabled {
	background-color: #333333;
	color: #bbbbbb;
	border-color: #555555;
}

#unranked-invitee:disabled::placeholder,
#unranked-desc:disabled::placeholder {
	color: #858585;
	opacity: 1;
}

/* enabled fields' hints read brighter than disabled ones */
.table-form input:not(:disabled)::placeholder,
.table-form textarea:not(:disabled)::placeholder {
	color: #9a9a9a;
	opacity: 1;
}

/* ---- PlayerPicker (js/gemp-022/playerPicker.js): one player, from the hall or by search ---- */
.player-picker {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	align-items: stretch;
}

.player-picker .player-picker-input {
	flex: 1 1 auto;
	min-width: 0;
}

.player-picker-toggle {
	flex: 0 0 auto;
	width: 2em;
	padding: 0;
	margin-left: 2px;
	border: 1px solid #666;
	background: #333;
	color: #ddd;
	cursor: pointer;
}

.player-picker-toggle:hover:not(:disabled),
.player-picker-toggle:focus-visible {
	background: #455;
}

.player-picker-toggle:disabled {
	opacity: 0.6;
	cursor: default;
}

.ui-autocomplete.player-picker-menu {
	max-height: 18em;
	overflow-y: auto;
	overflow-x: hidden;
}

.player-picker-menu .player-picker-heading {
	padding: 0.3em 0.6em 0.1em 0.6em;
	font-size: 80%;
	font-weight: bold;
	color: #9ab;
	cursor: default;
}

.player-picker-menu .player-picker-note {
	font-weight: normal;
	font-style: italic;
	color: #aaa;
}

/* ---- narrow windows ---- */
@media (max-width: 700px) {
	#create-table-popup #create-table-selection {
		margin: 1rem 0.5rem;
	}

	#create-table-selection button {
		font-size: 1.3rem;
	}

	.play-flow .table-form,
	#tournament-table-options,
	#play-league-panel {
		width: 100%;
	}

	.play-flow .label-column {
		width: auto;
		flex-basis: 40%;
		flex-shrink: 1;
	}

	.play-flow .table-blurb {
		margin: 0;
	}
}