/*
 * GB Packers · Roster Sync — Roster Shortcode
 * Archivo: assets/roster.css
 *
 * Todos los estilos del shortcode [gbrs_roster] están aquí.
 *
 * Secciones:
 *   1. Base
 *   2. Navegación rápida (botones a Ataque / Defensa / Equipos especiales)
 *   3. Cabecera de sección por grupo
 *   4. Tabla
 *   5. Foto de jugador
 *   6. Ordenación (sorting)
 *   7. Responsive / sticky column
 */


/* ─────────────────────────────────────────────────────────────────────────────
   1. BASE
───────────────────────────────────────────────────────────────────────────── */

.gbrs-roster {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.88em;
    max-width: 1100px;
    margin: 0 auto;
    color: #222;
}

.gbrs-roster-empty {
    color: #999;
    font-style: italic;
    padding: 12px 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. NAVEGACIÓN RÁPIDA — botones a cada bloque
───────────────────────────────────────────────────────────────────────────── */

.gbrs-roster-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
}

.gbrs-roster-nav-btn {
    display: inline-block;
    flex: 1 1 auto;
    min-width: 140px;
    padding: 14px 22px;
    background: #10301f;
    color: #fcb215 !important;
    font-family: "UltimatumBold", sans-serif;
    font-size: 1.5rem;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none !important;
    border: 2px solid #10301f;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    scroll-margin-top: 80px;
}

.gbrs-roster-nav-btn:hover,
.gbrs-roster-nav-btn:focus {
    background: #fcb215;
    color: #10301f !important;
    transform: translateY(-2px);
    outline: none;
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. CABECERA DE SECCIÓN POR GRUPO (OFFENSE / DEFENSE / SPECIAL TEAMS)
───────────────────────────────────────────────────────────────────────────── */

.gbrs-roster-group {
    margin: 36px 0 0;
    scroll-margin-top: 80px; /* deja aire bajo header sticky al hacer scroll a ancla */
}

.gbrs-roster-group-title {
    font-family: "UltimatumBold", sans-serif;
    font-size: 1.8rem;
    font-weight: normal;
    color: #10301f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #10301f;
    padding-bottom: 10px;
    margin-bottom: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. TABLA
───────────────────────────────────────────────────────────────────────────── */

.gbrs-roster-table-wrap {
    overflow: visible; /* necesario para que sticky funcione en móvil */
}

.gbrs-roster-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gbrs-roster-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1em;
    white-space: nowrap;
}

/* Cabecera — estilo igualado a la tabla de estadísticas individuales,
   pero con texto en amarillo Spanish Packers (#fcb215) */
.gbrs-roster-table thead tr,
.gbrs-roster-table thead th {
    background: #10301f;
    color: #fcb215;
}

.gbrs-roster-table thead th {
    padding: 16px 14px;
    text-align: center;
    font-family: "UltimatumBold", sans-serif;
    font-weight: normal;
    font-size: 1.4em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    user-select: none;
    border-bottom: none;
}

/* Columna foto — no ordenable */
.gbrs-roster-table thead th.gbrs-col-photo {
    width: 110px;
    min-width: 110px;
    cursor: default;
}

/* Columna nombre — alineada a la izquierda */
.gbrs-roster-table thead th.gbrs-col-name {
    text-align: left;
    min-width: 130px;
}

/* Filas */
.gbrs-roster-table tbody tr:nth-child(even) {
    background: #f5f5f5;
}

.gbrs-roster-table tbody tr:hover {
    background: #e8f0ec;
}

.gbrs-roster-table td {
    padding: 8px 12px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
}

/* Celda de foto — alinear contenido al borde inferior, sin padding.
   Sin border-bottom para que parezca una única celda foto+nombre. */
.gbrs-roster-table td:nth-child(1) {
    vertical-align: bottom;
    padding: 0;
    border-bottom: none;
}

/* Anular el border-left que el theme Gridiron añade globalmente a th+td/td+td
   ENTRE la celda de foto (col 1) y la celda de nombre (col 2): así parecen
   una única celda foto+nombre. El resto de columnas conservan su separador. */
.gbrs-roster-table thead th:nth-child(2),
.gbrs-roster-table tbody td:nth-child(2) {
    border-left: none !important;
}

/* Celda nombre */
.gbrs-roster-td-name {
    text-align: left !important;
    font-weight: 600;
}

.gbrs-roster-td-name a {
    color: inherit;
    text-decoration: none;
}

.gbrs-roster-td-name a:hover {
    text-decoration: underline;
    color: #10301f;
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. FOTO DE JUGADOR
   PNGs sin fondo — se muestran sobre fondo transparente,
   alineados al borde inferior de la celda.
───────────────────────────────────────────────────────────────────────────── */

.gbrs-roster-photo-link {
    display: block;
    line-height: 0;     /* evita espacio fantasma bajo la imagen */
    text-decoration: none;
}

.gbrs-roster-photo {
    width: 100%;
    max-width: 110px;
    height: 100px;
    border-radius: 0;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    margin: 0 auto;
    background: transparent;
    vertical-align: bottom;
}

/* Placeholder cuando no hay foto */
.gbrs-roster-photo-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    background: #dde8e4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #8aab9e;
    font-size: 1.6em;
    font-weight: 700;
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. ORDENACIÓN (SORTING)
───────────────────────────────────────────────────────────────────────────── */

/* Columnas ordenables */
.gbrs-roster-table thead th.gbrs-sortable {
    cursor: pointer;
}

.gbrs-roster-table thead th.gbrs-sortable:hover {
    background: #1a4530;
}

/* Indicador de dirección */
.gbrs-sort-icon {
    display: inline-block;
    margin-left: 4px;
    opacity: 0.5;
    font-size: 0.75em;
    vertical-align: middle;
}

.gbrs-roster-table thead th.gbrs-sort-asc  .gbrs-sort-icon,
.gbrs-roster-table thead th.gbrs-sort-desc .gbrs-sort-icon {
    opacity: 1;
}

.gbrs-roster-table thead th.gbrs-sort-asc  .gbrs-sort-icon::after { content: ' ▲'; }
.gbrs-roster-table thead th.gbrs-sort-desc .gbrs-sort-icon::after { content: ' ▼'; }
.gbrs-roster-table thead th.gbrs-sortable:not(.gbrs-sort-asc):not(.gbrs-sort-desc) .gbrs-sort-icon::after { content: ' ⇅'; }


/* ─────────────────────────────────────────────────────────────────────────────
   7. RESPONSIVE / STICKY COLUMN
   Solo la primera columna (foto) queda anclada al hacer scroll horizontal.
   Sin sombra ni línea vertical en la columna foto (a petición).
───────────────────────────────────────────────────────────────────────────── */

.gbrs-roster-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Toda la tabla en una línea para que el scroll funcione */
.gbrs-roster-table {
    white-space: nowrap;
}

/* Sticky en la primera columna (foto) — activo siempre, no solo en móvil */
.gbrs-roster-table thead th:nth-child(1),
.gbrs-roster-table tbody td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 3;
}

/* Las celdas NO sticky tienen z-index inferior para que pasen por detrás */
.gbrs-roster-table thead th,
.gbrs-roster-table tbody td {
    position: relative;
    z-index: 1;
}

/* Fondos opacos en la columna sticky para tapar el contenido que desliza */
.gbrs-roster-table thead th:nth-child(1) {
    background: #10301f;
    z-index: 3;
}

.gbrs-roster-table tbody tr:nth-child(odd)  td:nth-child(1) { background: #fff;    z-index: 3; }
.gbrs-roster-table tbody tr:nth-child(even) td:nth-child(1) { background: #f5f5f5; z-index: 3; }
.gbrs-roster-table tbody tr:hover           td:nth-child(1) { background: #e8f0ec; z-index: 3; }

/* Columna foto — ancho fijo, sin sombra ni borde derecho (a petición) */
.gbrs-roster-table thead th:nth-child(1),
.gbrs-roster-table tbody td:nth-child(1) {
    width: 110px;
    min-width: 110px;
    box-shadow: none;
    border-right: none;
    /* outline negativo de 1px para tapar la línea vertical residual
       que aparece entre celdas sticky con border-collapse */
    outline: 1px solid transparent;
    outline-offset: -1px;
}

/* Igualar el fondo de la celda nombre al de la celda foto para
   que ambas se perciban como una sola celda foto+nombre */
.gbrs-roster-table tbody tr:nth-child(odd)  td.gbrs-roster-td-name { background: #fff; }
.gbrs-roster-table tbody tr:nth-child(even) td.gbrs-roster-td-name { background: #f5f5f5; }
.gbrs-roster-table tbody tr:hover           td.gbrs-roster-td-name { background: #e8f0ec; }


/* ─────────────────────────────────────────────────────────────────────────────
   MÓVIL — botones de nav en columna
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .gbrs-roster-nav {
        flex-direction: column;
        gap: 8px;
    }

    .gbrs-roster-nav-btn {
        min-width: 0;
        width: 100%;
        font-size: 1rem;
        padding: 10px 16px;
    }

    .gbrs-roster-group-title {
        font-size: 1.4rem;
    }
}