/* ==========================================================================
   Public player database — search form + results table
   Used by /players and /veterans (templates/Players/index.php and the
   players-rows element).

   Palette is taken from web/style.css so this matches the rest of the site:
     #2aaea8  brand teal (same as .btn_green)
     #118f89  brand teal, dark
     #292b2c  headings / primary text
     #687188  muted text
     #ededed  hairlines
   ========================================================================== */

/* --- sticky filter toolbar ----------------------------------------------
   The alphabet strip and the search row used to push the first result about
   630px down the page — only 1 row was visible on a 1366x768 laptop. They now
   share one compact strip that sticks below the site header while scrolling.

   67px is the height the header collapses to (.header_wrap.nav-fixed); the
   table head then parks below this toolbar via --pl-toolbar-h, set by JS. */
/* Bootstrap's `.accordion > .card` sets overflow:hidden, which silently
   disables position:sticky on everything inside it. Lifted for this page's
   card only — the selector must out-specify Bootstrap's, so keep the
   `.accordion >` prefix. */
.accordion > .card.pl-card,
.pl-card { overflow: visible; }

.pl-toolbar {
	position: sticky;
	top: 67px;
	z-index: 20;
	margin-bottom: 16px;
	padding: 12px 0 10px;
	background: #fff;
	border-bottom: 1px solid #eef1f1;
}

.pl-searchrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 10px;
}

.pl-searchrow .playersearch_form { flex: 1 1 auto; margin: 0; }

/* Result counter */
.pl-count {
	flex: 0 0 auto;
	padding: 5px 14px;
	border-radius: 20px;
	background: rgba(42, 174, 168, .10);
	color: #118f89;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

/* --- search form ---------------------------------------------------------
   The inputs were fixed-width and clipped their own placeholder
   ("Search By TSTT..."), so lay them out as a flexible row instead. */
.playersearch_form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 22px;
}

.playersearch_form input[type="text"],
.playersearch_form select {
	flex: 1 1 170px;
	min-width: 150px;
	width: auto;
	height: 38px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid #e2e6e6;
	border-radius: 22px;
	background: #fff;
	color: #292b2c;
	font-size: 14px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.playersearch_form input[type="text"]::placeholder {
	color: #9aa2a2;
}

.playersearch_form input[type="text"]:focus,
.playersearch_form select:focus {
	outline: 0;
	border-color: #2aaea8;
	box-shadow: 0 0 0 3px rgba(42, 174, 168, .15);
}

.playersearch_form .btn_green {
	flex: 0 0 auto;
	height: 38px;
	padding: 0 26px;
	font-size: 14px;
}

/* --- alphabet nav --------------------------------------------------------
   Sized so ALL + A-Z fit on a single row at desktop widths instead of
   wrapping onto two or three. */
.ln-letters {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin: 0;
}

.ln-letters a,
.ln-letters a.ln-last {
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 28px;
	margin: 0;
	padding: 0 4px;
	border: 1px solid #e2e6e6;
	border-radius: 6px;
	background: #fff;
	color: #292b2c;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	transition: all .18s ease;
}

/* ALL key is wider and reads as the reset action. */
.ln-letters a.ln-all {
	min-width: 40px;
	padding: 0 9px;
	font-size: 11px;
	letter-spacing: .5px;
}

.ln-letters a:hover {
	border-color: #2aaea8;
	background: rgba(42, 174, 168, .10);
	color: #118f89;
}

.ln-letters a.ln-selected {
	border-color: #2aaea8;
	background: #2aaea8;
	color: #fff;
	box-shadow: 0 3px 8px rgba(42, 174, 168, .35);
}

/* --- results table -------------------------------------------------------
   #PlayersList is the AJAX target, so every rule hangs off it and survives
   the table being replaced. */
#PlayersList {
	border: 1px solid #e8ecec;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 14px rgba(41, 43, 44, .06);
	transition: opacity .15s ease;
}

#PlayersList table.table {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
	color: #292b2c;
}

/* Header: brand teal instead of the previous flat black, which fought with
   the rest of the page. */
#PlayersList thead th {
	position: sticky;
	/* Sits under the fixed site header (67px) plus the sticky toolbar, whose
	   height JS publishes as --pl-toolbar-h. */
	top: calc(67px + var(--pl-toolbar-h, 0px));
	z-index: 2;
	padding: 14px 16px;
	border: 0;
	background: #2aaea8;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	white-space: nowrap;
}

#PlayersList thead th:first-child { border-top-left-radius: 12px; }
#PlayersList thead th:last-child  { border-top-right-radius: 12px; }

#PlayersList tbody td {
	padding: 12px 16px;
	border: 0;
	border-top: 1px solid #f0f2f2;
	vertical-align: middle;
	font-weight: 400;
}

#PlayersList tbody tr:first-child td { border-top: 0; }
#PlayersList tbody tr:nth-child(even) { background: #fafbfb; }

#PlayersList tbody tr {
	transition: background .15s ease, box-shadow .15s ease;
}

#PlayersList tbody tr:hover {
	background: rgba(42, 174, 168, .07);
	box-shadow: inset 3px 0 0 #2aaea8;
}

/* Column treatments — classes come from the players-rows element. */
#PlayersList .pl-sno {
	width: 58px;
	color: #9aa2a2;
	font-size: 13px;
}

#PlayersList .pl-id { width: 110px; }

/* Player code as a chip so the clickable ID reads as an action. */
#PlayersList .pl-chip {
	display: inline-block;
	padding: 3px 11px;
	border-radius: 20px;
	background: rgba(42, 174, 168, .12);
	color: #118f89;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .3px;
	transition: background .18s ease, color .18s ease;
}

#PlayersList tbody tr:hover .pl-chip { background: #2aaea8; color: #fff; }

#PlayersList .pl-name a {
	color: #292b2c;
	font-weight: 600;
}

#PlayersList .pl-father a { color: #687188; }

#PlayersList .pl-name a:hover,
#PlayersList .pl-father a:hover {
	color: #118f89;
	text-decoration: none;
}

/* Sex as a small badge — quicker to scan than a bare letter. */
#PlayersList .pl-sex { width: 70px; }

#PlayersList .pl-sex-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
}

#PlayersList .pl-sex-m { background: rgba(42, 174, 168, .14); color: #118f89; }
#PlayersList .pl-sex-f { background: rgba(104, 113, 136, .14); color: #687188; }

#PlayersList .pl-district {
	width: 120px;
	color: #687188;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .3px;
}

#PlayersList .pl-empty-cell { color: #c3c9c9; }

/* No-results row */
#PlayersList .pl-noresult td {
	padding: 34px 16px;
	color: #687188;
	text-align: center;
	font-size: 14px;
}

#PlayersList .pl-noresult strong { color: #292b2c; }

/* --- responsive ----------------------------------------------------------
   Below the desktop breakpoint the table scrolls sideways instead of
   squashing. This creates a scroll container, which is why the sticky header
   only applies on wider screens. */
@media (max-width: 991px) {
	#PlayersList {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#PlayersList table.table { min-width: 660px; }
	#PlayersList thead th { position: static; }
}

/* Narrower containers: shrink the keys further so A-Z still fits few rows. */
@media (max-width: 1199px) {
	.ln-letters a,
	.ln-letters a.ln-last { min-width: 24px; height: 26px; font-size: 12px; }
	.ln-letters a.ln-all { min-width: 36px; }
}

@media (max-width: 767px) {
	/* Sticking the toolbar on a short screen would eat most of the viewport,
	   so let it scroll away and give the rows the room instead. */
	.pl-toolbar { position: static; }
	#PlayersList thead th { top: 0; }
}

@media (max-width: 575px) {
	.pl-searchrow { flex-wrap: wrap; gap: 8px; }
	.playersearch_form { gap: 8px; }
	.playersearch_form input[type="text"],
	.playersearch_form select { flex: 1 1 100%; }
	.playersearch_form .btn_green { width: 100%; }
	.pl-count { width: 100%; text-align: center; }
}

/* ==========================================================================
   Player profile popup

   Players::getPlayersProfile() serves one block of HTML to both this page and
   the admin listing at /members/players, and that HTML still uses Bootstrap 3
   class names (panel / media / img-rounded). The admin theme defines them in
   css/admin/custom.css; the public theme does not, so the photo rendered at
   its full uploaded size and the details table was squashed beside it.

   Everything below mirrors css/admin/custom.css, scoped to this modal so the
   two popups render identically and nothing else on the public site changes.
   Keep it in step with that file, or the popups drift apart again.
   ========================================================================== */

/* Mirrors "#ViewPlayerProfile .modal-dialog { max-width: 850px }". */
#playersprofile_popup .modal-dialog { max-width: 850px; }

/* .box wraps .modal-content on both pages; it supplies the dark top rule.
   The font is set here too: the public theme's body is Montserrat 17px and the
   admin theme's is the system stack at .88rem, so the header, tabs, profile
   table and footer button all inherit the admin sizing from this one place. */
#playersprofile_popup .box {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
	border-radius: 3px;
	border-top: 3px solid #d2d6de;
	background: #fff;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	font-size: .88rem;
	line-height: 1.5;
	color: #495057;
}

#playersprofile_popup .box.box-success { border-top-color: #10163a; }

#playersprofile_popup .modal-content {
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: .3rem;
	overflow: visible;
}

/* web/style.css pins every heading to Montserrat; the admin theme's headings
   use "font-family: inherit", so both panel and modal titles follow the body. */
#playersprofile_popup h1,
#playersprofile_popup h2,
#playersprofile_popup h3,
#playersprofile_popup h4,
#playersprofile_popup h5,
#playersprofile_popup h6 { font-family: inherit; }

#playersprofile_popup .modal-header { padding: 1rem; }

/* h4 is 1.1rem in the admin theme, not the public theme's larger heading. */
#playersprofile_popup .modal-title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #495057;
}

#playersprofile_popup .modal-footer { padding: 1rem; background: #f8f9fa; }

/* web/style.css turns .btn into a 12px/35px capitalised pill; the admin popup's
   CLOSE button is the compact Bootstrap one. */
#playersprofile_popup .modal-footer .btn {
	display: inline-block;
	padding: .175rem .5rem;
	border: 1px solid transparent;
	border-radius: .25rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	text-transform: none;
	vertical-align: middle;
}

#playersprofile_popup .modal-footer .btn-danger {
	background-color: #d92550;
	border-color: #d92550;
	color: #fff;
}

#playersprofile_popup .modal-footer .btn-danger:hover {
	background-color: #b81f44;
	border-color: #ad1e40;
	color: #fff;
}

/* The admin theme's body type. web/style.css sets this modal to 16px/#212529
   with !important, so the override has to carry !important too. */
#playersprofile_popup .modal-body {
	padding: 1rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
	font-size: .88rem !important;
	line-height: 1.5;
	color: #495057 !important;
}

/* --- tabs -----------------------------------------------------------------
   The public theme restyles .tab-style3 tabs as teal underlines; the admin
   popup shows plain Bootstrap tabs, so put those back inside this modal. */
#playersprofile_popup .nav-tabs {
	margin-bottom: 1rem;
	border-bottom: 1px solid #dee2e6;
}

#playersprofile_popup .nav-tabs .nav-item { margin-bottom: -1px; }

#playersprofile_popup .nav-tabs .nav-link {
	display: block;
	padding: .5rem 1rem;
	border: 1px solid transparent;
	border-top-left-radius: .25rem;
	border-top-right-radius: .25rem;
	background-color: transparent;
	color: #3f6ad8;
	font-size: .88rem;
	font-weight: 400;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
}

#playersprofile_popup .nav-tabs .nav-link:hover,
#playersprofile_popup .nav-tabs .nav-link:focus {
	border-color: #e9ecef #e9ecef #dee2e6;
}

#playersprofile_popup .nav-tabs .nav-link.active {
	border-color: #dee2e6 #dee2e6 #fff;
	background-color: #fff;
	color: #3f6ad8;
}

/* web/style.css pushes .shop_info_tab down 40px; the admin popup has no gap. */
#playersprofile_popup .tab-content.shop_info_tab { margin-top: 0; }

/* --- the profile / playing-history markup itself -------------------------- */
#playersprofile_popup .panel {
	background-color: #fff;
	border: 1px solid transparent;
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

#playersprofile_popup .panel-info { border-color: #bce8f1; }

#playersprofile_popup .panel-info > .panel-heading {
	color: #31708f;
	background-color: #d9edf7;
	border-color: #bce8f1;
}

#playersprofile_popup .panel-heading {
	padding: 10px 15px;
	border-bottom: 1px solid transparent;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

#playersprofile_popup .panel-title {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	color: inherit;
}

#playersprofile_popup .panel-body { padding: 15px; color: #444; }

/* .media is already a flexbox in both themes; these are the extra Bootstrap 3
   declarations the admin theme layers on top of it. */
#playersprofile_popup .media,
#playersprofile_popup .media-body { overflow: hidden; zoom: 1; }

#playersprofile_popup .media:first-child { margin-top: 0; }

#playersprofile_popup .media-body,
#playersprofile_popup .media-left,
#playersprofile_popup .media-right { display: table-cell; vertical-align: top; }

#playersprofile_popup .media-left { padding-right: 10px; }

#playersprofile_popup .media-body { width: 10000px; }

/* Without this the photo rendered at its full uploaded size. */
#playersprofile_popup img.media-object.img-rounded {
	width: 150px;
	border: 1px #ccc solid;
}

#playersprofile_popup .table {
	width: 100%;
	margin-bottom: 1rem;
	background-color: #fff;
}

/* web/style.css styles bare th/td for the whole site — "th, td { border: 1px
   solid #3333; padding: 6px; font-size: 15px; font-weight: 600 }" plus
   "th { background-color: #000; color: #fff; font-size: 16px; border-right:
   1px solid #897f7f }". That black header row is why the playing-history table
   looked nothing like the admin one. The admin theme has no such rules, so
   every property they set is put back to the Bootstrap default here. */
#playersprofile_popup .table th,
#playersprofile_popup .table td {
	padding: .45rem;
	border: 0;
	border-top: 1px solid #e9ecef;
	background-color: transparent;
	color: inherit;
	font-size: inherit;
	text-align: left;
	vertical-align: middle;
}

#playersprofile_popup .table th { font-weight: 700; }
#playersprofile_popup .table td { font-weight: 400; }

#playersprofile_popup .table thead th {
	vertical-align: bottom;
	border-bottom: 2px solid #e9ecef;
}

#playersprofile_popup .table > tbody > tr > td {
	padding: 4px 8px;
	vertical-align: middle;
	border-bottom: 1px solid #ccc;
}

/* --- loading overlay ------------------------------------------------------
   Shown while the profile is fetched, exactly as on /members/players. It is
   hidden here rather than with a style attribute so the markup stays free of
   inline CSS; jQuery show()/hide() drives it. */
#playersprofile_popup .overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 50;
	border-radius: 3px;
	background: rgba(255, 255, 255, .7);
}

#playersprofile_popup .overlay > .fa {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -15px;
	margin-left: -15px;
	color: #000;
	font-size: 30px;
}

/* Font Awesome 5 dropped the v4 name; admin/custom.css shims it the same way. */
#playersprofile_popup .fa-refresh:before { content: "\f021"; }