/* ================================================================
   TVFC Roster — Frontend Styles
   Brand palette: Navy #1a2a5e | Crimson #c8152e | Gold #c8a84b
   Font strategy: Playfair Display (headings) + DM Sans (body)
   Aesthetic: Refined Sports Editorial
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@400;500;600&display=swap');

:root {
    --navy:       #1a2a5e;
    --navy-deep:  #101c42;
    --navy-mid:   #243472;
    --crimson:    #c8152e;
    --crimson-dk: #9e0f23;
    --gold:       #c8a84b;
    --gold-lt:    #f0e2b0;
    --gold-dk:    #9e7e2a;
    --white:      #ffffff;
    --off-white:  #f7f8fc;
    --border:     #dde3ef;
    --text:       #1e2a3a;
    --muted:      #6b7a95;
    --radius-lg:  16px;
    --radius-md:  10px;
    --radius-sm:  6px;
    --shadow-sm:  0 2px 8px rgba(26,42,94,.08);
    --shadow-md:  0 6px 24px rgba(26,42,94,.12);
    --shadow-lg:  0 16px 48px rgba(26,42,94,.16);
    --transition: .22s cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper ─────────────────────────────────────────────────────── */
.tvfc-roster-wrapper {
    font-family: 'DM Sans', -apple-system, sans-serif;
    color: var(--text);
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px 40px;
}

/* ── Header ──────────────────────────────────────────────────────── */
.tvfc-roster-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-mid) 60%, #2c3f7a 100%);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.tvfc-roster-header::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: rgba(200,168,75,.08);
    pointer-events: none;
}
.tvfc-roster-header::after {
    content: '';
    position: absolute;
    bottom: -20px; left: 40%;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(200,21,46,.07);
    pointer-events: none;
}

.tvfc-roster-logo-area {
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1;
}

.tvfc-crest svg {
    width: 54px; height: 54px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
}

.tvfc-title-group { z-index: 1; }

.tvfc-roster-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.65rem;
    font-weight: 900;
    color: var(--white);
    margin: 0 0 4px;
    line-height: 1.1;
    letter-spacing: -.01em;
}

.tvfc-roster-subtitle {
    font-size: .82rem;
    color: var(--gold);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0;
}

.tvfc-roster-meta {
    display: flex;
    gap: 12px;
    z-index: 1;
}

.tvfc-meta-chip {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    text-align: center;
    min-width: 72px;
}
.tvfc-meta-label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); margin-bottom: 3px; }
.tvfc-meta-value { display: block; font-size: 1.2rem; font-weight: 700; color: var(--gold); }

/* ── Legend ──────────────────────────────────────────────────────── */
.tvfc-legend {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: var(--off-white);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: .8rem;
    font-weight: 500;
}
.tvfc-legend-item { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.tvfc-legend-today    { color: var(--crimson); }
.tvfc-legend-upcoming { color: var(--navy); }
.tvfc-legend-past     { color: var(--muted); }

/* ── Desktop Table ───────────────────────────────────────────────── */
.tvfc-table-container {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    border: 1px solid var(--border);
}

.tvfc-roster-table {
    width: 100%;
    border-collapse: collapse;
}

.tvfc-roster-table thead tr {
    background: var(--navy);
}

.tvfc-roster-table thead th {
    color: rgba(200,168,75,.85);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 16px 18px;
    text-align: left;
    border: none;
}

.tvfc-roster-table thead th.col-num { width: 52px; text-align: center; }

/* Rows */
.tvfc-row {
    border-bottom: 1px solid var(--border);
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    position: relative;
}

.tvfc-row:hover {
    background: #f0f4ff !important;
    z-index: 2;
}

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

/* Even rows subtle stripe */
.tvfc-row:nth-child(even) { background: #fafbff; }

/* State: past */
.tvfc-row-past td { opacity: .55; }
.tvfc-row-past:hover td { opacity: .8; }

/* State: upcoming */
.tvfc-row-upcoming { background: #f5f8ff !important; }

/* State: today — golden highlight */
.tvfc-row-today {
    background: linear-gradient(90deg, #fff8e8 0%, #fffdf5 100%) !important;
    box-shadow: inset 4px 0 0 var(--gold);
}
.tvfc-row-today td { opacity: 1 !important; }

/* Table cells */
.tvfc-roster-table td {
    padding: 14px 18px;
    font-size: .875rem;
    vertical-align: middle;
}

/* Num cell */
.tvfc-num {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: var(--off-white);
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    margin: 0 auto;
}
.tvfc-row-today .tvfc-num { background: var(--gold); color: var(--navy); }

/* Date block */
.tvfc-date-block { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tvfc-date-text { font-weight: 500; white-space: nowrap; }

/* Badges */
.tvfc-badge {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    padding: 2px 8px;
    border-radius: 20px;
    vertical-align: middle;
}
.tvfc-badge-today { background: var(--crimson); color: #fff; }
.tvfc-badge-next  { background: var(--navy); color: var(--gold); }

/* Day pill */
.tvfc-day-pill {
    display: inline-block;
    background: #edf0f9;
    color: var(--navy);
    font-size: .75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .03em;
}
.tvfc-row-today .tvfc-day-pill { background: var(--gold-lt); color: var(--gold-dk); }

/* Player cell */
.tvfc-player-cell { display: flex; align-items: center; gap: 10px; }

.tvfc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
    color: var(--gold);
    border-radius: 50%;
    font-size: .85rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0;
}
.tvfc-row-today .tvfc-avatar { background: linear-gradient(135deg, var(--crimson-dk) 0%, var(--crimson) 100%); }

.tvfc-sub-name, .tvfc-pickup-name {
    background: #f0f4ff;
    color: var(--navy);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 500;
}
.tvfc-pickup-name { background: #edfaf1; color: #1a6e3c; }
.tvfc-empty-cell  { color: var(--border); font-size: 1.1rem; }

/* ── Mobile Cards ────────────────────────────────────────────────── */
.tvfc-cards-container { display: none; gap: 12px; flex-direction: column; }

.tvfc-card {
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}
.tvfc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.tvfc-card-today    { border-left: 4px solid var(--gold); background: linear-gradient(90deg, #fffdf5, #fff); }
.tvfc-card-upcoming { border-left: 4px solid var(--navy); }
.tvfc-card-past     { opacity: .65; border-left: 4px solid var(--border); }

.tvfc-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: var(--off-white);
    border-bottom: 1px solid var(--border);
}
.tvfc-card-today .tvfc-card-header    { background: #fff8e8; }
.tvfc-card-upcoming .tvfc-card-header { background: #f0f4ff; }

.tvfc-card-date { font-size: .82rem; font-weight: 600; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.tvfc-card-num  { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--navy); color: var(--gold); border-radius: 50%; font-size: .68rem; font-weight: 700; }

.tvfc-card-body { padding: 14px 16px; }
.tvfc-card-player { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tvfc-card-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.tvfc-card-value { font-size: .88rem; font-weight: 500; color: var(--text); }

.tvfc-card-extras { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); }
.tvfc-card-extra-item { flex: 1; min-width: 120px; }

/* ── Footer ──────────────────────────────────────────────────────── */
.tvfc-roster-footer {
    text-align: center;
    margin-top: 28px;
    font-size: .78rem;
    color: var(--muted);
    letter-spacing: .04em;
}

/* ── No entries ──────────────────────────────────────────────────── */
.tvfc-no-entries {
    text-align: center;
    padding: 60px;
    background: var(--off-white);
    border-radius: var(--radius-lg);
    color: var(--muted);
    font-size: .9rem;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tvfc-table-container { display: none; }
    .tvfc-cards-container { display: flex; }

    .tvfc-roster-header { padding: 20px 18px; flex-direction: column; align-items: flex-start; }
    .tvfc-roster-title  { font-size: 1.25rem; }
    .tvfc-roster-meta   { width: 100%; justify-content: flex-start; }

    .tvfc-legend { gap: 12px; flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .tvfc-roster-wrapper { padding: 0 8px 32px; }
    .tvfc-meta-chip      { padding: 8px 12px; }
    .tvfc-roster-header  { padding: 16px 14px; }
}

/* ── Scroll-reveal animation ─────────────────────────────────────── */
@keyframes tvfc-fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tvfc-roster-wrapper { animation: tvfc-fadeUp .45s ease both; }

.tvfc-row {
    animation: tvfc-fadeUp .35s ease both;
}
.tvfc-row:nth-child(1)  { animation-delay: .04s; }
.tvfc-row:nth-child(2)  { animation-delay: .07s; }
.tvfc-row:nth-child(3)  { animation-delay: .10s; }
.tvfc-row:nth-child(4)  { animation-delay: .13s; }
.tvfc-row:nth-child(5)  { animation-delay: .16s; }
.tvfc-row:nth-child(6)  { animation-delay: .19s; }
.tvfc-row:nth-child(7)  { animation-delay: .22s; }
.tvfc-row:nth-child(8)  { animation-delay: .25s; }
.tvfc-row:nth-child(9)  { animation-delay: .28s; }
.tvfc-row:nth-child(10) { animation-delay: .31s; }