/* ==========================================================================
   5º Open de Tênis — skin premium do painel
   Paleta: azul-marinho + dourado + creme (tema saibro/tênis)
   Stack: Bootstrap 5.3.3 + Phosphor + SweetAlert2 + Inter
   ========================================================================== */

:root {
    --navy:        #14284a;
    --navy-700:    #1d3868;
    --navy-900:    #0d1c36;
    --gold:        #c9a227;
    --gold-soft:   #e6c659;
    --cream:       #f6f1e7;

    --bg:          #f1ece1;          /* fundo do conteúdo, levemente saibro */
    --surface:     #ffffff;
    --surface-2:   #faf7f0;
    --text:        #1f2a44;
    --muted:       #74798a;
    --border:      #e7e0d2;

    --primary:        var(--navy);
    --primary-soft:   rgba(20, 40, 74, .08);

    --radius:      16px;
    --radius-sm:   12px;
    --shadow:      0 1px 2px rgba(16,24,40,.06), 0 12px 24px -10px rgba(16,24,40,.14);
    --shadow-sm:   0 1px 2px rgba(16,24,40,.05), 0 6px 14px -8px rgba(16,24,40,.12);
    --sidebar-w:   264px;
}

* { scrollbar-width: thin; scrollbar-color: var(--navy-700) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(20,40,74,.35); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(20,40,74,.55); }

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { letter-spacing: -.01em; }

/* ---- Sidebar ---------------------------------------------------------- */
.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    z-index: 1045;
    background:
        linear-gradient(180deg, rgba(29,56,104,.30), rgba(13,28,54,.30)),
        var(--navy);
    color: #cdd7e8;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(201,162,39,.18);
    box-shadow: 4px 0 24px -12px rgba(13,28,54,.6);
    transition: transform .28s ease;
}
.app-sidebar .brand {
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: radial-gradient(140px 100px at 50% 32%, rgba(201,162,39,.16), transparent 70%);
}
.app-sidebar .brand img {
    width: 150px; height: 150px; max-width: 80%; flex: none;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.app-nav { padding: .85rem .7rem; overflow-y: auto; flex: 1; }
.app-nav .grp {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
    color: rgba(205,215,232,.5); padding: .9rem .85rem .35rem;
}
.app-nav .nav-link {
    display: flex; align-items: center; gap: .7rem;
    color: #cdd7e8; border-radius: 11px;
    padding: .62rem .85rem; font-weight: 500; font-size: .92rem;
    transition: .18s ease; position: relative;
}
.app-nav .nav-link i { font-size: 1.18rem; opacity: .85; }
.app-nav .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(2px); }
.app-nav .nav-link.active {
    background: linear-gradient(90deg, rgba(201,162,39,.22), rgba(201,162,39,.05));
    color: #fff;
}
.app-nav .nav-link.active::before {
    content: ""; position: absolute; left: -.7rem; top: 50%; transform: translateY(-50%);
    width: 4px; height: 60%; border-radius: 0 4px 4px 0; background: var(--gold);
}
.app-nav .nav-link.active i { color: var(--gold-soft); opacity: 1; }

.sidebar-foot {
    padding: .85rem 1rem; border-top: 1px solid rgba(255,255,255,.07);
    display: flex; align-items: center; gap: .65rem; font-size: .85rem;
}
.sidebar-foot .avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    background: var(--gold); color: var(--navy-900);
    display: grid; place-items: center; font-weight: 700;
}
.sidebar-credit {
    padding: .6rem 1rem .8rem; text-align: center; line-height: 1.4;
    font-size: .66rem; color: rgba(205,215,232,.55);
    border-top: 1px solid rgba(255,255,255,.06);
}
.sidebar-credit strong { color: #cdd7e8; font-weight: 600; }
.sidebar-credit span, .sidebar-credit a { display: block; font-family: 'Poppins', sans-serif; font-weight: 700;
    color: var(--gold-soft); letter-spacing: .06em; margin-top: 2px; text-decoration: none; }
.sidebar-credit a:hover { color: #fff; }

/* ---- Topbar ----------------------------------------------------------- */
.app-main { margin-left: var(--sidebar-w); min-height: 100vh; transition: margin .28s ease; }
.app-topbar {
    position: sticky; top: 0; z-index: 1030;
    display: flex; align-items: center; gap: 1rem;
    padding: .7rem 1.4rem;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.app-topbar .btn-burger { display: none; }
.app-topbar .page-title { font-weight: 700; color: var(--navy); font-size: 1.05rem; }
.app-topbar .topbar-search {
    margin-left: auto; max-width: 320px; width: 100%;
}
.app-topbar .topbar-search .form-control { border-radius: 999px; background: var(--surface-2); border-color: var(--border); }
.app-topbar .icon-btn {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--surface); color: var(--navy); display: grid; place-items: center;
    position: relative; font-size: 1.15rem;
}
.app-topbar .icon-btn .badge {
    position: absolute; top: -3px; right: -3px; font-size: .6rem;
    background: var(--gold); color: var(--navy-900);
}

/* ---- Conteúdo --------------------------------------------------------- */
.app-content { padding: 1.6rem 1.4rem; }

.card { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card.kpi { transition: .2s ease; }
.card.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.kpi .kpi-icon {
    width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 1.6rem;
}
.kpi .kpi-value { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--navy); }
.kpi .kpi-label { color: var(--muted); font-size: .85rem; }

/* Botões */
.btn-primary { --bs-btn-bg: var(--navy); --bs-btn-border-color: var(--navy);
    --bs-btn-hover-bg: var(--navy-700); --bs-btn-hover-border-color: var(--navy-700);
    --bs-btn-active-bg: var(--navy-900); }
.btn-gold { --bs-btn-color:#1f2a44; background: var(--gold); border-color: var(--gold); color: var(--navy-900); font-weight: 600; }
.btn-gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.btn-outline-primary { --bs-btn-color: var(--navy); --bs-btn-border-color: #c7cfdd;
    --bs-btn-hover-bg: var(--navy); --bs-btn-hover-border-color: var(--navy); }

/* DataGrid */
.table { --bs-table-hover-bg: var(--surface-2); margin-bottom: 0; }
.table > thead th {
    background: var(--surface-2); color: var(--muted);
    text-transform: uppercase; font-size: .72rem; letter-spacing: .06em;
    font-weight: 600; border-bottom: 1px solid var(--border);
}
.table > tbody td { vertical-align: middle; border-color: #f0ebe0; }
.badge { font-weight: 600; border-radius: 999px; padding: .4em .7em; }
.text-gold { color: var(--gold) !important; }

/* ---- Responsivo ------------------------------------------------------- */
.sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(13,28,54,.5);
    backdrop-filter: blur(2px); z-index: 1044; opacity: 0; visibility: hidden; transition: .25s;
}
body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    body.sidebar-open .app-sidebar { transform: translateX(0); }
    .app-main { margin-left: 0; }
    .app-topbar .btn-burger { display: grid; }
    .app-topbar .topbar-search { display: none; }
}

/* ---- Estrelas de classificação --------------------------------------- */
.star-rating { display: inline-flex; gap: .15rem; font-size: 1.7rem; cursor: pointer; user-select: none; }
.star-rating .star { color: #d4cdbb; transition: color .12s ease, transform .12s ease; line-height: 1; }
.star-rating .star.on { color: var(--gold); }
.star-rating .star:hover { transform: scale(1.15); }
.star-rating[aria-readonly="true"] { cursor: default; }
.star-rating-sm { font-size: 1rem; gap: .05rem; }
.star-rating-sm .star { color: #d4cdbb; }
.star-rating-sm .star.on { color: var(--gold); }

/* ---- Foto do atleta --------------------------------------------------- */
.atleta-foto {
    width: 150px; height: 150px; border-radius: 16px; object-fit: cover;
    border: 3px solid #fff; box-shadow: var(--shadow-sm); background: var(--surface-2);
}
.atleta-foto-ph {
    width: 150px; height: 150px; border-radius: 16px; display: grid; place-items: center;
    background: var(--surface-2); color: #b9b1a0; font-size: 3rem; border: 2px dashed var(--border);
}
.atleta-thumb {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-2);
}
.atleta-thumb-ph {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface-2); color: #b9b1a0;
}
#camStream { width: 100%; border-radius: 12px; background: #000; transform: scaleX(-1); }
.flag-badge { font-size: .72rem; font-weight: 700; padding: .12rem .4rem; border-radius: 6px;
    background: var(--primary-soft); color: var(--navy); }

/* ---- Bracket / chaveamento -------------------------------------------- */
.bracket { display: flex; gap: 34px; overflow-x: auto; padding: 6px 4px 18px; align-items: stretch; }
.bracket-round { display: flex; flex-direction: column; min-width: 236px; }
.bracket-round .round-title {
    text-align: center; font-weight: 700; color: var(--navy); text-transform: uppercase;
    font-size: .72rem; letter-spacing: .08em; margin-bottom: .5rem;
}
.bracket-round .round-matches {
    display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 12px;
}
.match {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow-sm); overflow: hidden;
}
.match .player, .match .player.as-button {
    display: flex; align-items: center; gap: .45rem; width: 100%;
    padding: .4rem .55rem; font-size: .85rem; background: transparent; border: 0; text-align: left;
    color: var(--text);
}
.match .player + .player, .match form + form .player, .match form + .player, .match .player + form .player {
    border-top: 1px solid var(--border);
}
.match form { border-top: 1px solid var(--border); }
.match form:first-child { border-top: 0; }
.match .player.as-button { cursor: pointer; transition: background .15s ease; }
.match .player.as-button:hover { background: rgba(28,117,209,.10); }
.match .player.winner { background: rgba(201,162,39,.16); font-weight: 600; }
.match .player.empty { color: #b0b0b0; font-style: italic; font-size: .8rem; }
.match .pl-foto { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2); }
.match .pl-foto.ph-fallback { display: grid; place-items: center; color: #b9b1a0; }
.match .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match .seedbadge {
    flex: none; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px;
    background: var(--navy); color: #fff; font-size: .68rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.match .score { display: inline-flex; gap: 3px; margin-left: auto; padding-left: 6px; }
.match .score .setnum {
    min-width: 17px; text-align: center; font-weight: 700; font-size: .8rem; color: var(--navy);
}
.match .score .setnum sup { font-size: .6rem; color: var(--muted); font-weight: 600; }
.match .player.winner .score .setnum { color: var(--gold); }
.match-link { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .12s ease; }
.match-link:hover { box-shadow: 0 0 0 2px var(--gold); transform: translateY(-1px); }
.match .nm { min-width: 0; }
.match .match-info {
    border-top: 1px solid var(--border); padding: .2rem .55rem; font-size: .68rem;
    color: var(--muted); background: var(--surface-2);
}