/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Shared affordance for the Alpha flight path; form scope preserves deliberate utility sizes. */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; }
main { width: 100%; max-width: 100%; }
main, section, article, li, form, nav, header, div { min-width: 0; }
form, nav > * { max-width: 100%; }
.flex { max-width: 100%; }
.flex > * { max-width: 100%; }
.break-all { word-break: break-all; }
.break-words { overflow-wrap: break-word; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

form :is(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]), select, textarea) {
  min-height: 2.75rem;
  border: 1px solid #94a3b8;
  border-radius: 0.375rem;
  background: #ffffff;
  padding: 0.625rem 0.75rem;
  max-width: 100%;
}

form :is(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]), select, textarea) { width: 100%; }
button, input[type="submit"] { max-width: 100%; white-space: normal; }
form.flex { flex-wrap: wrap; }
form.flex :is(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]), select, textarea) { width: auto; flex: 1 1 12rem; }
form.flex input[type="submit"] { flex: 0 1 auto; }
@media (max-width: 639px) {
  form .flex { align-items: stretch; }
  form .flex > * { min-width: 0; }
}

form textarea { min-height: 6rem; }

form :is(input, select, textarea):focus {
  border-color: #1d4ed8;
  outline: 3px solid rgb(147 197 253 / 0.55);
  outline-offset: 1px;
}

form :is(input, select, textarea):user-invalid {
  border-color: #dc2626;
}

/* UX05: keep system state, actions, and feedback visually distinct. */
.ux-status-chip {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid;
  border-radius: 9999px;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
}

.ux-status-chip svg { width: 0.875rem; height: 0.875rem; }
.ux-status-location { border-color: #7dd3fc; background: #f0f9ff; color: #075985; }
.ux-status-payment-pending { border-color: #fbbf24; background: #fffbeb; color: #92400e; }
.ux-status-payment-paid { border-color: #86efac; background: #f0fdf4; color: #166534; }
.ux-status-team { border-color: #c4b5fd; background: #f5f3ff; color: #5b21b6; }
.ux-status-match { width: fit-content; border-color: #93c5fd; background: #eff6ff; color: #1e3a8a; }

.ux-player-grid { display: grid; gap: 0.75rem; }
.ux-player-cell { min-width: 0; }
.ux-player-cell-label {
  display: block;
  margin-bottom: 0.25rem;
  color: #475569;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}
.ux-player-number {
  display: inline-flex;
  min-width: 2rem;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid #cbd5e1;
  border-radius: 9999px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.75rem;
  font-weight: 800;
}
.ux-inline-control {
  display: inline-flex;
  min-width: 0;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid;
  border-radius: 0.5rem;
  padding: 0.375rem 0.625rem;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.25;
  text-align: center;
  touch-action: manipulation;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.ux-inline-control svg { width: 0.875rem; height: 0.875rem; }
.ux-inline-control:hover { filter: brightness(0.97); }
.ux-inline-control:active { box-shadow: inset 0 2px 4px rgb(15 23 42 / 0.2); }
.ux-inline-control:focus-visible,
.ux-segmented-option:focus-visible { outline: 3px solid rgb(147 197 253 / 0.9); outline-offset: 2px; }
.ux-payment-control-pending { border-color: #fbbf24; background: #fffbeb; color: #92400e; }
.ux-payment-control-paid { border-color: #15803d; background: #15803d; color: #ffffff; }
.ux-team-form { min-width: 0; }
.ux-team-control { width: 100%; border-color: #a78bfa; background: #f5f3ff; color: #5b21b6; }
.ux-micro-feedback {
  display: inline-flex;
  min-height: 1.5rem;
  max-width: 100%;
  align-items: center;
  border: 1px solid;
  border-radius: 9999px;
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.ux-micro-feedback-success { border-color: #86efac; background: #f0fdf4; color: #166534; }
.ux-micro-feedback-alert { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }
.ux-segmented-control {
  display: inline-flex;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 0.25rem;
  border: 1px solid #93c5fd;
  border-radius: 0.625rem;
  padding: 0.25rem;
  background: #dbeafe;
}
.ux-segmented-option {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  padding: 0.5rem 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  touch-action: manipulation;
}
.ux-segmented-option-current { background: #ffffff; color: #1e3a8a; box-shadow: 0 1px 2px rgb(15 23 42 / 0.15); }
.ux-segmented-option-action { color: #1e40af; }
.ux-segmented-option-action:hover { background: #bfdbfe; }

.ux-action {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  touch-action: manipulation;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.ux-action:hover { transform: translateY(-1px); }
.ux-action:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgb(15 23 42 / 0.2); }
.ux-action:focus-visible { outline: 3px solid rgb(147 197 253 / 0.9); outline-offset: 2px; }
.ux-action-primary { border: 1px solid #1d4ed8; background: #1d4ed8; color: #ffffff; box-shadow: 0 1px 2px rgb(15 23 42 / 0.15); }
.ux-action-primary:hover { background: #1e40af; }
.ux-action-secondary { border: 1px solid #2563eb; background: #ffffff; color: #1e3a8a; }
.ux-action-secondary:hover { background: #eff6ff; }
.ux-action-success { border: 1px solid #15803d; background: #15803d; color: #ffffff; box-shadow: 0 1px 2px rgb(15 23 42 / 0.15); }
.ux-action-success:hover { background: #166534; }
.ux-action-danger { border: 1px solid #fca5a5; background: #ffffff; color: #991b1b; }
.ux-action-danger:hover { background: #fef2f2; }
.ux-action-muted { border: 1px solid #cbd5e1; background: #ffffff; color: #334155; }
.ux-action-muted:hover { background: #f8fafc; }

.ux-system-message {
  border-left: 4px solid #10b981;
  background: #ecfdf5;
  color: #065f46;
}

.ux-system-message-alert {
  border-left-color: #ef4444;
  background: #fef2f2;
  color: #991b1b;
}

.ux-feedback-highlight { border-color: #34d399; }
@media (prefers-reduced-motion: no-preference) {
  .ux-feedback-highlight { animation: ux-feedback-highlight 750ms ease-out forwards; }
}
@keyframes ux-feedback-highlight {
  0% { box-shadow: 0 0 0 5px rgb(110 231 183 / 0.75); }
  100% { border-color: #e2e8f0; box-shadow: 0 0 0 0 rgb(167 243 208 / 0); }
}

@media (min-width: 768px) {
  .ux-player-grid {
    grid-template-columns: minmax(10rem, 1.35fr) minmax(8rem, 0.9fr) minmax(7rem, 0.75fr) minmax(9rem, 1fr) auto;
    align-items: center;
  }
  .ux-player-cell-player { grid-column: 1; }
  .ux-player-cell-location { grid-column: 2; }
  .ux-player-cell-payment { grid-column: 3; }
  .ux-player-cell-team { grid-column: 4; }
  .ux-player-cell-action { grid-column: 5; }
  .ux-player-cell-label { margin-bottom: 0.35rem; }
  .ux-player-cell-player .ux-player-cell-label { display: none; }
  .ux-player-cell-action { align-self: center; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .ux-player-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1fr) 7.75rem; gap: 0.5rem; }
}

@media (max-width: 767px) {
  .ux-player-list { padding: 0.5rem; }
  .ux-player-row { padding: 0.625rem; }
  .ux-player-grid { grid-template-columns: minmax(0, 1fr); gap: 0.375rem; }
  .ux-player-cell-location,
  .ux-player-cell-payment,
  .ux-player-cell-team {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
  }
  .ux-player-cell-label { margin: 0; font-size: 0.75rem; text-transform: none; letter-spacing: normal; }
  .ux-player-row .ux-status-chip,
  .ux-player-row .ux-inline-control,
  .ux-player-row form select.ux-team-control {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.25;
    text-align: left;
    justify-content: flex-start;
  }
  .ux-player-cell-player { margin-bottom: 0.125rem; }
  .ux-player-cell-action { display: flex; justify-content: flex-end; padding-top: 0.375rem; border-top: 1px solid #e2e8f0; }
  .ux-player-cell-action .ux-action { min-width: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ux-feedback-highlight { border-color: #e2e8f0; }
  .ux-action, .ux-inline-control { transition: none; }
}