@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&display=swap');

/* ==========================================================================
   PWA TPC — Eagles Golf
   File: /assets/css/pwa-tpc.css
   ========================================================================== */

/* ── CTA "Guarda la Classifica dettagliata" ── */
.tpc-pwa-detail-cta {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid rgba(193,2,6,0.35);
    background: rgba(193,2,6,0.12);
    color: #fff;
    border-radius: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.tpc-pwa-detail-cta:active {
    background: rgba(193,2,6,0.25);
    transform: scale(0.99);
}

/* ── Overlay classifica dettagliata (landscape) ── */
body.tpc-detail-lock { overflow: hidden; }

.tpc-detail-overlay {
    position: fixed; inset: 0;
    background: #010A10;
    z-index: 9999;
    display: none;
    overflow: hidden;
}
.tpc-detail-overlay.is-open { display: block; }

.tpc-detail-close {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 28px; line-height: 1; font-weight: 300;
    cursor: pointer;
    z-index: 10001;
    -webkit-tap-highlight-color: transparent;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
}
.tpc-detail-close:active { background: rgba(193,2,6,0.4); }

/* Hint rotazione — visibile solo in portrait */
.tpc-detail-rotate-hint {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 20px;
    color: rgba(255,255,255,0.7);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 16px; font-weight: 600;
    z-index: 10000;
    padding: 40px 20px;
}
.tpc-detail-rotate-hint svg {
    animation: tpc-rotate-icon 2.4s ease-in-out infinite;
    color: rgba(255,255,255,0.4);
}
.tpc-detail-rotate-hint p { margin: 0; line-height: 1.4; }

@keyframes tpc-rotate-icon {
    0%, 40% { transform: rotate(0deg); }
    60%, 100% { transform: rotate(-90deg); }
}

/* Area scrollabile con la tabella — visibile solo in landscape */
.tpc-detail-scroll {
    position: absolute; inset: 0;
    display: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

@media (orientation: landscape) {
    .tpc-detail-rotate-hint { display: none; }
    .tpc-detail-scroll { display: block; }
}

/* Override: .tpc-sheet è nascosta a <=980px dal CSS pubblico condiviso.
   Dentro l'overlay la forziamo visibile. */
.tpc-detail-overlay .tpc-sheet { display: block !important; }
.tpc-detail-overlay .tpc-mobile-list { display: none !important; }

/* ──────────────────────────────────────────────────────────────────────────
   Overlay TPC — fix typography per viewport stretti in landscape mobile
   (~700-900px). Cambiamo solo font metrics: colori e struttura invariati.
   ────────────────────────────────────────────────────────────────────── */

/* Più spazio alla tabella: player col più stretta, risultati più larghi */
.tpc-detail-overlay .tpc-sheet {
    --tpc-player-col-width: 18%;
    --tpc-result-col-width: calc(82% / 12);
}

/* Header venue (prima riga): condensed + no-wrap + padding orizzontale stretto */
.tpc-detail-overlay .tpc-table thead tr:first-child th.tpc-stage-head-barialto,
.tpc-detail-overlay .tpc-table thead tr:first-child th.tpc-stage-head-external,
.tpc-detail-overlay .tpc-table thead tr:first-child th.tpc-stage-head-team {
    font-family: "Barlow Condensed", "Saira Condensed", "Oswald", "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    padding-left: 3px;
    padding-right: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Header data (seconda riga): un filo più piccola per non affollare */
.tpc-detail-overlay .tpc-table thead tr:nth-child(2) th {
    font-family: "Barlow Condensed", "Saira Condensed", "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding-left: 3px;
    padding-right: 3px;
}

/* Colonna TOT header */
.tpc-detail-overlay .tpc-table thead .tpc-total-col {
    font-family: "Barlow Condensed", "Saira Condensed", "Inter", sans-serif;
    font-size: 13px;
    letter-spacing: 0.06em;
}

/* Player cell: una sola riga, font leggermente più piccolo, grid compatta */
.tpc-detail-overlay .tpc-table tbody .tpc-player-col {
    padding: 0 8px 0 6px;
}
.tpc-detail-overlay .tpc-player-cell {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
}
.tpc-detail-overlay .tpc-player-name {
    font-family: "Barlow Condensed", "Saira Condensed", "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

/* Rank badge leggermente più compatto */
.tpc-detail-overlay .tpc-rank {
    width: 26px; height: 26px;
    font-size: 12px;
    font-weight: 800;
}

/* Player hero (header della colonna giocatori): riduci padding e logo */
.tpc-detail-overlay .tpc-player-hero-inner { padding: 6px 10px; }
.tpc-detail-overlay .tpc-player-hero-logo { max-height: 44px; }

/* Totale valore in body: resta grosso ma su una riga */
.tpc-detail-overlay .tpc-total-value {
    white-space: nowrap;
    font-size: 16px;
}