/*
 * Portal-wide form control alignment.
 * Loaded last and intentionally specific so page themes cannot vertically clip text.
 */
html body .app,
html body .app *{box-sizing:border-box}

html body .app .content form,
html body .app .content fieldset,
html body .app .content label{min-width:0;max-width:100%}

html body .app .content form label:has(>input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])),
html body .app .content form label:has(>select),
html body .app .content form label:has(>textarea){
  line-height:1.3!important;
}

html body .app .content input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]),
html body .app .content select{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;
  margin:0!important;
  padding:0 13px!important;
  overflow:visible!important;
  border:1px solid #cbd1d8!important;
  border-radius:8px!important;
  background-color:#fff!important;
  color:#171a1f!important;
  font-family:inherit!important;
  font-size:14px!important;
  font-weight:650!important;
  line-height:normal!important;
  letter-spacing:0!important;
  text-align:left!important;
  text-indent:0!important;
  text-overflow:ellipsis!important;
  text-transform:none!important;
  vertical-align:middle!important;
  white-space:nowrap!important;
  box-shadow:0 1px 2px rgba(17,21,26,.035) inset!important;
  -webkit-text-size-adjust:100%!important;
}

html body .app .content select{
  padding-right:42px!important;
  cursor:pointer!important;
  -webkit-appearance:auto!important;
  appearance:auto!important;
}

html body .app .content select option{
  color:#171a1f!important;
  font-family:inherit!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:normal!important;
}

html body .app .content input[type="date"],
html body .app .content input[type="time"],
html body .app .content input[type="datetime-local"]{
  padding-right:10px!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}

html body .app .content input[type="date"]::-webkit-date-and-time-value,
html body .app .content input[type="time"]::-webkit-date-and-time-value,
html body .app .content input[type="datetime-local"]::-webkit-date-and-time-value{
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  line-height:normal!important;
  text-align:left!important;
}

html body .app .content input[type="date"]::-webkit-datetime-edit,
html body .app .content input[type="time"]::-webkit-datetime-edit,
html body .app .content input[type="datetime-local"]::-webkit-datetime-edit{
  display:flex!important;
  min-height:100%!important;
  padding:0!important;
  align-items:center!important;
}

html body .app .content textarea{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  min-height:110px!important;
  max-height:none!important;
  margin:0!important;
  padding:12px 13px!important;
  overflow:auto!important;
  border:1px solid #cbd1d8!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#171a1f!important;
  font-family:inherit!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:1.5!important;
  letter-spacing:0!important;
  text-transform:none!important;
  white-space:pre-wrap!important;
  resize:vertical!important;
}

html body .app .content input[type="file"]{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:48px!important;
  margin:0!important;
  padding:10px 12px!important;
  overflow:hidden!important;
  font-family:inherit!important;
  font-size:13px!important;
  line-height:1.35!important;
}

html body .app .content input::placeholder,
html body .app .content textarea::placeholder{
  color:#8a929c!important;
  opacity:1!important;
}

html body .app .content input:focus,
html body .app .content select:focus,
html body .app .content textarea:focus{
  border-color:#e21d2f!important;
  outline:0!important;
  box-shadow:0 0 0 3px rgba(226,29,47,.12)!important;
}

html body .app .content input:disabled,
html body .app .content select:disabled,
html body .app .content textarea:disabled,
html body .app .content input[readonly]{
  background:#f1f3f5!important;
  color:#59616b!important;
  opacity:1!important;
  -webkit-text-fill-color:#59616b!important;
}

/* Header team picker uses the same centering without inheriting content sizing. */
html body .app>header select{
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  line-height:normal!important;
  text-indent:0!important;
  overflow:visible!important;
}

/* Dense editable tables remain compact, but their text still centers correctly. */
html body .app .content .uniform-table input:not([type="checkbox"]):not([type="radio"]),
html body .app .content .uniform-table select,
html body .app .content .coach-uniform-table input:not([type="checkbox"]):not([type="radio"]),
html body .app .content .coach-uniform-table select,
html body .app .content .record-form input,
html body .app .content .tryout-metric-row input,
html body .app .content .tryout-rating-row select{
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  font-size:13px!important;
  line-height:normal!important;
}

/* Highly specific Tryout profile overrides previously caused Program, Grade, and dates to clip. */
html body .app .content #tryout-hub dialog.tryout-profile section[data-tryout-panel="overview"] .tryout-form-grid input,
html body .app .content #tryout-hub dialog.tryout-profile section[data-tryout-panel="overview"] .tryout-form-grid select,
html body .app .content .tryout-player-card .tryout-form-grid input,
html body .app .content .tryout-player-card .tryout-form-grid select{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  margin:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  overflow:visible!important;
  font-size:15px!important;
  line-height:normal!important;
  text-indent:0!important;
  vertical-align:middle!important;
}

@media(max-width:700px){
  html body .app .content input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]),
  html body .app .content select{
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
    padding:0 14px!important;
    font-size:16px!important;
    font-weight:650!important;
    line-height:normal!important;
  }

  html body .app .content select{padding-right:44px!important}
  html body .app .content select option{font-size:16px!important}

  html body .app .content textarea{
    min-height:120px!important;
    padding:13px 14px!important;
    font-size:16px!important;
    line-height:1.5!important;
  }

  html body .app .content input[type="file"]{
    min-height:52px!important;
    padding:11px 12px!important;
    font-size:14px!important;
  }

  html body .app>header select{
    height:46px!important;
    min-height:46px!important;
    max-height:46px!important;
    padding-top:0!important;
    padding-bottom:0!important;
    font-size:14px!important;
    line-height:normal!important;
  }

  html body .app .content .uniform-table input:not([type="checkbox"]):not([type="radio"]),
  html body .app .content .uniform-table select,
  html body .app .content .coach-uniform-table input:not([type="checkbox"]):not([type="radio"]),
  html body .app .content .coach-uniform-table select,
  html body .app .content .record-form input,
  html body .app .content .tryout-metric-row input,
  html body .app .content .tryout-rating-row select{
    height:46px!important;
    min-height:46px!important;
    max-height:46px!important;
    padding-top:0!important;
    padding-bottom:0!important;
    font-size:16px!important;
    line-height:normal!important;
  }

  html body .app .content #tryout-hub dialog.tryout-profile section[data-tryout-panel="overview"] .tryout-form-grid input,
  html body .app .content #tryout-hub dialog.tryout-profile section[data-tryout-panel="overview"] .tryout-form-grid select,
  html body .app .content .tryout-player-card .tryout-form-grid input,
  html body .app .content .tryout-player-card .tryout-form-grid select{
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
    padding-top:0!important;
    padding-bottom:0!important;
    font-size:16px!important;
    line-height:normal!important;
  }
}

/*
 * Player forms are mounted directly under <body>, outside .app .content.
 * Repeat the alignment contract at the dialog boundary so Program, Grade,
 * date, class, school, and every other player field render consistently.
 */
html body dialog.player-dialog,
html body dialog.player-dialog *{
  box-sizing:border-box;
}

html body dialog.player-dialog form.player-form,
html body dialog.player-dialog form.player-form fieldset,
html body dialog.player-dialog form.player-form label,
html body dialog.player-dialog .player-form-grid{
  min-width:0!important;
  max-width:100%!important;
}

html body dialog.player-dialog form.player-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]),
html body dialog.player-dialog form.player-form select{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  margin:0!important;
  padding:0 13px!important;
  overflow:visible!important;
  color:#171a1f!important;
  font-family:inherit!important;
  font-size:15px!important;
  font-weight:650!important;
  line-height:normal!important;
  letter-spacing:0!important;
  text-align:left!important;
  text-indent:0!important;
  text-overflow:ellipsis!important;
  text-transform:none!important;
  vertical-align:middle!important;
  white-space:nowrap!important;
  -webkit-text-size-adjust:100%!important;
}

html body dialog.player-dialog form.player-form select{
  padding-right:42px!important;
  cursor:pointer!important;
  -webkit-appearance:auto!important;
  appearance:auto!important;
}

html body dialog.player-dialog form.player-form select option{
  font-size:15px!important;
  line-height:normal!important;
}

html body dialog.player-dialog form.player-form input[type="date"],
html body dialog.player-dialog form.player-form input[type="time"],
html body dialog.player-dialog form.player-form input[type="datetime-local"]{
  padding-right:10px!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}

html body dialog.player-dialog form.player-form input[type="date"]::-webkit-date-and-time-value,
html body dialog.player-dialog form.player-form input[type="time"]::-webkit-date-and-time-value,
html body dialog.player-dialog form.player-form input[type="datetime-local"]::-webkit-date-and-time-value{
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  line-height:normal!important;
  text-align:left!important;
}

html body dialog.player-dialog form.player-form input[type="date"]::-webkit-datetime-edit,
html body dialog.player-dialog form.player-form input[type="time"]::-webkit-datetime-edit,
html body dialog.player-dialog form.player-form input[type="datetime-local"]::-webkit-datetime-edit{
  display:flex!important;
  min-height:100%!important;
  padding:0!important;
  align-items:center!important;
}

html body dialog.player-dialog form.player-form textarea{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  min-height:110px!important;
  margin:0!important;
  padding:12px 13px!important;
  overflow:auto!important;
  font-family:inherit!important;
  font-size:15px!important;
  line-height:1.5!important;
}

html body dialog.player-dialog form.player-form input:focus,
html body dialog.player-dialog form.player-form select:focus,
html body dialog.player-dialog form.player-form textarea:focus{
  border-color:#e21d2f!important;
  outline:0!important;
  box-shadow:0 0 0 3px rgba(226,29,47,.12)!important;
}

@media(max-width:700px){
  html body dialog.player-dialog form.player-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]),
  html body dialog.player-dialog form.player-form select{
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
    padding-top:0!important;
    padding-bottom:0!important;
    font-size:16px!important;
    line-height:normal!important;
  }

  html body dialog.player-dialog form.player-form select{
    padding-right:44px!important;
  }

  html body dialog.player-dialog form.player-form select option{
    font-size:16px!important;
  }

  html body dialog.player-dialog form.player-form textarea{
    min-height:120px!important;
    padding:13px 14px!important;
    font-size:16px!important;
  }
}

/*
 * New Player Order: a dedicated responsive form layout.
 * This page previously inherited competing grid widths, which squeezed headings,
 * color choices, and size menus into narrow desktop-style columns on phones.
 */
html body .app .content form.order-form{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:18px 16px!important;
  width:min(100%,920px)!important;
  max-width:920px!important;
  min-width:0!important;
  padding:26px!important;
  overflow:hidden!important;
  align-items:end!important;
}

html body .app .content form.order-form>h2,
html body .app .content form.order-form>p,
html body .app .content form.order-form>fieldset{
  grid-column:1/-1!important;
  min-width:0!important;
}

html body .app .content form.order-form>h2{
  margin:0!important;
  font-size:32px!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
}

html body .app .content form.order-form>p{
  margin:-6px 0 4px!important;
  max-width:680px!important;
  font-size:14px!important;
  line-height:1.6!important;
}

html body .app .content form.order-form>label{
  min-width:0!important;
  width:100%!important;
  margin:0!important;
}

html body .app .content form.order-form>label:has(>input[name="player_name"]){
  grid-column:span 8!important;
}

html body .app .content form.order-form>label:has(>input[name="jersey_number"]){
  grid-column:span 4!important;
}

html body .app .content form.order-form>label:has(>select){
  grid-column:span 4!important;
}

html body .app .content form.order-form>fieldset{
  margin:0!important;
  padding:16px!important;
  border:1px solid #d9dee5!important;
  border-radius:12px!important;
  background:#f7f8fa!important;
}

html body .app .content form.order-form .color-options{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:9px!important;
  width:100%!important;
}

html body .app .content form.order-form .color-options label{
  display:flex!important;
  min-width:0!important;
  min-height:48px!important;
  margin:0!important;
  padding:10px 12px!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  overflow:hidden!important;
  border:1px solid #d7dce3!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#303640!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}

html body .app .content form.order-form .color-options input[type="checkbox"]{
  width:20px!important;
  min-width:20px!important;
  max-width:20px!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  margin:0!important;
  padding:0!important;
  flex:0 0 20px!important;
  accent-color:#e21d2f!important;
}

html body .app .content form.order-form .color-options .swatch{
  width:14px!important;
  min-width:14px!important;
  height:14px!important;
  flex:0 0 14px!important;
}

html body .app .content form.order-form>button[type="submit"],
html body .app .content form.order-form>button:not([type]){
  grid-column:1/-1!important;
  justify-self:end!important;
  width:auto!important;
  min-width:190px!important;
  min-height:50px!important;
  margin-top:2px!important;
  padding:12px 22px!important;
  white-space:nowrap!important;
}

@media(max-width:700px){
  html body .app .content form.order-form{
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
    width:100%!important;
    max-width:100%!important;
    margin-top:14px!important;
    padding:18px 16px 20px!important;
    border-radius:16px!important;
    overflow:visible!important;
    align-items:stretch!important;
  }

  html body .app .content form.order-form>*{
    grid-column:1/-1!important;
    min-width:0!important;
    max-width:100%!important;
  }

  html body .app .content form.order-form>h2{
    margin:0!important;
    font-size:clamp(28px,8.5vw,36px)!important;
    line-height:1.02!important;
    letter-spacing:-.045em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  html body .app .content form.order-form>p{
    margin:-2px 0 4px!important;
    max-width:none!important;
    color:#626b76!important;
    font-size:15px!important;
    line-height:1.55!important;
  }

  html body .app .content form.order-form>label{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important;
    width:100%!important;
    color:#343a44!important;
    font-size:14px!important;
    font-weight:850!important;
    line-height:1.25!important;
  }

  html body .app .content form.order-form>label input:not([type="checkbox"]),
  html body .app .content form.order-form>label select{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
    margin:0!important;
    box-sizing:border-box!important;
    font-size:16px!important;
  }

  html body .app .content form.order-form>fieldset{
    width:100%!important;
    margin:1px 0 0!important;
    padding:12px!important;
    border-radius:12px!important;
  }

  html body .app .content form.order-form>fieldset legend{
    padding:0 6px!important;
    font-size:14px!important;
  }

  html body .app .content form.order-form .color-options{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  html body .app .content form.order-form .color-options label{
    width:100%!important;
    min-width:0!important;
    min-height:50px!important;
    padding:9px 10px!important;
    font-size:14px!important;
  }

  html body .app .content form.order-form .color-options label:last-child:nth-child(odd){
    grid-column:1/-1!important;
  }

  html body .app .content form.order-form>button[type="submit"],
  html body .app .content form.order-form>button:not([type]){
    grid-column:1/-1!important;
    justify-self:stretch!important;
    width:100%!important;
    min-width:0!important;
    min-height:54px!important;
    margin-top:2px!important;
    padding:13px 18px!important;
    font-size:15px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
}

@media(max-width:380px){
  html body .app .content form.order-form{
    padding-left:14px!important;
    padding-right:14px!important;
  }

  html body .app .content form.order-form .color-options{
    grid-template-columns:minmax(0,1fr)!important;
  }

  html body .app .content form.order-form .color-options label:last-child:nth-child(odd){
    grid-column:auto!important;
  }
}