/* =========================================================
   EMBEDDED MODE
   The registration form as it appears inside the dashboards' "The Resignation" window
   (index.html?embed=1, see add-player-window.js). Every rule below starts with
   .embedded (a class index.html puts on <html> only in that mode), so the normal
   registration website keeps its own look.
   ========================================================= */

html.embedded {
  --lbl: 170px;        /* width of the bold label column */
  --ctl: 320px;        /* usual width of a text box / drop-down */
  scrollbar-width: none;   /* the dashboard draws its own scrollbar beside this frame */
}

html.embedded::-webkit-scrollbar {
  display: none;
}

.embedded body {
  min-height: 0;
  display: block;
  padding: 4px 10px 22px 6px;
  background: #e0e0e0;
  color: #000000;
}

/* The window has its own title bar, so the website banner is not needed */
.embedded .form-header-container {
  display: none;
}

.embedded .registration-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: none !important;
  padding: 0 !important;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.embedded .section-title {
  color: #000000;
  text-shadow: none;
  font-size: 1.15rem;
  letter-spacing: 0;
  margin: 22px 0 12px;
}

/* The coach / manager form starts with this heading (it stays first, above the photo) */
.embedded .role-badge-title {
  margin: 8px 0 0;
  color: #000000;
  font-size: 1.2rem;
  letter-spacing: 0;
  text-shadow: none;
}

/* Order of the blocks: photo, "Participant Identification", the fields, then the rest */
.embedded .form-layout-with-sidebar { display: contents; }
.embedded .photo-upload-container   { order: 1; }
.embedded .section-participant      { order: 2; }
.embedded .fields-container         { order: 3; }
.embedded .section-bank             { order: 4; }
.embedded .bank-section-layout      { order: 5; }
.embedded .section-account          { order: 6; }
.embedded .password-group-row       { order: 7; }
.embedded #form-error-banner        { order: 8; }
.embedded .submit-wrapper           { order: 9; }

/* ---------- photo ---------- */
.embedded .photo-upload-container {
  width: auto !important;
  margin: 8px auto 0 !important;
  gap: 8px;
}

.embedded .photo-box {
  width: 154px;       /* 35 mm : 45 mm (7 : 9), like the photo that is saved */
  height: 198px;
  border: none;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}

/* the outlined person inside four corner marks, drawn instead of the small blue icon */
.embedded #photo-icon {
  display: none !important;
}

.embedded .photo-box::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 154 198' fill='none' stroke='%23111' stroke-width='5' stroke-linecap='square' stroke-linejoin='round'%3E%3Cpath d='M3 39V3H39M115 3H151V39M3 159V195H39M115 195H151V159'/%3E%3Cellipse cx='77' cy='76' rx='31' ry='41'/%3E%3Cpath d='M66 113L64 130C45 137 33 154 31 195M88 113L90 130C109 137 121 154 123 195'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.embedded .photo-label {
  max-width: 150px;
  color: #000000;
  text-align: center;
  text-shadow: none;
  font-size: 0.95rem;
  letter-spacing: 0;
}

/* ---------- rows: a bold label on the left, the box on the right ---------- */
.embedded .fields-container {
  width: 100% !important;
  gap: 12px;
}

.embedded label {
  color: #000000;
  text-shadow: none;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: normal;
}

/* (!important: style.css's small-screen rules also use it, and this window is narrower than
   the 768px they switch on at) */
.embedded .field-row {
  display: grid;
  grid-template-columns: var(--lbl) minmax(0, 1fr);
  align-items: center !important;
  column-gap: 12px !important;
  row-gap: 12px !important;
  margin: 0 !important;
}

/* the phone box shares the row with the sports buttons: let its label + box join the grid */
.embedded .flex-inline {
  display: contents;
}

.embedded .field-row > label,
.embedded .flex-inline > label {
  width: auto !important;
  margin: 0 !important;
  text-align: right !important;
}

.embedded input[type="text"],
.embedded input[type="tel"],
.embedded input[type="password"],
.embedded input[type="email"],
.embedded select {
  height: 34px;
  border: 1px solid #8a8a8a;
  border-radius: 4px;
  background-color: #ffffff;
  color: #111111;
  font-size: 0.9rem;
}

.embedded .field-row input[type="text"],
.embedded .field-row input[type="tel"],
.embedded .field-row input[type="email"],
.embedded .field-row select {
  width: 100% !important;
  max-width: var(--ctl) !important;
}

/* The affiliation District box while a School / College / Association of the list is chosen (institution-picker.js): it follows
   the name by itself, so it looks switched off (the rule above would make it white like the others). */
.embedded select.district-follows {
  background-color: #e8ecf1;
  border-color: #b8c1cc;
  cursor: not-allowed;
}

/* (Address, School / College / Association and "Other school" used to run out to the window edge, twice as wide as every
   other box. They now have the usual width like all the others; embed.js shows the whole school name when the pointer
   rests on the box, because a long name does not fit in it.) */

/* School / College / Association: the TYPE box above the NAME box (institution-picker.js), each a box like all the others. The two sit
   in ONE cell of the grid (the wrapper), so the District row below keeps its place. */
.embedded .institution-pair {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: var(--ctl);
}

.embedded .institution-pair select {
  flex: none;
}

/* the short ones */
.embedded #category,
.embedded #tshirt_size {
  max-width: 200px !important;
}

/* Date of birth + Age on one line, Gender + Age Group on the next */
.embedded .row-demographics {
  grid-template-columns: var(--lbl) 190px auto minmax(0, 1fr);
}

.embedded .row-demographics #age {
  max-width: 72px !important;
}

.embedded .row-demographics #age_group {
  max-width: 180px !important;
}

.embedded .dob-input-wrapper {
  width: 100% !important;
  max-width: 190px;
}

/* "Other school" / "Other bank" rows appear only when chosen; script.js shows them as flex rows. Like every other row: the
   label on the left in the label column, the box beside it, the same box as all the others. (Without the !important lines
   style.css's small-screen rules stack them in a centred column, because this window is narrower than the 768px they
   switch on at: the label sat above a box that was out of line with the boxes above and below it.) */
.embedded .other-school-row,
.embedded #other_bank_row {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}

.embedded .other-school-row > .other-school-lbl,
.embedded #other_bank_row > label {
  width: var(--lbl) !important;
  flex: none;
  color: #000000;
  text-align: right !important;
}

.embedded .other-school-row > input,
.embedded #other_bank_row > input {
  flex: none;
  width: 100% !important;
  max-width: var(--ctl) !important;
  height: 34px !important;
  font-size: 0.9rem !important;
}

/* The four file boxes are "required", but the page hides them with display:none, and the
   browser can only point at a required box it is able to focus. Left hidden, Submit would do
   nothing at all when a photo or document is missing. So keep them on the page (invisible, 1px)
   inside the button they belong to. */
.embedded .photo-box,
.embedded .doc-upload-btn {
  position: relative;
}

.embedded input[type="file"] {
  display: block !important;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- upload buttons sit under the box they belong to ---------- */
.embedded .doc-upload-btn {
  grid-column: 2;
  justify-self: start;
  width: 100% !important;
  max-width: var(--ctl);
  height: 34px;
  border: 1px solid #555555;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: none;
  color: #000000;
  font-size: 0.8rem;
}

.embedded .doc-upload-btn:hover {
  background: #f7b731;
  border-color: #c9931b;
}

.embedded .doc-upload-btn.file-attached {
  background-color: #27ae60;
  border-color: #1e8449;
  color: #ffffff;
}

/* ---------- sports ---------- */
.embedded .sports-selection-block {
  grid-column: 1 / -1;
  align-items: center;
  width: auto !important;
  margin: 10px auto 0 !important;
  gap: 10px;
}

.embedded .sports-selection-block > label {
  text-align: center !important;
  font-size: 1rem;
}

.embedded .sports-grid {
  grid-template-columns: repeat(2, 190px) !important;
  justify-content: center !important;
  width: auto !important;
  gap: 10px 14px;
}

.embedded .sport-btn span {
  padding: 7px 10px;
  border: 1px solid #333333;
  border-radius: 3px;
  background: #ffffff;
  color: #000000;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

.embedded .sport-btn input[type="checkbox"]:checked + span {
  background-color: #f7b731;
  color: #000000;
}

/* athletics events panel (opens under the sports when Athletics is ticked) */
.embedded .athletics-panel {
  margin-top: 4px;
  border: 2px solid #111111;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
}

.embedded .sub-panel-title {
  color: #000000;
  border-bottom-color: #cccccc;
  text-transform: none;
  font-size: 0.9rem;
}

.embedded .ath-category-heading {
  color: #444444 !important;
}

.embedded .event-pill {
  border: 1px solid #999999;
  background: #f2f2f2;
  color: #000000;
}

.embedded .event-pill:hover {
  border-color: #333333;
  background: #ffe9a8;
}

.embedded .relay-free {
  border-color: #2e7d32;
  background: #eaf6ec;
  color: #1b5e20;
}

/* ---------- bank + T-shirt ---------- */
.embedded .bank-section-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 0;
}

.embedded .bank-fields {
  gap: 12px;
}

.embedded .tshirt-column {
  display: grid;
  grid-template-columns: var(--lbl) minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  min-width: 0;
  width: 100% !important;
}

.embedded .tshirt-column label {
  color: #000000;
  font-size: 0.95rem;
  text-align: right;
}

.embedded .tshirt-column label::after {
  content: ":";
}

.embedded .tshirt-column select {
  width: 100% !important;
  max-width: 200px !important;
  text-align: left;
}

/* ---------- create a new account ---------- */
.embedded .password-group-row {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin: 0 !important;
}

/* the coach / manager form has the email box in a row of its own above the two passwords */
.embedded .password-group-row + .password-group-row {
  margin-top: 12px !important;
}

.embedded .password-field-cell {
  display: grid !important;
  grid-template-columns: var(--lbl) minmax(0, 1fr);
  align-items: center !important;
  column-gap: 12px !important;
}

.embedded .password-field-cell label {
  color: #000000 !important;
  font-size: 0.95rem !important;
  text-align: right !important;
  text-shadow: none !important;
}

/* The eye (show / hide) button sits INSIDE the password box: its wrapper is exactly as wide as the box. (style.css makes
   the wrapper 100% of the column on small screens, and this window is narrower than the 768px they switch on at, so
   the eye used to float far to the right of the box.) */
.embedded .password-field-cell .pw-wrap {
  width: 100%;
  max-width: var(--ctl);
}

/* The email and password boxes look exactly like the other boxes (style.css gives them 32px, smaller letters and a white
   edge). input.pw-input is listed too: while a password is shown the box is type="text" and only the class still matches. */
.embedded .password-field-cell input[type="password"],
.embedded .password-field-cell input[type="email"],
.embedded .password-field-cell input.pw-input {
  width: 100% !important;
  max-width: var(--ctl) !important;
  height: 34px !important;
  border: 1px solid #8a8a8a !important;
  font-size: 0.9rem !important;
}

.embedded .password-field-cell input::placeholder {
  font-size: 0.9rem;
}

/* ---------- message + buttons ---------- */
.embedded .form-error-banner {
  border-color: #d62828;
  background: #ffe9e9;
  color: #b00020;
  font-size: 0.9rem;
}

.embedded .submit-wrapper {
  gap: 26px !important;
  margin: 20px 0 6px !important;
}

.embedded .embed-cancel-btn,
.embedded .gold-submit-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  padding: 8px 34px !important;
  border: 1px solid #333333 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  color: #000000 !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  cursor: pointer;
}

.embedded .embed-cancel-btn {
  background: #ff9c8f !important;
}

.embedded .embed-cancel-btn:hover {
  background: #ff8b7c !important;
}

.embedded .embed-cancel-btn[hidden] {
  display: none !important;
}

.embedded .gold-submit-btn {
  background: #a8d716 !important;
}

.embedded .gold-submit-btn:hover {
  background: #98c412 !important;
}

.embedded .gold-submit-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ---------- narrow window (phones): label above box, one column ---------- */
@media (max-width: 520px) {
  .embedded body {
    padding: 2px 4px 18px 2px;
  }

  .embedded .field-row,
  .embedded .row-demographics,
  .embedded .tshirt-column,
  .embedded .password-field-cell {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 6px;
  }

  .embedded .field-row > label,
  .embedded .flex-inline > label,
  .embedded .tshirt-column label,
  .embedded .password-field-cell label,
  .embedded .other-school-row > .other-school-lbl,
  .embedded #other_bank_row > label {
    text-align: left !important;
  }

  .embedded .field-row input[type="text"],
  .embedded .field-row input[type="tel"],
  .embedded .field-row input[type="email"],
  .embedded .field-row select,
  .embedded .dob-input-wrapper,
  .embedded .password-field-cell input[type="password"],
  .embedded .password-field-cell input[type="email"],
  .embedded .password-field-cell input.pw-input {
    max-width: none !important;
  }

  .embedded .password-field-cell .pw-wrap {
    max-width: none;
  }

  .embedded .row-demographics #age,
  .embedded .row-demographics #age_group,
  .embedded #category,
  .embedded #tshirt_size {
    max-width: none !important;
  }

  .embedded .doc-upload-btn {
    grid-column: 1;
    max-width: none;
  }

  .embedded .other-school-row,
  .embedded #other_bank_row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  .embedded .other-school-row > .other-school-lbl,
  .embedded #other_bank_row > label {
    width: auto !important;
  }

  .embedded .other-school-row > input,
  .embedded #other_bank_row > input {
    max-width: none !important;
  }

  .embedded .sports-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .embedded .sports-selection-block {
    width: 100% !important;
  }

  .embedded .submit-wrapper {
    gap: 14px !important;
  }

  .embedded .embed-cancel-btn,
  .embedded .gold-submit-btn {
    padding: 8px 22px !important;
  }
}