/*
 * PlayTCG 2.0 — Telas do sistema (44 a 59): inscrição do jogador e administração da plataforma.
 *
 * Ver docs/design/sistema/LEIA-ME.md. Este arquivo é próprio destas 8 telas — não reabre
 * tcg-tokens.css nem tcg-components.css, só usa as variáveis e classes (.tcg-btn*, .tcg-label,
 * .tcg-segmented) que eles já publicam.
 *
 * Prefixo tja- (Telas Jogador/Admin) para não colidir com nada existente.
 */

/* ========================================
   ESTRUTURA DE PÁGINA
   ======================================== */

.tja-shell {
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px clamp(16px, 4vw, 56px) 56px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-sizing: border-box;
}

.tja-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.tja-head-text h1 {
    margin: 0;
    font-size: var(--tcg-font-size-xxxl);
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: var(--tcg-letter-spacing-title);
    line-height: var(--tcg-line-height-tight);
    color: var(--tcg-ink);
}

.tja-head-text p {
    margin: 6px 0 0 0;
    font-size: var(--tcg-font-size-base);
    color: var(--tcg-neutral-700);
}

.tja-head-actions {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}

.tja-crumb {
    font-size: var(--tcg-font-size-sm);
    color: var(--tcg-neutral-600);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tja-crumb a {
    color: var(--tcg-neutral-600);
}

.tja-crumb a:hover {
    color: var(--tcg-accent);
}

/* Grade principal: conteúdo + coluna lateral. Quebra em 1024px — LEIA-ME, "quebras de
   responsivo": a coluna lateral desce para baixo do conteúdo. */
.tja-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1024px) {
    .tja-grid {
        grid-template-columns: 1fr;
    }
}

.tja-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* ========================================
   CAIXAS (substituem Card do AntDesign nestas telas)
   ======================================== */

.tja-box {
    background: var(--tcg-surface);
    border: var(--tcg-border-width-thick) solid var(--tcg-ink);
}

.tja-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px;
    border-bottom: var(--tcg-border-width-thick) solid var(--tcg-ink);
    font-size: var(--tcg-font-size-xs);
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: var(--tcg-letter-spacing-label);
    text-transform: uppercase;
}

.tja-box-head span:last-child {
    text-transform: none;
    letter-spacing: normal;
    font-weight: var(--tcg-font-weight-bold);
}

/* Grupo com pendência: borda e cabeçalho em acento — "1 · SEUS DADOS" quando falta algo. */
.tja-box-pending {
    border-color: var(--tcg-accent);
}

.tja-box-pending > .tja-box-head {
    background: var(--tcg-accent);
    border-color: var(--tcg-accent);
    color: #fff;
}

.tja-box-body {
    padding: 18px;
}

.tja-box-foot {
    padding: 14px 18px;
    border-top: var(--tcg-border-width-thick) solid var(--tcg-ink);
}

/* ========================================
   CAMPOS DE FORMULÁRIO — grade 2 colunas
   ======================================== */

.tja-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 640px) {
    .tja-fields {
        grid-template-columns: 1fr;
    }
}

.tja-fields-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 900px) {
    .tja-fields-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .tja-fields-3 {
        grid-template-columns: 1fr;
    }
}

.tja-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.tja-field-static {
    height: var(--tcg-touch-target);
    display: flex;
    align-items: center;
    padding: 0 13px;
    border: var(--tcg-border-width-thick) solid var(--tcg-neutral-300);
    background: var(--tcg-ground);
    font-size: var(--tcg-font-size-base);
    color: var(--tcg-neutral-700);
    box-sizing: border-box;
}

/* ========================================
   ETIQUETAS RETANGULARES — substituem Tag/Badge
   ======================================== */

.tja-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: .4px;
    line-height: 1.4;
    border: var(--tcg-border-width-thick) solid var(--tcg-ink);
    color: var(--tcg-ink);
    background: transparent;
    white-space: nowrap;
}

.tja-badge-solid {
    background: var(--tcg-ink);
    color: var(--tcg-text-inverse);
    border-color: var(--tcg-ink);
}

.tja-badge-accent {
    background: var(--tcg-accent);
    color: #fff;
    border-color: var(--tcg-accent);
}

.tja-badge-accent-outline {
    background: var(--tcg-accent-100);
    color: var(--tcg-accent-700);
    border-color: var(--tcg-accent);
}

.tja-badge-muted {
    border-color: var(--tcg-neutral-300);
    color: var(--tcg-neutral-600);
}

/* ========================================
   PAINEL ESCURO (resumo do torneio / da cobrança) e réguas internas
   ======================================== */

.tja-panel-dark {
    background: var(--tcg-ink);
    color: var(--tcg-text-inverse);
    padding: 20px;
}

.tja-panel-dark .tja-rule {
    height: 1px;
    background: var(--tcg-arena-700);
    margin: 16px 0;
    border: none;
}

.tja-panel-dark .tja-kicker {
    font-size: 10px;
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: var(--tcg-letter-spacing-group);
    color: var(--tcg-neutral-500);
    text-transform: uppercase;
}

.tja-panel-dark .tja-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--tcg-font-size-base);
    color: var(--tcg-neutral-300, #c9c6c4);
}

.tja-panel-dark .tja-row strong {
    color: #fff;
}

/* ========================================
   AVISOS — nunca verde, sempre tinta/acento neutro
   ======================================== */

.tja-notice {
    background: var(--tcg-ground);
    border-left: 4px solid var(--tcg-ink);
    padding: 14px 16px;
    font-size: var(--tcg-font-size-sm);
    line-height: var(--tcg-line-height-normal);
    color: var(--tcg-neutral-700);
}

.tja-notice-accent {
    background: var(--tcg-accent-100);
    border-left-color: var(--tcg-accent);
    color: var(--tcg-neutral-700);
}

.tja-notice strong {
    color: var(--tcg-ink);
}

.tja-countdown {
    font-weight: var(--tcg-font-weight-bold);
    font-variant-numeric: tabular-nums;
}

.tja-countdown-expired {
    color: var(--tcg-accent-700);
}

/* ========================================
   GRADE DE ESTADOS (telas 44/47 — vazio, bloqueado etc.)
   ======================================== */

.tja-state-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    background: var(--tcg-ink);
    border: var(--tcg-border-width-thick) solid var(--tcg-ink);
}

@media (max-width: 900px) {
    .tja-state-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .tja-state-grid {
        grid-template-columns: 1fr;
    }
}

.tja-state-card {
    background: var(--tcg-surface);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tja-state-card-dark {
    background: var(--tcg-ink);
    color: var(--tcg-text-inverse);
}

.tja-state-kicker {
    font-size: 10px;
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: var(--tcg-letter-spacing-label);
    color: var(--tcg-neutral-600);
    text-transform: uppercase;
}

.tja-state-card-dark .tja-state-kicker {
    color: var(--tcg-neutral-500);
}

.tja-state-kicker-accent {
    color: var(--tcg-accent-700);
}

.tja-state-title {
    font-size: 21px;
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}

.tja-state-body {
    font-size: var(--tcg-font-size-sm);
    line-height: var(--tcg-line-height-normal);
    color: var(--tcg-neutral-700);
}

.tja-state-card-dark .tja-state-body {
    color: var(--tcg-neutral-300, #c9c6c4);
}

.tja-state-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.tja-state-actions-row {
    display: flex;
    gap: 2px;
    margin-top: 4px;
}

/* ========================================
   FAIXA DE SITUAÇÃO (tela 45 — topo do detalhe da inscrição)
   ======================================== */

.tja-status-strip {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--tcg-ink);
    color: var(--tcg-text-inverse);
}

.tja-status-strip-accent {
    background: var(--tcg-accent);
    color: #fff;
}

.tja-status-strip-alert {
    background: var(--tcg-accent-100);
    border: var(--tcg-border-width-thick) solid var(--tcg-accent);
    color: var(--tcg-neutral-700);
}

.tja-status-strip-neutral {
    background: var(--tcg-surface);
    border: var(--tcg-border-width-thick) solid var(--tcg-ink);
    color: var(--tcg-neutral-700);
}

.tja-status-kicker {
    font-size: 11px;
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: var(--tcg-letter-spacing-label);
    opacity: .9;
    text-transform: uppercase;
}

.tja-status-title {
    font-size: 26px;
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: -0.02em;
    margin: 5px 0 0 0;
    line-height: 1.2;
}

.tja-status-sub {
    font-size: var(--tcg-font-size-base);
    margin-top: 4px;
    opacity: .96;
}

.tja-status-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}

.tja-status-countdown {
    flex: 0 0 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tja-status-countdown .tja-countdown-label {
    font-size: 10px;
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: var(--tcg-letter-spacing-label);
    opacity: .85;
    text-transform: uppercase;
}

.tja-status-countdown .tja-countdown-value {
    font-size: 32px;
    font-weight: var(--tcg-font-weight-bold);
    line-height: 1;
}

/* ========================================
   LINHA DO TEMPO (telas 45 e 57)
   ======================================== */

.tja-timeline {
    border: var(--tcg-border-width-thick) solid var(--tcg-ink);
}

.tja-timeline-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: var(--tcg-border-rule);
}

.tja-timeline-item:last-child {
    border-bottom: none;
}

.tja-timeline-dot {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: var(--tcg-border-width-thick) solid var(--tcg-neutral-300);
    margin-top: 2px;
}

.tja-timeline-dot-done {
    background: var(--tcg-ink);
    border-color: var(--tcg-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: var(--tcg-font-weight-bold);
}

.tja-timeline-dot-pending {
    border-color: var(--tcg-accent);
}

.tja-timeline-title {
    font-size: var(--tcg-font-size-base);
    font-weight: var(--tcg-font-weight-bold);
}

.tja-timeline-meta {
    font-size: 12px;
    color: var(--tcg-neutral-600);
    font-variant-numeric: tabular-nums;
}

/* ========================================
   FAIXA DE ESTATÍSTICAS (telas 46/56/57/58/59)
   ======================================== */

.tja-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    background: var(--tcg-ink);
    color: var(--tcg-text-inverse);
    border-bottom: var(--tcg-border-width-thick) solid var(--tcg-ink);
}

.tja-stat {
    padding: 16px 24px;
    border-right: 1px solid var(--tcg-arena-700);
}

.tja-stat:last-child {
    border-right: none;
}

.tja-stat-value {
    font-size: 26px;
    font-weight: var(--tcg-font-weight-bold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tja-stat-value-accent {
    color: var(--tcg-accent);
}

.tja-stat-label {
    font-size: 10px;
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: var(--tcg-letter-spacing-label);
    color: var(--tcg-neutral-500);
    margin-top: 5px;
    text-transform: uppercase;
}

/* ========================================
   BARRA DE FERRAMENTAS (busca + filtros de uma lista de admin)
   ======================================== */

.tja-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.tja-toolbar-title {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.tja-toolbar-title h2 {
    margin: 0;
    font-size: 22px;
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: -0.02em;
}

.tja-toolbar-meta {
    font-size: 13px;
    color: var(--tcg-neutral-500);
    font-variant-numeric: tabular-nums;
}

/* Barra escura de cabeçalho de lista (título + busca), como nos artboards do pacote. */
.tja-list-head {
    height: auto;
    min-height: 64px;
    background: var(--tcg-ink);
    color: var(--tcg-text-inverse);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 24px;
}

.tja-search {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    border: var(--tcg-border-width-thick) solid var(--tcg-neutral-300);
    background: var(--tcg-surface);
    padding: 0 12px;
    box-sizing: border-box;
    min-width: 220px;
}

.tja-search svg {
    flex: 0 0 auto;
    color: var(--tcg-neutral-600);
}

.tja-search input {
    border: none;
    outline: none;
    font: inherit;
    flex: 1;
    background: transparent;
    color: var(--tcg-ink);
    min-width: 0;
}

.tja-search-dark {
    background: var(--tcg-arena-700);
    border-color: var(--tcg-neutral-700);
}

.tja-search-dark input {
    color: #fff;
}

.tja-search-dark input::placeholder {
    color: var(--tcg-neutral-500);
}

/* ========================================
   TABELA DENSA DE ADMINISTRAÇÃO
   ======================================== */

.tja-table-wrap {
    background: var(--tcg-surface);
    border: var(--tcg-border-width-thick) solid var(--tcg-ink);
    overflow-x: auto;
}

.tja-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.tja-table thead tr {
    background: var(--tcg-ground);
    border-bottom: var(--tcg-border-width-thick) solid var(--tcg-ink);
}

.tja-table th {
    text-align: left;
    padding: 11px 14px;
    font-size: 10px;
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: var(--tcg-letter-spacing-label);
    color: var(--tcg-neutral-700);
    text-transform: uppercase;
    white-space: nowrap;
}

.tja-table th.tja-num,
.tja-table td.tja-num {
    text-align: right;
}

.tja-table td {
    padding: 12px 14px;
    border-bottom: var(--tcg-border-rule);
    font-size: var(--tcg-font-size-base);
    vertical-align: top;
}

.tja-table tbody tr:last-child td {
    border-bottom: none;
}

.tja-table tbody tr:hover td {
    background: var(--tcg-neutral-200);
}

/* Linha que precisa de atenção (denúncia, pendência, divergência). */
.tja-row-flag {
    background: var(--tcg-accent-100);
}

.tja-row-flag:hover td {
    background: var(--tcg-accent-100) !important;
}

.tja-row-flag td:first-child {
    box-shadow: inset 4px 0 0 var(--tcg-accent);
}

.tja-cell-name {
    font-weight: var(--tcg-font-weight-bold);
    color: var(--tcg-ink);
}

.tja-cell-sub {
    font-size: 12px;
    color: var(--tcg-neutral-600);
    margin-top: 2px;
}

.tja-cell-sub-accent {
    color: var(--tcg-accent-700);
    font-weight: 600;
}

.tja-cell-actions {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.tja-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-top: var(--tcg-border-width-thick) solid var(--tcg-ink);
    font-size: 13px;
    color: var(--tcg-neutral-600);
}

.tja-pager {
    display: flex;
    gap: 2px;
}

/* ========================================
   CARTÃO DE INSCRIÇÃO (tela 47)
   ======================================== */

.tja-reg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.tja-reg-card {
    background: var(--tcg-surface);
    border: var(--tcg-border-width-thick) solid var(--tcg-ink);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tja-reg-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.tja-reg-card-title {
    font-size: 17px;
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: -0.01em;
}

.tja-reg-card-meta {
    font-size: 13px;
    color: var(--tcg-neutral-600);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tja-reg-card-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
}

/* ========================================
   ETAPAS DE PAGAMENTO (tela 44) — substitui Steps
   ======================================== */

.tja-pay-lines {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: var(--tcg-border-width-thick) solid var(--tcg-ink);
}

.tja-pay-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: var(--tcg-font-size-base);
    border-bottom: var(--tcg-border-rule);
}

.tja-pay-line span:first-child {
    color: var(--tcg-neutral-700);
}

.tja-pay-line strong {
    font-variant-numeric: tabular-nums;
}

.tja-pay-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--tcg-ink);
    color: var(--tcg-text-inverse);
}

.tja-pay-total .tja-total-label {
    font-size: 11px;
    font-weight: var(--tcg-font-weight-bold);
    letter-spacing: var(--tcg-letter-spacing-label);
    text-transform: uppercase;
}

.tja-pay-total .tja-total-value {
    font-size: 26px;
    font-weight: var(--tcg-font-weight-bold);
    font-variant-numeric: tabular-nums;
}

/* Opção de pagamento (Pix / cartão) — cartão selecionável sem componente de biblioteca. */
.tja-pay-options {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}

.tja-pay-option {
    flex: 1 1 200px;
    border: var(--tcg-border-width-thick) solid var(--tcg-neutral-300);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    background: var(--tcg-surface);
    text-align: left;
    font-family: inherit;
}

.tja-pay-option-selected {
    border-color: var(--tcg-ink);
}

.tja-pay-option-dot {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: var(--tcg-border-width-thick) solid var(--tcg-neutral-300);
    box-sizing: border-box;
}

.tja-pay-option-selected .tja-pay-option-dot {
    border-color: var(--tcg-ink);
    background: var(--tcg-accent);
    box-shadow: inset 0 0 0 3px #fff;
}

/* ========================================
   RESPONSIVO — telas de admin em celular mostram busca + cartões
   ======================================== */

@media (max-width: 768px) {
    .tja-shell {
        gap: 18px;
    }

    .tja-table-wrap {
        border-width: var(--tcg-border-width-thick);
    }

    .tja-stat {
        padding: 12px 16px;
    }

    .tja-status-strip,
    .tja-list-head {
        padding: 16px;
    }
}