/* --reg-* theme tokens are defined in Content/css/v2/theme-v2.css. */

/* .reg-premium-page now lives in full-width-layout.css (shared). */

.sticky-stepper {
    position: sticky;
    top: 70px;
    z-index: 6;
    margin-top: 12px;
    margin-bottom: 12px;
}

.reg-stepper {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    background: rgba(17, 24, 39, 0.9);
    border: 1px solid var(--reg-border);
    border-radius: 12px;
    padding: 8px;
}

.reg-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--reg-border);
    color: var(--reg-muted);
    border-radius: 999px;
    padding: 7px 10px;
    white-space: nowrap;
    font-size: 12px;
}

.reg-step-index {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--reg-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.reg-step.is-current,
.reg-step.is-completed {
    border-color: rgba(163, 255, 18, 0.55);
    color: var(--reg-text);
}

.reg-step.is-current .reg-step-index,
.reg-step.is-completed .reg-step-index {
    border-color: rgba(163, 255, 18, 0.55);
    color: var(--reg-primary);
}

.reg-main-layout .registration-section,
.reg-summary-strip .td-card {
    background: var(--reg-card);
    border: 1px solid var(--reg-border);
    border-radius: 16px;
}

/* ---- Full-width layout: Player 1 / Player 2 / Documents (35% / 35% / 30%) ---- */
.reg-forms-grid {
    display: grid;
    grid-template-columns: minmax(0, 35fr) minmax(0, 35fr) minmax(0, 30fr);
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

/* One upload zone per row inside the narrow Documents column */
.reg-forms-col--docs .upload-grid {
    grid-template-columns: 1fr;
}

@media (max-width: 1200px) {
    .reg-forms-grid {
        grid-template-columns: 1fr 1fr;
    }

    .reg-forms-col--docs {
        grid-column: 1 / -1;
    }

    .reg-forms-col--docs .upload-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .reg-forms-grid {
        grid-template-columns: 1fr;
    }

    .reg-forms-col--docs .upload-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Full-width layout: Team Summary / Payment / Help / Announcements strip ---- */
.reg-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

.reg-summary-strip .payment-grid {
    grid-template-columns: 1fr;
}

@media (max-width: 1200px) {
    .reg-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .reg-summary-strip {
        grid-template-columns: 1fr;
    }
}

.premium-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.card-state-badges {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.state-badge {
    display: none;
    border-radius: 999px;
    font-size: 10px;
    padding: 4px 8px;
    border: 1px solid var(--reg-border);
    color: var(--reg-muted);
}

.player-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-bottom: 12px;
}

/* .btn-search-player skin = .sc-btn.sc-btn--secondary (components-v2.css) —
   JS hook only. */

.upload-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.upload-zone {
    border: 1px dashed rgba(148, 163, 184, 0.5);
    border-radius: 12px;
    padding: 14px;
    background: rgba(15, 23, 42, 0.65);
    text-align: center;
}

.upload-zone h3 {
    margin: 0;
    font-size: 13px;
    color: var(--reg-text);
}

.upload-zone p,
.upload-meta {
    color: var(--reg-muted);
    font-size: 11px;
}

.payment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 12px;
}

.pay-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.3);
    padding: 6px 0;
}

.pay-row span {
    font-size: 11px;
    color: var(--reg-muted);
}

.pay-row strong {
    font-size: 12px;
    color: var(--reg-text);
}

.payment-qr img {
    width: 128px;
    height: 128px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--reg-border);
}

.qr-placeholder {
    width: 128px;
    height: 128px;
    border: 1px dashed var(--reg-border);
    border-radius: 10px;
    display: grid;
    place-content: center;
    color: var(--reg-muted);
    font-size: 11px;
}

.reg-submit-bar {
    position: sticky;
    bottom: 8px;
    z-index: 5;
}

.player-submit-section {
    margin: 0;
}

.reg-card-head-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.reg-card-head-link a {
    color: var(--reg-primary);
    font-size: 11px;
    text-decoration: none;
}

.reg-team-summary {
    display: grid;
    gap: 8px;
}

.reg-team-player {
    border: 1px solid var(--reg-border);
    border-radius: 10px;
    padding: 8px;
}

.reg-team-player span,
.reg-team-player em,
.reg-team-row span {
    display: block;
    color: var(--reg-muted);
    font-size: 11px;
}

.reg-team-player strong,
.reg-team-row strong,
.reg-team-total strong {
    color: var(--reg-text);
}

.reg-team-total {
    background: rgba(163, 255, 18, 0.1);
    border: 1px solid rgba(163, 255, 18, 0.45);
    color: var(--reg-primary);
    border-radius: 10px;
    padding: 8px;
    font-size: 11px;
}

.reg-team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.35);
    padding: 6px;
}

.reg-team-row:last-child {
    border-bottom: none;
}

.reg-help-list {
    display: grid;
    gap: 8px;
}

.reg-help-list div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--reg-muted);
    font-size: 12px;
}

.reg-announcement-list {
    display: grid;
    gap: 7px;
}

.reg-ann-item {
    border: 1px solid var(--reg-border);
    border-radius: 10px;
    padding: 8px;
    text-decoration: none;
    display: grid;
    gap: 3px;
}

.reg-ann-item strong {
    color: var(--reg-text);
    font-size: 12px;
}

.reg-ann-item span,
.reg-ann-item.empty {
    color: var(--reg-muted);
    font-size: 11px;
}

.reg-teams-summary {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.reg-summary-main strong {
    color: var(--reg-text);
}

.sort-box-right {
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Download button = #downloadTeamsBtn on .sc-btn.sc-btn--secondary.sc-btn--sm
   (components-v2.css). */

.registered-teams-list {
    position: relative;
}

.registered-teams-cards {
    display: grid;
    gap: 20px;
}

/* Column widths/order must stay identical to .registered-team-card__grid below. */
.registered-teams-header {
    display: grid;
    grid-template-columns: minmax(0, 39fr) minmax(0, 12fr) minmax(0, 12fr) minmax(0, 8fr) minmax(0, 13fr) minmax(0, 14fr);
    grid-template-areas: "players reginfo payment score review actions";
    gap: 10px 14px;
    padding: 0 15px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--reg-border);
}

.registered-teams-header__cell {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--reg-muted);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.registered-teams-header__cell--players {
    grid-area: players;
}

.registered-teams-header__cell--reginfo {
    grid-area: reginfo;
}

.registered-teams-header__cell--payment {
    grid-area: payment;
}

.registered-teams-header__cell--scoredraw {
    grid-area: score;
}

.registered-teams-header__cell--review {
    grid-area: review;
}

.registered-teams-header__cell--actions {
    grid-area: actions;
    text-align: left;
}

.registered-team-card {
    background: var(--reg-card);
    border: 1px solid var(--reg-border);
    border-radius: 16px;
    padding: 10px 14px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.registered-team-card:hover {
    border-color: rgba(163, 255, 18, 0.35);
    background: rgba(163, 255, 18, 0.03);
}

/* Keep in sync with .registered-teams-header below: same column widths/order.
   Code/Date, Payment/Paid-on and Score/Draw each share one column across 2 rows;
   players and actions span both rows. */
.registered-team-card__grid {
    display: grid;
    grid-template-columns: minmax(0, 39fr) minmax(0, 12fr) minmax(0, 12fr) minmax(0, 8fr) minmax(0, 13fr) minmax(0, 14fr);
    grid-template-rows: auto auto;
    grid-template-areas:
        "players code paymentstatus score review actions"
        "players date paymentdate  score draw   actions";
    gap: 4px 14px;
    align-items: center;
}

.registered-team-card__players {
    grid-area: players;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.registered-team-card__code {
    grid-area: code;
    min-width: 0;
}

.registered-team-card__date {
    grid-area: date;
    min-width: 0;
}

.registered-team-card__paymentstatus {
    grid-area: paymentstatus;
    min-width: 0;
}

.registered-team-card__paymentdate {
    grid-area: paymentdate;
    min-width: 0;
}

.registered-team-card__draw {
    grid-area: draw;
    min-width: 0;
}

.registered-team-card__score {
    grid-area: score;
    min-width: 0;
}

.registered-team-card__review {
    grid-area: review;
    min-width: 0;
}

.registered-team-card__review .reg-field {
    gap: 6px;
}

.reg-review-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 6px;
}

.reg-review-btn--approve {
    color: #16a34a;
}

.reg-review-btn--reject {
    color: #dc2626;
}

/* Review reason modal (Approve / Reject) */
.reg-review-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.reg-review-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.reg-review-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--reg-card);
    color: inherit;
    border: 1px solid var(--reg-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.reg-review-modal__title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
}

.reg-review-modal__label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--reg-muted);
}

.reg-review-modal__textarea {
    width: 100%;
    resize: vertical;
    min-height: 90px;
    padding: 10px 12px;
    border: 1px solid var(--reg-border);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    box-sizing: border-box;
}

.reg-review-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.reg-review-modal__btn {
    height: 34px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--reg-border);
    background: transparent;
    color: inherit;
    font-weight: 600;
    cursor: pointer;
}

.reg-review-modal__btn--approve {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.reg-review-modal__btn--reject {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.registered-team-card__actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.registered-player-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 0;
}

.reg-player-amp {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.14);
    color: var(--reg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

.reg-player-avatar {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    object-fit: cover;
    border: 2px solid rgba(163, 255, 18, 0.55);
    flex: 0 0 auto;
}

.reg-player-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.reg-player-name-link {
    border: none;
    background: transparent;
    color: var(--reg-text);
    text-align: left;
    font-size: 13.5px;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    line-height: 1.25;
}

.reg-player-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.reg-player-phone {
    color: var(--reg-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
    min-width: 0;
}

.reg-player-score {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.reg-player-score i {
    font-size: 8px;
}

/* Registration-time score, paired next to the live (--current) score above -
   kept visually secondary so the live score stays the primary read. */
.reg-player-score--registered {
    color: var(--reg-muted);
    opacity: 0.85;
}

.reg-skill-inline {
    flex: 0 0 auto;
    border: 1px solid rgba(163, 255, 18, 0.4);
    background: rgba(163, 255, 18, 0.1);
    color: var(--reg-primary);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    min-width: 38px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.reg-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.reg-field__label {
    display: none;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--reg-muted);
}

.reg-field__label i {
    font-size: 10px;
    color: var(--reg-muted);
}

.reg-field__value {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--reg-text);
    min-width: 0;
}

.reg-field__value--muted {
    font-weight: 500;
    color: var(--reg-muted);
}

.reg-field__value--empty {
    font-weight: 500;
    color: var(--reg-muted);
}

.reg-field__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.reg-copy-btn {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--reg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 10px;
    cursor: pointer;
}

.reg-copy-btn:hover,
.reg-copy-btn:focus-visible {
    color: var(--reg-primary);
    outline: none;
}

.reg-team-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 999px;
    border: 1px solid rgba(163, 255, 18, 0.45);
    background: rgba(163, 255, 18, 0.14);
    color: var(--reg-primary);
    font-weight: 800;
    font-size: 12px;
    height: 24px;
    min-width: 90px;
    padding: 0 10px;
    width: fit-content;
    box-shadow: 0 0 0 1px rgba(163, 255, 18, 0.05), 0 0 16px rgba(163, 255, 18, 0.12);
}

.reg-team-score-badge i {
    font-size: 9px;
}

.reg-team-score-badge-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Registration-time total, paired next to the live (--current) total above -
   kept visually secondary so the live total stays the primary read. */
.reg-team-score-badge--registered {
    border-color: var(--reg-border);
    background: transparent;
    color: var(--reg-muted);
    box-shadow: none;
}

.reg-status-badge {
    border-radius: 999px;
    height: 24px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}

.reg-status-badge.status-paid {
    color: #7ee787;
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.35);
}

.reg-status-badge.status-approved {
    color: #60a5fa;
    background: rgba(37, 99, 235, 0.16);
    border-color: rgba(96, 165, 250, 0.34);
}

.reg-status-badge.status-pending,
.reg-status-badge.status-unpaid {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(251, 191, 36, 0.35);
}

.reg-status-badge.status-rejected {
    color: #f87171;
    background: rgba(220, 38, 38, 0.16);
    border-color: rgba(248, 113, 113, 0.35);
}

/* Inline Paid/Unpaid editor in the Payment cell (editable rows only). Sized to sit
   in the same footprint as .reg-status-badge within the narrow card column. */
.registered-team-card__paymentstatus .fee-status-select {
    max-width: 100%;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid var(--reg-border);
    background: var(--reg-card);
    color: var(--reg-text);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.registered-team-card__paymentstatus .fee-status-select:hover,
.registered-team-card__paymentstatus .fee-status-select:focus-visible {
    border-color: rgba(163, 255, 18, 0.6);
    outline: none;
}

/* Review Status dropdown (editable rows) - same footprint as the Payment select. */
.registered-team-card__review .reg-review-select {
    max-width: 100%;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid var(--reg-border);
    background: var(--reg-card);
    color: var(--reg-text);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.registered-team-card__review .reg-review-select.status-approved { border-color: rgba(59, 130, 246, 0.6); }
.registered-team-card__review .reg-review-select.status-rejected { border-color: rgba(220, 38, 38, 0.6); }
.registered-team-card__review .reg-review-select.status-pending { border-color: rgba(245, 158, 11, 0.6); }

.registered-team-card__review .reg-review-select:hover,
.registered-team-card__review .reg-review-select:focus-visible {
    border-color: rgba(163, 255, 18, 0.6);
    outline: none;
}

/* One consistent shape for every row action: fixed-width icon box + label,
   full width of the (stacked) Actions column so they all line up equally. */
.reg-action-stack-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    height: 28px;
    padding: 0 8px;
    border-radius: 7px;
    border: 1px solid var(--reg-border);
    background: rgba(255, 255, 255, 0.04);
    color: #d1d5db;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.reg-action-stack-btn i {
    flex: 0 0 auto;
    width: 13px;
    text-align: center;
    font-size: 11px;
}

.reg-action-stack-btn span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reg-action-stack-btn:hover,
.reg-action-stack-btn:focus-visible {
    border-color: rgba(163, 255, 18, 0.6);
    color: var(--reg-primary);
    background: rgba(163, 255, 18, 0.12);
    outline: none;
}

.reg-actions-none {
    color: var(--reg-muted);
    font-size: 12px;
}

.registered-list-empty {
    border: 1px dashed rgba(148, 163, 184, 0.45);
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.55);
    color: var(--reg-muted);
    min-height: 220px;
    display: grid;
    place-content: center;
    text-align: center;
    gap: 8px;
    padding: 20px;
}

.registered-list-empty .empty-illustration {
    width: 62px;
    height: 62px;
    margin: 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(163, 255, 18, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--reg-primary);
    background: rgba(163, 255, 18, 0.08);
    font-size: 22px;
}

.registered-list-empty h3 {
    margin: 0;
    color: var(--reg-text);
    font-size: 17px;
}

.registered-list-empty p,
.registered-list-empty span {
    margin: 0;
    font-size: 12px;
}

.registered-pagination {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.pagination-btn {
    width: 34px;
}

.pagination-btn:disabled {
    opacity: 0.45;
}

.pagination-info {
    color: var(--reg-muted);
    font-size: 12px;
    min-width: 84px;
    text-align: center;
}

@keyframes regRowFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1199px) {
    .registered-teams-header,
    .registered-team-card__grid {
        grid-template-columns: minmax(0, 38fr) minmax(0, 13fr) minmax(0, 12fr) minmax(0, 8fr) minmax(0, 13fr) minmax(0, 13fr);
        gap: 4px 10px;
    }

    .reg-player-avatar {
        width: 34px;
        height: 34px;
    }

    .reg-player-name-link {
        font-size: 12.5px;
    }

    .reg-player-phone {
        font-size: 10.5px;
    }

    .registered-teams-header__cell,
    .reg-field__label {
        font-size: 9px;
    }

    .reg-field__value,
    .reg-status-badge,
    .reg-team-score-badge {
        font-size: 11px;
    }

    .reg-action-stack-btn {
        height: 26px;
        padding: 0 7px;
        font-size: 10.5px;
        gap: 5px;
    }
}

@media (max-width: 767px) {
    .upload-grid,
    .payment-grid,
    .player-search-row {
        grid-template-columns: 1fr;
    }

    .pay-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .sort-box-right {
        width: 100%;
        justify-content: flex-start;
    }

    #downloadTeamsBtn span {
        display: none;
    }

    .registered-teams-header {
        display: none;
    }

    .registered-team-card {
        padding: 12px;
        border-radius: 16px;
    }

    .registered-team-card__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas:
            "players players players score"
            "players players players draw"
            "code date paymentstatus paymentdate"
            "review review review review"
            "actions actions actions actions";
        gap: 10px 12px;
        align-items: start;
    }

    .registered-team-card__players {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .reg-player-amp {
        align-self: center;
    }

    .reg-field__label {
        display: inline-flex;
    }

    .registered-team-card__score,
    .registered-team-card__draw {
        border-left: 1px solid var(--reg-border);
        padding-left: 12px;
    }

    .registered-team-card__code,
    .registered-team-card__date,
    .registered-team-card__paymentstatus,
    .registered-team-card__paymentdate,
    .registered-team-card__review {
        padding-top: 10px;
        border-top: 1px solid var(--reg-border);
    }

    .reg-review-actions {
        flex-direction: row;
    }

    .registered-team-card__actions {
        flex-direction: row;
        justify-content: stretch;
        width: 100%;
        flex-wrap: nowrap;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid var(--reg-border);
    }

    .reg-action-stack-btn {
        flex: 1 1 0;
        justify-content: center;
        width: auto;
        height: 40px;
        font-size: 12px;
        border-radius: 10px;
        gap: 6px;
    }

    .reg-action-stack-btn span {
        flex: 0 1 auto;
        font-size: 11.5px;
        white-space: nowrap;
    }

    .reg-player-avatar {
        width: 36px;
        height: 36px;
    }

    .reg-player-name-link {
        font-size: 13.5px;
    }

    .reg-player-phone {
        font-size: 11px;
    }

    .reg-skill-inline {
        font-size: 10.5px;
        min-width: 36px;
    }

    .reg-team-score-badge {
        font-size: 12px;
    }

    .reg-status-badge {
        height: 26px;
        padding: 0 10px;
        font-size: 11px;
    }

    .registered-pagination {
        margin-top: 8px;
    }
}

/* Phones (<= 480px): the 4-column card grid above leaves ~65px per cell, so the score badges
   (min-width 90px) and the long Payment Date overflowed their cells. Switch to 2 columns and
   tighten padding / font sizes so nothing crosses the card edge. */
@media (max-width: 480px) {
    .registered-team-card {
        padding: 10px;
        border-radius: 14px;
    }

    .registered-team-card__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "players players"
            "score draw"
            "code date"
            "paymentstatus paymentdate"
            "review review"
            "actions actions";
        gap: 8px 10px;
    }

    .registered-team-card__score,
    .registered-team-card__draw {
        padding-left: 10px;
    }

    .registered-team-card__score {
        border-left: none;
        padding-left: 0;
    }

    .registered-team-card__code,
    .registered-team-card__date,
    .registered-team-card__paymentstatus,
    .registered-team-card__paymentdate,
    .registered-team-card__review {
        padding-top: 8px;
    }

    .reg-player-avatar {
        width: 32px;
        height: 32px;
    }

    .reg-player-name-link {
        font-size: 12.5px;
    }

    .reg-player-phone {
        font-size: 10.5px;
    }

    .reg-player-meta {
        gap: 4px;
    }

    .reg-player-score {
        font-size: 10px;
    }

    .reg-field__label {
        font-size: 9px;
        letter-spacing: 0.2px;
    }

    .reg-field__value {
        font-size: 11.5px;
        overflow-wrap: anywhere;
    }

    .reg-team-score-badge-row {
        gap: 4px;
    }

    .reg-team-score-badge {
        min-width: 0;
        height: 22px;
        padding: 0 7px;
        gap: 4px;
        font-size: 11px;
    }

    .registered-team-card__paymentstatus .fee-status-select,
    .registered-team-card__review .reg-review-select {
        max-width: 100%;
        min-width: 0;
        font-size: 11px;
    }

    .registered-team-card__actions {
        gap: 6px;
        padding-top: 8px;
    }

    .reg-action-stack-btn {
        height: 36px;
        padding: 0 4px;
        gap: 4px;
    }

    .reg-action-stack-btn span {
        font-size: 10.5px;
    }
}