/* Fudd Dusters custom utilities (kept small & local) */

/* Alignment utilities (mini Bootstrap build may omit these) */
.text-start{ text-align:left !important; }
.text-end{ text-align:right !important; }
.text-center{ text-align:center !important; }

/* Sticky athletes bar on event squads page */
.fd-athletes-sticky{
  position: sticky;
  top: 0.75rem;
  z-index: 50;
}

/* Event Squads UI */
.fd-athlete-chip{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  padding:0.35rem 0.6rem;
  border-radius:9999px;
  border:1px solid rgba(0,0,0,0.15);
  font-size:0.85rem;
  cursor:grab;
  user-select:none;
}
.fd-athlete-chip:active{ cursor:grabbing; }
.fd-athlete-chip.fd-chip-dragging{ opacity:0.6; }

.fd-slot{
  min-height:40px;
  border:1px dashed rgba(0,0,0,0.25);
  border-radius:0.5rem;
  padding:0.35rem 0.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.5rem;
  background:#fff;
}
.fd-slot.fd-slot-over{
  border-style:solid;
  border-color: rgba(13,110,253,0.5);
  box-shadow:0 0 0 0.2rem rgba(13,110,253,0.15);
}
.fd-slot .fd-slot-label{ color:#6c757d; font-size:0.85rem; }
.fd-slot .fd-slot-athlete{ font-weight:600; }

/* Empty slot affordance */
.fd-slot-empty{ cursor:pointer; }
.fd-slot-empty:hover{
  border-style:solid;
  border-color: rgba(13,110,253,0.35);
  background: rgba(13,110,253,0.04);
}

/* Inline remove button inside a badge */
.fd-badge-x{
  margin-left:0.4rem;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font-weight:800;
  line-height:1;
  cursor:pointer;
}
.fd-badge-x:focus{ outline:0; }


/* Used athlete chips are not draggable */
.fd-athlete-chip.fd-chip-used{
  cursor:not-allowed;
  opacity:0.65;
}


/* Event squads grid: up to 3 cards per row, responsive */
.fd-squad-grid{display:flex;flex-wrap:wrap;gap:1rem;}
.fd-squad-col{flex:1 1 calc(33.333% - 1rem);min-width:280px;}
@media (max-width: 991px){.fd-squad-col{flex-basis:calc(50% - 1rem);}}
@media (max-width: 575px){.fd-squad-col{flex-basis:100%;}}


/* Athlete pool grouped by division as responsive columns */
.fd-division-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0.75rem;}
.fd-division-block{padding:0.25rem 0;}

/* Clickable roster status badge (Event Roster) */
.status-badge-clickable { cursor: pointer; }
.status-badge-clickable .badge { display: inline-block; transition: all 0.15s ease-in-out; }
.status-badge-clickable:hover .badge { opacity: 0.85; transform: scale(1.05); }

/* Header avatar initial */
.avatar-circle{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #6c757d; /* Bootstrap secondary */
  color: #fff;

  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  flex: 0 0 32px;      /* prevents squish in flex buttons */
}

/* If it ever ends up inside a button, keep it aligned */
button .avatar-circle{
  margin: 0;
}

/* Keep tall Bootstrap modals usable on short screens and mobile.
   Some forms are long enough that the footer can be pushed below the viewport;
   this reinforces Bootstrap's scrollable modal behavior app-wide. */
.modal-dialog-scrollable .modal-content{
  max-height: calc(100dvh - (var(--bs-modal-margin, .5rem) * 2));
}
.modal-dialog-scrollable .modal-body{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-height: 640px), (max-width: 575.98px){
  .modal{ --bs-modal-margin: .5rem; }
  .modal-dialog{ margin-top: .5rem; margin-bottom: .5rem; }
}

/* Bootstrap's modal-dialog-scrollable expects header/body/footer to be direct
   children of .modal-content. Many of our form modals wrap those sections in a
   <form>, so make that form the scroll container layout too. */
.modal-dialog-scrollable .modal-content > form{
  display: flex;
  flex-direction: column;
  max-height: inherit;
  min-height: 0;
}
.modal-dialog-scrollable .modal-content > form > .modal-body{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog-scrollable .modal-content > form > .modal-footer{
  flex-shrink: 0;
}