/* ============================================================================
   Team registration (Views/Tournament/TeamRegistrationV2.cshtml)

   The captain builds a ROSTER, so this page is a table + picker, not a stack of
   player forms. Layout/behaviour only: every colour, radius, shadow and spacing
   value comes from a token in theme-v2.css, and shared furniture (.sc-btn,
   .sc-badge, .sc-input, .sc-table, .sc-card) comes from components-v2.css. That
   keeps the page correct in BOTH themes - light is the default first-visit
   theme, even though the design spec only illustrates dark.

   Deliberately does NOT use --primary-green: that legacy alias resolves to the
   invalid literal `auto` in dark mode (theme-v2.css FIXME), which is why the
   older registration sheets have washed-out buttons. Use --color-primary.

   Prefix: .trm- (team registration). No global element selectors.
   ============================================================================ */

.trm-page {
    --trm-gap: var(--spacing-lg);
    --trm-card-pad: 20px;
    --trm-row-gap: 12px;

    display: flex;
    flex-direction: column;
    gap: var(--trm-gap);
    padding-bottom: 48px;
    color: var(--color-text-primary);
}

/* ============================ TOURNAMENT NAV ============================== */
.trm-nav {
    margin: 0;
    padding: 0 4px;
}

/* ============================ PAGE GRID =================================== */
.trm-grid {
    display: grid;
    /* minmax(0, ...) on the main track stops a wide roster table from forcing
       the whole grid wider than the viewport. */
    grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr);
    gap: var(--trm-gap);
    align-items: start;
}

.trm-main,
.trm-aside {
    display: flex;
    flex-direction: column;
    gap: var(--trm-gap);
    min-width: 0;
}

/* ============================ CARDS ======================================= */
.trm-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-lg);
    padding: var(--trm-card-pad);
    box-shadow: var(--shadow-sm);
}

.trm-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.trm-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-primary);
}

.trm-card__title i { color: var(--color-primary); }

/* The circled step number from the spec (1 THONG TIN DOI / 2 DANH SACH VDV). */
.trm-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: var(--radius-circle);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.trm-card__subtitle {
    margin: 4px 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ============================ FORM FIELDS ================================= */
.trm-field { margin-bottom: 16px; }
.trm-field:last-child { margin-bottom: 0; }

.trm-field__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: 6px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.trm-required { color: var(--color-danger); }

.trm-counter {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.trm-counter.is-over { color: var(--color-danger); }

.trm-hint {
    margin: 6px 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.trm-field select.sc-input { height: 40px; }

/* Captain picker: a read-only chip that opens the player list, mirroring the
   spec's "SC000123 - Nguyen Van Minh  x" control. */
.trm-captain {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md);
    background: var(--color-input-bg);
    min-height: 44px;
}

.trm-captain__empty {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--color-input-placeholder);
}

.trm-captain__info { flex: 1; min-width: 0; }

.trm-captain__name {
    display: block;
    font-weight: 600;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trm-captain__meta {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* ============================ LOGO UPLOAD ================================= */
.trm-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 16px;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface-secondary);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.trm-dropzone:hover,
.trm-dropzone.is-dragover {
    border-color: var(--color-primary);
    background: var(--tint-primary-bg);
}

.trm-dropzone:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.trm-dropzone__icon {
    font-size: 26px;
    color: var(--color-primary);
}

.trm-dropzone__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.trm-dropzone__hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.trm-logo-preview {
    display: none;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.trm-logo-preview.is-visible { display: flex; }

.trm-logo-preview img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

/* ============================ ROSTER COUNTER ============================== */
.trm-roster-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.trm-count {
    text-align: right;
    line-height: 1.1;
}

.trm-count__value {
    display: block;
    font-family: var(--font-family-heading);
    font-size: 26px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.trm-count__label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Lime only once the squad is actually complete - the spec's "8/8 DOI DA DU". */
.trm-count.is-complete .trm-count__value { color: var(--color-primary); }
.trm-count.is-complete .trm-count__label { color: var(--color-primary); }

/* ============================ ROSTER TABLE ================================ */
/* The score-trust tooltip (.trustL0-.trustL3 :hover::after in theme-v2.css) is absolutely
   positioned below its score. Setting overflow-x also makes overflow-y compute to `auto`, so
   without this padding the tooltip on the last row would be clipped by the scroll box. The
   negative margin keeps the reserved space from showing as a gap. */
.trm-table-wrap {
    overflow-x: auto;
    padding-bottom: 30px;
    margin-bottom: -30px;
}

.trm-table { font-size: var(--font-size-sm); }
.trm-table thead th { white-space: nowrap; }
.trm-table td { vertical-align: middle; }

.trm-table .trm-col-index { width: 40px; color: var(--color-text-muted); }
.trm-table .trm-col-actions { width: 90px; text-align: right; white-space: nowrap; }

.trm-player {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.trm-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border);
}

.trm-avatar--sm { width: 28px; height: 28px; flex-basis: 28px; }

.trm-player__name {
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trm-player__sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Empty roster slot rows - visible but muted, so an incomplete team reads as
   "unfinished", never as an error (spec: do not make the page alarming). */
.trm-slot td {
    color: var(--color-text-muted);
    font-style: italic;
    background: var(--color-surface-secondary);
}

.trm-slot .trm-col-index { font-style: normal; }

.trm-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.trm-icon-btn:hover {
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
    background: var(--color-surface-hover);
}

.trm-icon-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.trm-icon-btn:disabled { opacity: .5; cursor: not-allowed; }
.trm-icon-btn--danger:hover { color: var(--color-danger); border-color: var(--color-danger); }
.trm-icon-btn--crown:hover { color: var(--color-secondary-strong); border-color: var(--color-secondary-strong); }
.trm-icon-btn--info:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* ============================ BADGES / STATUS ============================= */
.trm-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
}

.trm-badge--captain { background: var(--tint-gold-bg); color: var(--tint-gold-fg); }
.trm-badge--player { background: var(--tint-neutral-bg); color: var(--tint-neutral-fg); }
.trm-badge--success { background: var(--tint-success-bg); color: var(--tint-success-fg); }
.trm-badge--warning { background: var(--tint-warning-bg); color: var(--tint-warning-fg); }
.trm-badge--danger { background: var(--tint-danger-bg); color: var(--tint-danger-fg); }
.trm-badge--info { background: var(--tint-info-bg); color: var(--tint-info-fg); }

/* ============================ NOTICES ===================================== */
.trm-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.trm-notice i { margin-top: 2px; }
.trm-notice--warning { background: var(--tint-warning-bg); color: var(--tint-warning-fg); }
.trm-notice--danger { background: var(--tint-danger-bg); color: var(--tint-danger-fg); }
.trm-notice--success { background: var(--tint-success-bg); color: var(--tint-success-fg); }
.trm-notice[hidden] { display: none; }

/* Per-player validation messages, attached to their own roster row. */
.trm-row-issue td {
    padding-top: 0;
    padding-bottom: 8px;
    font-size: var(--font-size-xs);
    color: var(--color-danger);
}

/* ============================ REQUIREMENTS ================================ */
.trm-reqs {
    margin: 16px 0 0;
    padding: 14px;
    list-style: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-secondary);
}

.trm-reqs__title {
    margin: 0 0 10px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.trm-req {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.trm-req i { margin-top: 3px; font-size: var(--font-size-xs); }
.trm-req.is-met { color: var(--color-text-primary); }
.trm-req.is-met i { color: var(--color-success); }
.trm-req.is-unmet i { color: var(--color-text-muted); }

/* ============================ SUMMARY (sticky) ============================ */
.trm-summary { position: sticky; top: 84px; }

.trm-summary__team {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.trm-summary__name {
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
}

.trm-summary__club {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.trm-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 7px 0;
    border-bottom: 1px dashed var(--color-border-light);
}

.trm-stat:last-of-type { border-bottom: none; }

.trm-stat__label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.trm-stat__value {
    font-weight: 700;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    text-align: right;
}

.trm-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.trm-consent input { margin-top: 3px; flex: 0 0 auto; }

.trm-submit { width: 100%; }
.trm-submit:disabled {
    opacity: 0.5;
}

/* ============================ PROGRESS ==================================== */
.trm-progress {
    height: 6px;
    margin-top: 8px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-secondary);
    overflow: hidden;
}

.trm-progress__fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    transition: width 0.3s ease;
}

/* ============================ TOOLBAR / FILTERS =========================== */
.trm-toolbar {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.trm-search {
    position: relative;
    flex: 1 1 180px;
    min-width: 0;
}

.trm-search i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    pointer-events: none;
}

.trm-search .sc-input { padding-left: 32px; }

/* Player picker: a compact search box with its Search button beside it, rather than a full-width
   input - the search is button-driven, so the input does not need to fill the dialog. */
.trm-search-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.trm-search-row .trm-search { flex: 0 1 320px; }
.trm-search-row .sc-btn { flex: 0 0 auto; }

/* Multi-term search: hint under the box, and the summary / not-found / "Add all" strip above the results. */
.trm-search-hint {
    margin-top: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.trm-multi {
    padding: 8px 4px;
    border-bottom: 1px solid var(--color-border-light);
}

.trm-multi__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.trm-multi__summary { font-weight: 600; }

.trm-multi__missing {
    margin-top: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    word-break: break-word;
}

.trm-toolbar select.sc-input { flex: 1 1 140px; }

/* Full-width tabs (Registered Teams): search + both filters share one line instead of growing
   to fill 1800px; on a narrow screen they wrap like the default toolbar. */
.trm-toolbar--inline .trm-search { flex: 1 1 260px; max-width: 420px; }
.trm-toolbar--inline select.sc-input { flex: 0 1 200px; }

/* ============================ REGISTERED TEAMS ============================ */
/* List/Table view toggle. A same-named `.view-toggle`/`.view-btn` component exists in
   tournaments.css, but that stylesheet isn't loaded on this page, and its `.view-btn.active` rule
   uses the broken `--primary-green` alias this file's header comment warns about - so this is a
   fresh, minimal definition using this file's own tokens, not a copy of that one. */
.view-toggle {
    display: flex;
    gap: 4px;
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 4px;
    flex: 0 0 auto;
}

.view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
}

/* Four compact cards per row - a small logo and tight rows instead of the original tall,
   logo-forward card, so a full roster scans at a glance without pagination. All teams load in
   one request (registered-teams-list.js) and render into this grid at once. */
#registeredTeamsList {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

/* The view toggle hides the inactive container via the `hidden` attribute
   (registered-teams-list.js). `[hidden] { display: none }` is a browser default with lower
   specificity than the plain-ID `display: grid` rule above, so without this it would never
   actually take effect - List view would stay visible underneath Table view. Symmetric
   `#registeredTeamsTable` rule included for the same reason, should it ever get its own
   `display` override. */
#registeredTeamsList[hidden],
#registeredTeamsTable[hidden] {
    display: none;
}

.trm-team-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: start;
    padding: 12px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    min-height: 118px; /* ~30% shorter than the original 168px card */
}

.trm-team-card:hover { background: var(--color-surface-secondary); }

.trm-payment-select {
    width: 100%;
    height: 32px;
    padding: 4px 8px;
    font-size: var(--font-size-sm);
}

.trm-team-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 6px;
    object-fit: fill;
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border);
}

/* Team with no logo: an icon tile instead of an empty box (cards and the details modal). */
.trm-team-logo--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* Registration summary header, where the logo replaces the generic group icon. */
.trm-team-logo--lg { width: 40px; height: 40px; flex-basis: 40px; }

/* Registered Teams card's own logo size (a fixed 64px square, not the base .trm-team-logo's
   42px). Kept as its own modifier so the details modal's logo isn't affected. Fixed height (not
   auto, like the original tall card) + align-self: center so it sits centred in the row it spans
   rather than stretching to match the card's now-much-shorter height. */
.trm-team-logo--card {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    grid-row: 1 / -1;
    align-self: center;
    border-radius: 8px;
}

.trm-team-logo--card.trm-team-logo--empty { font-size: 20px; }

/* A value that is withheld (e.g. a phone hidden by the privacy rule), not an error. */
.trm-muted { color: var(--color-text-muted); cursor: help; }

/* Row 1: name, club and player count together. Row 2: status and payment together. Each row is
   its own flex line inside grid column 2, wrapping if the card gets narrow. */
.trm-team-card__top,
.trm-team-card__meta {
    grid-column: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 4px;
}

.trm-team-card__name {
    flex: 1 1 100px;
    min-width: 0;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trm-team-card__club {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.trm-team-card__count {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-secondary);
}

.trm-team-card__actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--color-border-light);
}

/* =================== REGISTERED TEAMS: TABLE VIEW ==================== */
/* Same .trm-team-card grid as List view, just partitioned into "Group A" / "Group B" / ...
   sections (registered-teams-list.js renderTeamsTable), each its own heading + 2-per-row grid so
   the group boundary reads clearly without a new card component. */
.trm-team-group { margin-bottom: var(--trm-gap); }
.trm-team-group:last-child { margin-bottom: 0; }

.trm-team-group__title {
    margin: 0 0 12px;
    font-family: var(--font-family-heading);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-primary);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-light);
}

.trm-team-group__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

/* The slot-number / Waiting badge, pushed to the end of .trm-team-card__top's flex row
   (already display:flex; flex-wrap:wrap), next to the player count. */
.trm-team-card__slot { margin-left: auto; }

/* 4 -> 2 -> 1 per row as the viewport narrows, for both List's #registeredTeamsList and Table's
   .trm-team-group__grid together - must come after both of their base (4-column) rules above so
   these overrides actually win at matching widths (same specificity, so source order decides).
   The card's own internal layout (64px logo + content column) stays the same size at every
   breakpoint - it's already compact. */
@media (max-width: 1100px) {
    #registeredTeamsList,
    .trm-team-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    #registeredTeamsList,
    .trm-team-group__grid { grid-template-columns: 1fr; }

    .trm-payment-select { max-width: 200px; }
}

/* ============================ EMPTY / LOADING ============================= */
.trm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px;
    text-align: center;
    color: var(--color-text-muted);
}

.trm-empty i { font-size: 28px; opacity: 0.6; }
.trm-empty__title { font-weight: 600; color: var(--color-text-secondary); }
.trm-empty__hint { font-size: var(--font-size-xs); }

/* ============================ RULES / PAYMENT / DOCS ====================== */
.trm-rule {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.trm-rule i { margin-top: 3px; font-size: var(--font-size-xs); color: var(--color-success); }

.trm-pay-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 7px 0;
    border-bottom: 1px dashed var(--color-border-light);
}

.trm-pay-row:last-child { border-bottom: none; }

.trm-pay-row__label {
    flex: 0 0 38%;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.trm-pay-row__value {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    word-break: break-word;
}

.trm-copy {
    flex: 0 0 auto;
    width: 28px;
}

.trm-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
    text-decoration: none;
}

.trm-doc:last-child { border-bottom: none; }
.trm-doc:hover { color: var(--color-primary); }
.trm-doc i { color: var(--color-danger); }
.trm-doc__name { flex: 1; font-size: var(--font-size-sm); }
.trm-doc__action { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ============================ MODALS ====================================== */
/* Own shell rather than .sc-modal: that one centres its content and caps the
   width for alert-style dialogs, while the player picker and team-details
   drawer need a wide, left-aligned, scrollable body. Backdrop is shared. */
.trm-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--modal-overlay-bg);
    -webkit-backdrop-filter: var(--modal-overlay-blur);
    backdrop-filter: var(--modal-overlay-blur);
}

.trm-modal.is-open { display: flex; }

.trm-modal__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 620px;
    max-height: 86vh;
    background: var(--color-modal-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.trm-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
}

.trm-modal__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
}

.trm-modal__title i { color: var(--color-primary); }

.trm-modal__close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    cursor: pointer;
}

.trm-modal__close:hover { color: var(--color-text-primary); background: var(--color-surface-hover); }
.trm-modal__close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.trm-modal__body {
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1;
}

.trm-modal__hint {
    margin: 0 0 14px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.trm-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: 12px 18px;
    border-top: 1px solid var(--color-border);
}

/* ============================ TEAM INTRO MODAL ============================ */
/* Poster-style card (opened by clicking a team's logo, see registered-teams-list.js's
   ".js-team-intro") - sized to 90% of the viewport in both dimensions. Own panel class, not
   .trm-modal__panel: the poster is a fixed 400px header band at the top (cropped, not the whole
   panel - see .trm-intro__poster), with the team/captain content below it, never overlapping. */
.trm-intro__panel {
    position: relative;
    width: 90vw;
    height: 90vh;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface-secondary);
    box-shadow: var(--shadow-lg);
}

.trm-intro__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: var(--font-size-lg);
    line-height: 1;
    cursor: pointer;
}

.trm-intro__close:hover { background: rgba(0, 0, 0, 0.65); }

/* Prev/next, one team at a time (registered-teams-list.js's .js-team-intro-prev/-next), vertically
   centred over the body area only (top: header height, bottom: 0 - auto margins split the rest),
   not over the poster header. */
.trm-intro__nav {
    position: absolute;
    top: 400px;
    bottom: 0;
    z-index: 4;
    margin: auto 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: var(--font-size-lg);
    cursor: pointer;
}

.trm-intro__nav--prev { left: 14px; }
.trm-intro__nav--next { right: 14px; }

.trm-intro__nav:hover:not(:disabled) { background: rgba(0, 0, 0, 0.65); }
.trm-intro__nav:disabled { opacity: 0.35; cursor: not-allowed; }

/* A fixed 400px header band, not the whole panel - the poster fills it edge to edge (cover), so
   anything of the source image below that 400px is simply cropped off, never shown. */
.trm-intro__poster {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 250px;
    z-index: 1;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

/* Darkens the top of the header (for the close button and sponsor tiles' contrast against a busy
   photo), fading out to fully transparent by the header's own bottom edge - it never reaches
   .trm-intro__body, which sits below the header entirely (see its own top offset). */
.trm-intro__scrim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 280px;
    z-index: 2;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0) 100%);
}

.trm-intro__sponsors {
    position: absolute;
    top: 18px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trm-intro__sponsors--left { left: 18px; align-items: flex-start; }
.trm-intro__sponsors--right { right: 18px; align-items: flex-end; }

.trm-intro__sponsor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 90px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.trm-intro__sponsor img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* Starts below the 400px poster header (not centred over the whole panel), so it never overlaps
   it - only a little further down, via the extra top padding. */
.trm-intro__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 32px 24px 24px;
    text-align: center;
    overflow-y: auto;
}

/* Entrance choreography - replays every time renderTeamIntro() inserts fresh markup (each modal
   open): the team block zooms in alone at centre first; then, only once that finishes, the
   captain block's own width silently grows from 0 (still invisible), which is what visually
   slides the team block left - ordinary flex reflow around a growing sibling, no transform
   needed on the team block itself; only once that reveal finishes does the captain block itself
   zoom in. End state: both sit side by side, centred together as a pair. */
.trm-intro__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    animation: trmIntroZoomIn 1s ease-out forwards;
}

.trm-intro__captain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    animation:
        trmIntroReveal 0.7s ease-in-out 1s forwards,
        trmIntroZoomIn 1s ease-out 1.7s forwards;
}

@keyframes trmIntroZoomIn {
    from { opacity: 0; transform: scale(1.4); }
    to { opacity: 1; transform: scale(1); }
}

/* Reserves (without showing) the captain block's final width, so the team block visibly slides
   left as this grows. 520px is a generous cap for a portrait captain photo - see
   .trm-intro__captain-avatar's height below; an unusually wide/landscape photo could clip. */
@keyframes trmIntroReveal {
    from { max-width: 0; }
    to { max-width: 520px; }
}

.trm-intro__captain-avatar {
    height: 500px;
    object-fit: fill;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.trm-intro__captain-name {
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-size: 24px;
    font-weight: 800;
}

.trm-intro__team-logo {
    height: 220px;
    flex: 0 0 120px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.trm-intro__team-logo--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-secondary);
    color: var(--color-text-muted);
    font-size: 40px;
}

.trm-intro__team-name {
    color: var(--color-text-primary);
    font-weight: 700;
    font-size: 18px;
}

/* Bare .trm-team-logo is styled as an <img> everywhere else (details modal, roster list); here
   it's also a <button> (the card's logo is clickable), so reset button chrome and let the child
   <img>/icon fill the tile the base class already sizes. */
button.trm-team-logo {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    border: 1px solid var(--color-border);
    cursor: pointer;
    overflow: hidden;
}

button.trm-team-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Phones: the panel itself already tracks the viewport (90vw x 90vh), but the fixed-size captain
   avatar, team logo and sponsor tiles can still crowd a narrow screen - shrink them too. */
@media (max-width: 480px) {
    .trm-intro__captain-avatar { height: 220px; border-radius: 14px; }
    .trm-intro__captain-name { font-size: 19px; }
    .trm-intro__team-logo { width: 70px; height: 70px; flex: 0 0 70px; border-radius: 12px; }
    .trm-intro__sponsor { width: 120px; height: 64px; padding: 6px; }
}

/* ============================ PLAYER PICKER =============================== */
.trm-results {
    margin-top: 12px;
    max-height: 46vh;
    overflow-y: auto;
    /* Room for the score-trust tooltip on the last result - see .trm-table-wrap. */
    padding-bottom: 30px;
}

.trm-result {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--color-border-light);
}

.trm-result:last-child { border-bottom: none; }
.trm-result__info { flex: 1; min-width: 0; }

.trm-result__name {
    font-weight: 600;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.trm-result__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.trm-result__meta span + span::before {
    content: "•";
    margin: 0 6px;
    color: var(--color-text-muted);
}

.trm-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 22px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ============================ TEAM DETAILS ================================ */
.trm-detail-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.trm-detail-list { margin: 0; padding: 0; list-style: none; }

.trm-detail-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--font-size-sm);
}

.trm-detail-list li:last-child { border-bottom: none; }
.trm-detail-list .trm-detail-index { width: 22px; color: var(--color-text-muted); }
.trm-detail-list .trm-detail-name { flex: 1; min-width: 0; }
.trm-detail-list .trm-detail-score { font-weight: 700; }

/* ============================ RESPONSIVE ================================== */
@media (max-width: 1200px) {
    /* Tablet: one column, in the spec's reading order - form, then registered
       teams, then rules / payment / documents (all of which live in .trm-aside,
       so the source order already matches). */
    .trm-grid { grid-template-columns: minmax(0, 1fr); }
    .trm-summary { position: static; }
}

@media (max-width: 768px) {
    .trm-page { --trm-gap: var(--spacing-md); --trm-card-pad: 14px; }

    /* Squeezing the desktop roster table into a phone is unusable, so each row
       becomes a card. The <table> keeps its semantics for assistive tech; only
       its presentation changes. */
    .trm-table,
    .trm-table tbody,
    .trm-table tr,
    .trm-table td { display: block; width: 100%; }

    .trm-table thead { display: none; }

    .trm-table tbody tr {
        position: relative;
        margin-bottom: 10px;
        padding: 12px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-surface-secondary);
    }

    .trm-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-sm);
        padding: 3px 0;
        border: none;
    }

    /* data-label is set on every <td> by the row renderer in
       team-registration-v2.js, so the card keeps its field names. */
    .trm-table tbody td::before {
        content: attr(data-label);
        font-size: var(--font-size-xs);
        font-weight: 700;
        text-transform: uppercase;
        color: var(--color-text-muted);
    }

    .trm-table tbody td.trm-col-player::before { display: none; }
    .trm-table tbody td.trm-col-player { justify-content: flex-start; }
    .trm-table .trm-col-actions { justify-content: flex-end; }
    .trm-table .trm-col-actions::before { display: none; }

    .trm-card__head { flex-direction: column; align-items: stretch; }
    .trm-roster-meta { justify-content: space-between; }
    .trm-count { text-align: left; }

    /* Keep the primary action reachable without scrolling back up. */
    .trm-sticky-submit {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin: 0 -14px -14px;
        padding: 12px 14px;
        background: var(--color-card-bg);
        border-top: 1px solid var(--color-border);
    }

    .trm-modal { padding: 0; align-items: flex-end; }
    .trm-modal__panel { max-width: none; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}