/* Reset some default styles to ensure consistent rendering */
body, p, h1, h2, h3, h4, h5, h6, ul, li {
    margin: 0;
    padding: 0;
}

/* Set default font and text color */
body {
  font-family: "Helvetica", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #666;
}

.playerStats sub {
  font-size: smaller;
  font-weight: normal;
  color: #666;
  display: block;
}

.footer {
  min-height: 10vh;
  border: 1px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #C0CAD285;
  color: white;
  text-align: center;
}

.warning {
  color: rgb(204, 8, 8);
  text-align: center;
  padding: 10px;
}

.playerStatswarn {
  font-size: smaller;
  color: darkred;
  display: block;
}

.center { text-align: center; }

.imgcenter{
  position: static;           /* was sticky; keep static to avoid odd overlaps */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.main-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.5rem;
}

/* Navigation bar styles */
.page-head ul {
  list-style: none;
  background-color: #0f172a;
  padding: 6px 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;            /* center everything */
}

.page-head ul li {
  display: inline-block;
  margin: 0 8px;
  white-space: nowrap;
  vertical-align: middle;
}

/* First LI (title) always full-width row */
.page-head ul li:first-child {
  display: block;
  width: 100%;
  margin: 0 0 4px 0;
}
.page-head ul li a { 
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  color: #fff;
}
.page-head .main-title,
.page-head h1.main-title {
  flex: 1 1 auto;             /* take remaining space but allow shrinking */
  min-width: 0;               /* required for ellipsis in flex items */
}

.page-head h1 { 
  color: white; 
}

/* Container styles */
.wrapper {
  margin-top: 92px;  /* more space for taller header */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

/* These affect h1/h2 outside the main sections; section headers below override */
.wrapper h1 {
  background: #0f172a;            /* subtler than lightslategrey */
  color: #e2e8f0;
  padding: 10px 12px;
  border-radius: 8px;              /* soften block look */
  font-size: 26px;                 /* a bit smaller on mobile */
  margin: 8px auto 12px;
  display: block;
  width: 100%;
  max-width: var(--section-max);
  min-width: var(--section-min);
  text-align: center;
  box-sizing: border-box;
}
.wrapper h2 {
  background: #0f172a;            /* subtler than lightslategrey */
  color: #e2e8f0;
  padding: 10px 12px;
  border-radius: 8px;              /* soften block look */
  font-size: 20px;                 /* a bit smaller on mobile */
  margin: 8px auto 12px;
  display: block;
  width: 100%;
  max-width: var(--section-max);
  min-width: var(--section-min);
  text-align: center;
  box-sizing: border-box;
}

.content h3 {
  background: #0f172a;            /* subtler than lightslategrey */
  color: #e2e8f0;
  padding: 10px 12px;
  border-radius: 8px;              /* soften block look */
  font-size: 20px;                 /* a bit smaller on mobile */
  margin: 8px auto 12px;
  display: block;
  width: 100%;
  max-width: var(--section-max);
  min-width: var(--section-min);
  text-align: center;
  box-sizing: border-box;
}

.error {
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
}

.topgap { width: 100%; }
.content { margin: 10px; }

.layout {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Center heading elements (generic) */
h1, h2, h3, h4, h5, h6 {
  text-align: center;
  font-weight: 300;
  color: #0f172a;
  hyphens: auto;
  font-family: helvetica;
}
h1 { font-size: 2em; }

.noproject {
  color: #999;
  font-size: 0.85em;
  font-style: italic;
  margin-left: 4px;
}

/* Remove borders from tables */
table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  table-layout: fixed;
  font-size: 12px;
}

th {
  padding: 2px;
  color:#666666;
  font-size: 1.5em;
  text-align: inherit;
}

td {
  padding: 2px;
  color:#333333;
  font-size: 1em;
}

/* Responsive images within table cells */
div.paleBlueRows img {
  max-width: 50px;
  height: auto;
}

/* === Layout overrides === */

/* Search block under logo */
.content.search-block {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  display: block !important;
  margin: 8px 0 12px;
}

/* Keep the header search centered (specificity beats global .search-form) */
.content.search-block .search-form{
  position: static !important;
  float: none !important;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.content.search-block input[type="text"]{
  max-width: 280px;
  width: 100%;
  text-align: center;
}

#searchResults {
  max-width: 900px;
  margin: 6px auto 0;
  clear: both !important;
}

/* Force scoreboard & lineup below search */
#scoreboardSection,
#lineup-section { clear: both !important; }

/* Set equal width for form inputs */
form select {
  width: 225px;
  padding: 5px;
  margin: 10px;
  color: #333;
  font-family: Verdana, FontAwesome;
}

/* Placeholder images */
.img-header {
  width: 30px;
  height: auto;
  max-height: 200px;
}
.img-error {
  width: 480px;
  height: 270px;
}

/* Buttons */
.greenUpdateButton {
  background-color: #92c48e8f;
  border: none;
  padding: 15px 30px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  margin: 20px;
  text-align: center;
  margin-top: 30px;
  color: #333;
}
.button {
  background-color:#92c48e8f;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.Editbutton {
  text-align: center;
  background-color:#92c48e8f;
  border: none;
  padding: 10px 25px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.add-to-lineup-button{
  text-align: center;
  color: #666;
  background-color: #92c48e8f;
  border: none;
  padding: 10px 25px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  margin: 2px;
}
.button:hover { background-color: #7d9ab8; }
.backbutton {
  background-color: #d53636;
  border: none;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.backbutton:hover { background-color: #4a4b4c; }

/* Forms (register/login) */
.register {
  width: 30%;
  background-color: #ffffff;
  box-shadow: 0 0 9px 0 rgba(0,0,0,0.3);
  margin: 100px auto;
}
.register h1 {
  text-align: center;
  color: #5b6574;
  font-size: 24px;
  padding: 20px 0;
  border-bottom: 1px solid #dee0e4;
}
.register form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 20px;
}
.register form label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: #3274d6;
  color: #ffffff;
}
.register form input[type="password"],
.register form input[type="text"],
.register form input[type="email"] {
  width: 310px;
  height: 50px;
  border: 1px solid #dee0e4;
  margin-bottom: 20px;
  padding: 0 15px;
}
.register form input[type="submit"] {
  width: 100%;
  padding: 15px;
  margin-top: 20px;
  background-color: #3274d6;
  border: 0;
  cursor: pointer;
  font-weight: bold;
  color: #ffffff;
  transition: background-color 0.2s;
}
.register form input[type="submit"]:hover {
  background-color: #2868c7;
  transition: background-color 0.2s;
}

.login {
  width: 30%;
  background-color: #ffffff;
  box-shadow: 0 0 9px 0 rgba(0,0,0,0.3);
  margin:auto;
}
.login h1 {
  text-align: center;
  color: #0f172a;
  font-size: 24px;
  padding: 20px 0;
  border-bottom: 1px solid #dee0e4;
}
.login h2 a {
  text-align: center;
  color: #c62d72;
  font-size: 18px;
  padding: 20px 0;
  border-bottom: 1px solid #dee0e4;
}
.login form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 20px;
}
.login form label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: #3274d6;
  color: #ffffff;
}
.login form input[type="password"],
.login form input[type="text"] {
  width: 310px;
  height: 50px;
  border: 1px solid #dee0e4;
  margin-bottom: 20px;
  padding: 0 15px;
}
.login form input[type="submit"] {
  width: 100%;
  padding: 15px;
  margin-top: 20px;
  background-color: #0f172a;
  border: 0;
  cursor: pointer;
  font-weight: bold;
  color: #ffffff;
  transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
  background-color: #0f172a;
  transition: background-color 0.2s;
}

/* Media queries */
@media (max-width: 767px) {
  .page-head ul { padding: 3px 0; }
  .layout { flex-direction: column; }
  .gridcontent { padding-top:65px; width: 100%; }
  .topgap { width: 100%; }
  .content { width: 95%; }
  .login { width: 90%; flex-direction: column; }
  .register { width: 90%; flex-direction: column; }
  table img { max-width: 40px; height: auto; }
  div.paleBlueRows { width: 100%; }
  div.paleBlueRows img { max-width: 40px; height: auto; }
  div.paleBlueRows .profpic img { max-width: 200px; height: auto; }
  .divTable { display: table; width: 100%; }
}

/* Larger font size for table data on iPhones */
@media only screen and (max-width: 767px) {
  table td { font-size: .90em; }
  table th { font-size: 1em; }
}

/* Global Table Styles */
.divTable {
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;                /* round corners actually clip children */
  border: 1px solid #E5E7EB;       /* light gray frame */
  display: table;
  width: 100%;
}
.divTableRow { display: table-row; }

.divTableCell,
.divTableHead,
.divTableCellRank,
.divTableCellTeamName,
.divTableCellScore,
.divTableCellPnts,
.divTableCellPic,
.divTableCellName,
.divTableCellOpp {
  display: table-cell;
  padding: 10px;
  vertical-align: middle;
  text-align: center;
}

/* Specific Cell Alignments */
.divTableCellTeamName { text-align: left; }
.divTableCellRank, .divTableCellScore, .divTableCellPnts {
  text-align: right;
  font-weight: bold;
}

/* Header Styles */
.divTableHeading {
  display: table-header-group;
  background: #0B6FA4;
  color: #FFFFFF;
}
.divTableHeading .divTableHead {
  font-size: 1em;
  font-weight: bold;
  color: #FFFFFF;
  text-align: left;
  border-left: 2px solid #FFFFFF;
}
.divTableHead { font-weight: bold; }
.divTableHeading .divTableHead:first-child { border-left: none; }

/* Pale Blue Row Table */
.divTable.paleBlueRows {
  background-color: #EEEFF21C;
  margin: auto;
  margin-bottom: 20px;
}
.divTable.paleBlueRows .divTableRow:nth-child(even) {
  background-color: #C0CAD285;
}
.divTable.paleBlueRows .divTableCell,
.divTable.paleBlueRows .divTableHead {
  padding: 3px 1px;
}

/* Minimalist Black Table */
div.minimalistBlack {
  font-family: Verdana, Geneva, sans-serif;
  border: 3px solid #666666;
  width: 100%;
  text-align: center;
}
.divTable.minimalistBlack .divTableCell,
.divTable.minimalistBlack .divTableHead {
  border: 1px solid #666666;
  padding: 0px 4px;
}
.divTable.minimalistBlack .divTableBody .divTableCell {
  font-size: 13px;
  color: #666666;
}
.divTable.minimalistBlack .divTableCellLabel {
  background-color: #666666;
  color: #FFFFFF;
  padding: 3px;
}
.divTable.minimalistBlack .divTableHeading {
  background: linear-gradient(to bottom, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
  border-bottom: 3px solid #666666;
}
.divTable.minimalistBlack .divTableHeading .divTableHead {
  font-size: 15px;
  font-weight: bold;
  color: #666666;
  text-align: center;
}
.minimalistBlack .tableFootStyle { font-size: 14px; }
.divTableHeading { background: #0B6FA4; color: #fff; }  /* keep your blue */
.divTable .divTableHead,
.divTable .divTableCell { padding: 8px 10px; }

/* zebra rows for paleBlueRows with crisper contrast */
.divTable.paleBlueRows .divTableRow:nth-child(even) { background-color: #F3F4F6; }
.divTable.paleBlueRows .divTableRow:nth-child(odd)  { background-color: #FFFFFF; }

/* Alignments you already use, plus link color inside tables */
.divTableCellTeamName { text-align: left; }
.divTable a { color: #0ea5e9; text-decoration: none; }
.divTable a:hover { text-decoration: underline; }

/* Player thumbnails within table cells */
div.paleBlueRows img { max-width: 40px; height: auto; border-radius: 50%; }

/* Accordion buttons (set.php) — keep your structure, tone down gray */
.accordion {
  background-color: #f4f6f8; color: #333;
  border: 1px solid #dfe3e8; border-radius: 6px;
}
.active, .accordion:hover, .inner-accordion:hover { background-color: #e9eef3; }

/* Mobile type sizes inside tables for readability */
@media only screen and (max-width: 767px) {
  table td { font-size: .95em; }   /* was .90em */
  table th { font-size: 1.05em; }  /* was 1em */
}
/* Utility Classes */
.bold { font-weight: bold; }
.small-text { font-size: smaller; font-weight: normal; }
.small-red-text { font-size: 0.75em; font-weight: normal; color: darkred; }

.progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  text-align: center;
  background-color: #578ab5b5;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
  transition: width .6s ease;
}
.progress {
  height: 40px;
  margin: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.progress p {
  margin: 0;
  padding: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  text-align: center;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Accordions */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border-radius: 5px;
  margin: 1px;
}
.active, .accordion:hover .inner-accordion:hover { background-color: #ccc; }

/* Keep the button as the accordion hook */
.accordion-container .accordion{
  display:block;
  width:100%;
  text-align:left;
  padding:8px 10px;
  border-radius:6px;
  background:#f4f4f6;
  border:1px solid #dfe3e8;
  line-height:1.25;
}

/* First line: truncate long names cleanly */
.accordion-container .accordion .title{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:600;
}
/* Icons on the first line */
.accordion-container .accordion .icons{ margin-left:.35rem; }
/* Second line always below */
.accordion-container .accordion .small-text{
  display:block;
  margin-top:2px;
  font-size:.85em;
  color:#666;
  line-height:1.2;
}
@media (max-width:420px){
  .accordion-container .accordion{ padding:7px 8px; }
  .accordion-container .accordion .small-text{ font-size:.8em; }
}

.position-panel, .player-panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.blur { -webkit-filter: blur(5px); filter: blur(5px); }
/* was: .hidden { display: none; } */
.hidden { display: none !important; }

/* Global search-form (used elsewhere). Header search stays centered via higher specificity above. */
.search-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: Arial, sans-serif;
  margin: 10px 0;
}
.search-form label {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}
.search-form i { margin-right: 8px; color: #333; }
.search-form input[type="text"] {
  width: 100%;
  max-width: 300px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  color: #555;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  transition: border-color 0.3s ease;
}
.search-form input[type="text"]:focus {
  border-color: #007bff;
  outline: none;
}

/* -------- Unified widths & headers for main sections -------- */
:root {
  --section-max: 980px;   /* desktop cap */
  --section-min: 320px;   /* mobile floor */
}

/* Center and constrain the primary sections */
#scoreboardSection,
#lineup-section,
#top5Section,
#setSection {
  width: 100%;
  display: grid;
  justify-items: center;
  align-content: start;
  margin-bottom: 20px;
}

/* neutralize floats/side-by-side behavior */
#scoreboardSection > *,
#lineup-section > *,
#top5Section > *,
#setSection > * {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Apply unified min/max width and center the inner blocks */
#scoreboardSection .divTable,
#lineup-section .divTable,
#top5Section .divTable,
#setSection .accordion-container {
  width: auto !important;       /* override global .divTable {width:100%} */
  max-width: var(--section-max);
  min-width: var(--section-min);
  margin: 0 auto;
  box-sizing: border-box;
}

/* Section headers (H1/H2) */
#scoreboardSection h1,
#lineup-section h1,
#top5Section h1,
#setSection h1,
#scoreboardSection h2,
#lineup-section h2,
#top5Section h2,
#setSection h2 {
  background: #0f172a;            /* subtler than lightslategrey */
  color: #e2e8f0;
  padding: 10px 12px;
  border-radius: 8px;              /* soften block look */
  font-size: 22px;                 /* a bit smaller on mobile */
  margin: 8px auto 12px;
  display: block;
  width: 100%;
  max-width: var(--section-max);
  min-width: var(--section-min);
  text-align: center;
  box-sizing: border-box;
}

/* Accordion buttons should fill container width */
#setSection .accordion-container .accordion {
  width: 100%;
  display: block;
}