/*
Theme Name: Tênis Progresso
Theme URI: https://exemplo.com/tenis-progresso
Author: Você e seu colega
Description: Diário privado de tênis para dois jogadores. Registra partidas com placar por set, calcula head-to-head, sequências e evolução. Base para feed de treinos e stories. Tudo privado, protegido por login.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tenis-progresso
*/

:root {
    --court: #2E7D46;
    --court-dark: #1F5A32;
    --court-light: #E8F2EC;
    --clay: #C8643C;
    --clay-light: #F5E3DC;
    --ink: #1A2520;
    --muted: #5E6B64;
    --line: #E2E8E4;
    --bg: #F7FAF8;
    --white: #FFFFFF;
    --gold: #D4A23A;
    --font-head: 'Poppins', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;
    --radius: 14px;
    --shadow: 0 2px 12px rgba(31,90,50,0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
    min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* ─── Layout ─── */
.tp-wrap { max-width: 720px; margin: 0 auto; padding: 0 1rem 6rem; }
.tp-header {
    background: var(--court);
    color: #fff;
    padding: 1.5rem 1rem 1.25rem;
    position: sticky; top: 0; z-index: 20;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.tp-header-inner { max-width: 720px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.tp-logo { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.5rem; }
.tp-logo .ball { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); position: relative; flex-shrink: 0; }
.tp-logo .ball::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.6); border-left-color: transparent; border-right-color: transparent; }
.tp-nav { display: flex; gap: 0.25rem; }
.tp-nav a { font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.7rem; border-radius: 100px; opacity: 0.85; transition: all 0.2s; }
.tp-nav a:hover, .tp-nav a.active { background: rgba(255,255,255,0.18); opacity: 1; }

/* ─── Cards de seção ─── */
.tp-section { margin-top: 1.5rem; }
.tp-section-title { font-family: var(--font-head); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); font-weight: 700; margin-bottom: 0.75rem; padding-left: 0.25rem; }

/* ─── Placar Head-to-Head ─── */
.tp-h2h {
    background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
    overflow: hidden; border: 1px solid var(--line);
}
.tp-h2h-top { display: flex; align-items: stretch; }
.tp-h2h-player { flex: 1; padding: 1.5rem 1rem; text-align: center; }
.tp-h2h-player .avatar {
    width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 0.6rem;
    background: var(--court-light); color: var(--court-dark);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-weight: 700; font-size: 1.3rem;
    border: 2px solid var(--court);
}
.tp-h2h-player.p2 .avatar { background: var(--clay-light); color: var(--clay); border-color: var(--clay); }
.tp-h2h-player .name { font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; }
.tp-h2h-player .wins { font-family: var(--font-head); font-weight: 800; font-size: 2.6rem; line-height: 1; margin-top: 0.4rem; color: var(--court); }
.tp-h2h-player.p2 .wins { color: var(--clay); }
.tp-h2h-vs { display: flex; align-items: center; justify-content: center; padding: 0 0.5rem; }
.tp-h2h-vs span { font-family: var(--font-head); font-weight: 800; font-size: 0.85rem; color: var(--muted); background: var(--bg); border-radius: 100px; padding: 0.3rem 0.6rem; }
.tp-h2h-bar { display: flex; height: 8px; }
.tp-h2h-bar .a { background: var(--court); }
.tp-h2h-bar .b { background: var(--clay); }
.tp-h2h-meta { display: flex; justify-content: space-around; padding: 1rem; border-top: 1px solid var(--line); font-size: 0.8rem; }
.tp-h2h-meta .item { text-align: center; }
.tp-h2h-meta .item .v { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.tp-h2h-meta .item .l { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.tp-streak { color: var(--court-dark); font-weight: 700; }
.tp-streak.clay { color: var(--clay); }

/* ─── Lista de partidas ─── */
.tp-matches { display: flex; flex-direction: column; gap: 0.6rem; }
.tp-match {
    background: var(--white); border-radius: var(--radius); border: 1px solid var(--line);
    padding: 0.9rem 1rem; display: flex; align-items: center; gap: 0.9rem;
    box-shadow: var(--shadow); transition: transform 0.15s;
}
.tp-match:active { transform: scale(0.99); }
.tp-match-date { flex-shrink: 0; text-align: center; min-width: 44px; }
.tp-match-date .d { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; line-height: 1; color: var(--court); }
.tp-match-date .m { font-size: 0.65rem; text-transform: uppercase; color: var(--muted); letter-spacing: 0.05em; }
.tp-match-body { flex: 1; min-width: 0; }
.tp-match-players { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; }
.tp-match-players .winner { color: var(--court); }
.tp-match-players .winner.clay { color: var(--clay); }
.tp-match-players .x { color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.tp-match-sets { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.tp-set-pill {
    font-family: var(--font-head); font-weight: 700; font-size: 0.75rem;
    background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
    padding: 0.1rem 0.45rem; color: var(--muted);
}
.tp-match-court { font-size: 0.7rem; color: var(--muted); margin-top: 0.3rem; }
.tp-match-trophy { flex-shrink: 0; font-size: 1.3rem; }

.tp-empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.tp-empty .icon { font-size: 2.5rem; margin-bottom: 0.5rem; opacity: 0.4; }

/* ─── Botão flutuante ─── */
.tp-fab {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 30;
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--court); color: #fff; border: none;
    font-size: 1.8rem; line-height: 1; cursor: pointer;
    box-shadow: 0 6px 20px rgba(31,90,50,0.4);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s, background 0.2s;
}
.tp-fab:hover { background: var(--court-dark); transform: scale(1.05); }
.tp-fab:active { transform: scale(0.95); }

/* ─── Formulário (modal) ─── */
.tp-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 50;
    background: rgba(26,37,32,0.55); backdrop-filter: blur(4px);
    align-items: flex-end; justify-content: center; padding: 0;
}
.tp-modal-overlay.open { display: flex; }
.tp-modal {
    background: var(--white); width: 100%; max-width: 720px;
    border-radius: 20px 20px 0 0; padding: 1.5rem 1.25rem 2rem;
    max-height: 92vh; overflow-y: auto;
    animation: tpSlideUp 0.3s ease;
}
@keyframes tpSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.tp-modal h2 { font-family: var(--font-head); font-size: 1.2rem; margin-bottom: 1.25rem; color: var(--court-dark); }
.tp-field { margin-bottom: 1.1rem; }
.tp-field label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--muted); margin-bottom: 0.35rem; }
.tp-field input, .tp-field select, .tp-field textarea {
    width: 100%; padding: 0.7rem 0.85rem; border: 1.5px solid var(--line);
    border-radius: 10px; font-size: 0.95rem; background: var(--bg); color: var(--ink);
    outline: none; transition: border-color 0.2s;
}
.tp-field input:focus, .tp-field select:focus, .tp-field textarea:focus { border-color: var(--court); background: #fff; }
.tp-field textarea { resize: vertical; min-height: 60px; }
.tp-sets-grid { display: flex; flex-direction: column; gap: 0.6rem; }
.tp-set-row { display: flex; align-items: center; gap: 0.6rem; }
.tp-set-row .set-label { font-size: 0.75rem; font-weight: 700; color: var(--muted); min-width: 42px; }
.tp-set-row input { text-align: center; max-width: 70px; padding: 0.55rem; }
.tp-set-row .dash { color: var(--muted); font-weight: 700; }
.tp-set-row .rm { background: none; border: none; color: var(--clay); cursor: pointer; font-size: 1.1rem; padding: 0.3rem; }
.tp-add-set { background: var(--court-light); color: var(--court-dark); border: none; border-radius: 8px; padding: 0.5rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; margin-top: 0.5rem; width: 100%; }
.tp-modal-actions { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.tp-btn { flex: 1; padding: 0.85rem; border-radius: 12px; border: none; font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: all 0.2s; }
.tp-btn-primary { background: var(--court); color: #fff; }
.tp-btn-primary:hover { background: var(--court-dark); }
.tp-btn-ghost { background: var(--bg); color: var(--muted); }
.tp-msg { padding: 0.7rem; border-radius: 10px; font-size: 0.85rem; margin-bottom: 1rem; display: none; }
.tp-msg.error { background: var(--clay-light); color: var(--clay); display: block; }
.tp-msg.success { background: var(--court-light); color: var(--court-dark); display: block; }

/* ─── Login prompt ─── */
.tp-locked { text-align: center; padding: 4rem 1.5rem; }
.tp-locked .icon { font-size: 3rem; margin-bottom: 1rem; }
.tp-locked h2 { font-family: var(--font-head); color: var(--court-dark); margin-bottom: 0.5rem; }
.tp-locked p { color: var(--muted); margin-bottom: 1.5rem; }
.tp-locked a { display: inline-block; background: var(--court); color: #fff; padding: 0.8rem 2rem; border-radius: 12px; font-weight: 700; }

@media (min-width: 600px) {
    .tp-modal-overlay { align-items: center; }
    .tp-modal { border-radius: 20px; }
}