.main {
	position: relative;
	min-height: 70vh;
}
html {
	height: 100%;
}
body {
	height: 100%;
}
.split2 {
	width: 49%;
	display: inline-block;
}
.rightAlign {
	text-align: right;
}
.btn-blank {
	background-color: #ffffff;
	color: #ffffff;
	width: 100%;
	height: 100%;
}
.btn-blank:hover {
	color: #ffffff;
}
.btn-time {
	background-color: #ffffff;
	color: #000000;
}
.swimmerEntryCountBox {
	font-weight: normal;
}
.eventCountBox {
	font-weight: normal;
}
.eventHeader {
	width: 75px;
}

.rosterNameCell { display:flex; gap:8px; }
.rosterInput, .rosterSelect {
  border:1px solid rgba(0,0,0,.25);
  border-radius:10px;
  padding:6px 8px;
  background:#fff;
}
.rosterInput { width: 120px; }
.rosterMono { width: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.rosterStatusCell { width: 38px; text-align:center; }
.rowStatus {
  display:inline-block;
  width:10px; height:10px;
  border-radius:999px;
  background: transparent;
}
.rowStatus[data-status="dirty"]  { background: rgba(0,0,0,.25); }
.rowStatus[data-status="saving"] { background: rgba(0,0,0,.55); }
.rowStatus[data-status="saved"]  { background: rgba(0,128,0,.65); }
.rowStatus[data-status="error"]  { background: rgba(200,0,0,.75); }

/* =========================
   Roster: mobile-friendly layout
   ========================= */

@media (max-width: 700px) {

  /* Let the roster area use full width on mobile */
  #roster {
    padding-left: 0;
    padding-right: 0;
  }

  /* Hide table header on mobile (we'll show labels via CSS) */
  #rosterTable thead {
    display: none;
  }

  /* Make each row a card */
  #rosterTable,
  #rosterTable tbody,
  #rosterTable tr,
  #rosterTable td {
    display: block;
    width: 100%;
  }

  #rosterTable tr {
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 14px;
    margin: 10px 0;
    padding: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
  }

  #rosterTable td {
    border: none !important;
    padding: 8px 6px;
  }

  /* Name row: two inputs side-by-side */
  .rosterNameCell {
    display: flex;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,.12);
    margin-bottom: 8px;
  }

  .rosterInput {
    width: 100%;
    min-width: 0;
  }

  /* Make select/input rows look like labeled fields */
  #rosterTable td:nth-child(2):before { content: "Gender"; }
  #rosterTable td:nth-child(3):before { content: "Grad"; }
  #rosterTable td:nth-child(4):before { content: "Level"; }
  #rosterTable td:nth-child(5):before { content: "ID #"; }
  #rosterTable td:nth-child(6):before { content: "USA-S"; }
  #rosterTable td:nth-child(7):before { content: "Active"; }

  #rosterTable td:nth-child(n+2):before {
    display: block;
    font-size: 0.85em;
    font-weight: 700;
    color: rgba(0,0,0,.60);
    margin-bottom: 6px;
  }

  /* Status dot aligns to the right */
  .rosterStatusCell {
    text-align: right;
    padding-top: 2px !important;
  }

  /* Make selects full width */
  .rosterSelect {
    width: 100%;
  }

  /* Active checkbox: bigger target */
  #rosterTable td:nth-child(7) input[type="checkbox"] {
    transform: scale(1.3);
    transform-origin: left center;
  }
}

/* =========================
   Roster loading indicator
   ========================= */

.rosterLoading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: rgba(0,0,0,.6);
}

.rosterLoading .loadingText {
  margin-top: 12px;
  font-size: 1.05em;
}

/* simple spinner */
.rosterLoading .spinner {
  width: 36px;
  height: 36px;
  border: 4px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.55);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.dupBadge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 700;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.7);
}
tr.dupHard .dupBadge { background: rgba(200,0,0,.10); color: rgba(160,0,0,.95); }
tr.dupSoft .dupBadge { background: rgba(255,165,0,.14); color: rgba(140,90,0,.95); }