/* ======================================================
   STAKEFY — GESTÃO DE BANCA (página fixa)
   Complementa gestao-financeira.css: aqui a gestão deixa de ser uma janela
   sobreposta e vira uma página, com cartões de resumo, gráfico, abas fixas.
   Tudo usa as variáveis do tema (claro/escuro).
====================================================== */

.gf-pagina-raiz { min-width: 0; }

/* ---------- a "janela" vira página ---------- */
.gf-overlay.gf-pagina {
    position: static;
    inset: auto;
    display: block;
    background: transparent;
    padding: 0;
    z-index: auto;
}
.gf-overlay.gf-pagina .gf-modal.gf-pg {
    max-width: none;
    max-height: none;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}
.gf-pagina .gf-close { display: none; }

/* botões do topo sem sublinhado (o resto da página já faz isso) */
.gf-main .header-actions a { text-decoration: none; }
/* botão "Relatórios": o link não era flex, então o texto ficava colado no topo e fora do eixo do ícone e do "Nova aposta" (Ajuste 168) */
.gf-main .header-actions a.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; box-sizing: border-box;
    height: 46px; padding: 0 20px; border-radius: 999px; white-space: nowrap;
    font: inherit; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .1px;
}
.gf-main .header-actions a.btn-secondary i { font-size: 14px; line-height: 1; }
.gf-main .header-actions a.btn-secondary:hover { color: var(--text); border-color: var(--accent); }
.gf-main .header-actions a.btn-secondary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- barra de controle (mês + ações) ---------- */
.gf-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    margin-bottom: 18px;
    padding: 10px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.gf-toolbar-esq { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.gf-pagina .gf-month-nav { margin: 0; gap: 6px; }
.gf-pagina .gf-month-nav button {
    width: 36px; height: 36px; border-radius: 10px;
    transition: background .15s, color .15s, transform .15s, border-color .15s;
    cursor: pointer;
}
.gf-pagina .gf-month-nav button:hover { background: var(--accent); color: #171717; border-color: var(--accent); transform: translateY(-1px); }
.gf-pagina .gf-month-nav button:active { transform: none; }
.gf-pagina .gf-month-label {
    flex: none; min-width: 168px; height: 36px; padding: 0 14px;
    font-size: 13.5px; letter-spacing: .01em; color: var(--text);
}
.gf-pagina .gf-periodo-toggle { margin: 0; }
.gf-mes-atual {
    height: 36px; padding: 0 12px; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(245, 169, 0, .45); background: rgba(245, 169, 0, .1);
    color: var(--accent-fg); font-size: 12px; font-weight: 800;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s;
}
.gf-mes-atual:hover { background: rgba(245, 169, 0, .2); }
.gf-mes-atual[hidden] { display: none; }

.gf-pagina .gf-header-actions { align-items: center; }
.gf-reset-btn {
    height: 36px; padding: 0 12px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--border); background: var(--card2); color: var(--secondary);
    font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px;
    transition: color .15s, border-color .15s, background .15s;
}
.gf-reset-btn:hover { color: var(--red-fg); border-color: rgba(255, 91, 114, .45); background: rgba(255, 91, 114, .08); }
.gf-pagina .gf-icon-btn { width: 36px; height: 36px; cursor: pointer; transition: color .15s, border-color .15s; }
.gf-pagina .gf-icon-btn:hover { color: var(--accent-fg); border-color: rgba(245, 169, 0, .5); }

/* ---------- grade: resumo à esquerda, abas à direita ---------- */
.gf-pagina .gf-body {
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
.gf-pagina .gf-coluna-esquerda { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gf-pagina .gf-coluna-direita { min-width: 0; }

@media (max-width: 1100px) {
    .gf-pagina .gf-body { grid-template-columns: minmax(0, 1fr); }
    .gf-pagina .gf-coluna-esquerda { position: static; }
}

/* ---------- cartão principal: banca atual ---------- */
.gf-hero-card {
    position: relative; overflow: hidden;
    padding: 20px 20px 18px;
    border-radius: 16px;
    border: 1px solid rgba(245, 169, 0, .35);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(245, 169, 0, .22) 0%, rgba(245, 169, 0, 0) 55%),
        linear-gradient(160deg, var(--card2), var(--card));
    box-shadow: 0 10px 30px -18px rgba(245, 169, 0, .55);
}
.gf-hero-card::after {
    content: ""; position: absolute; right: -30px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%;
    border: 18px solid rgba(245, 169, 0, .07); pointer-events: none;
}
.gf-hero-card .gf-label { display: block; font-size: 11px; letter-spacing: .09em; font-weight: 800; color: var(--accent-fg); }
.gf-hero-card strong { display: block; margin: 6px 0 2px; font-size: clamp(28px, 4vw, 36px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gf-hero-card small { color: var(--muted); font-size: 11.5px; }
.gf-delta {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
    border: 1px solid var(--border); background: var(--card2); color: var(--secondary);
}
.gf-delta[hidden] { display: none; }
.gf-delta.sobe { color: var(--green-fg); background: rgba(38, 217, 154, .12); border-color: rgba(38, 217, 154, .35); }
.gf-delta.desce { color: var(--red-fg); background: rgba(255, 91, 114, .1); border-color: rgba(255, 91, 114, .35); }

/* ---------- cartões de números ---------- */
.gf-pagina .gf-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.gf-pagina .gf-stat-card {
    padding: 13px 14px; border-radius: 12px; min-width: 0;
    background: var(--card); transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
}
.gf-pagina .gf-stat-card:first-child { grid-column: 1 / -1; }
.gf-pagina .gf-stat-card strong { font-size: 17px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gf-stat-card.clicavel { cursor: pointer; }
.gf-stat-card.clicavel:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .6); border-color: var(--secondary); }
.gf-stat-card.clicavel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gf-stat-card.clicavel::after {
    content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 9px;
    position: absolute; right: 12px; top: 13px; color: var(--muted); opacity: 0; transform: translateX(-4px);
    transition: opacity .15s, transform .15s;
}
.gf-stat-card.clicavel:hover::after, .gf-stat-card.clicavel:focus-visible::after { opacity: 1; transform: none; }
.gf-edit-inicial { cursor: pointer; width: 26px; height: 26px; border-radius: 7px; transition: background .15s, color .15s; }
.gf-edit-inicial:hover { background: var(--card2); color: var(--accent-fg); }

/* ---------- lucro do período ---------- */
.gf-pagina .gf-lucro-card {
    display: block; margin: 0; border-radius: 14px; padding: 16px 16px 14px;
    border-color: var(--border); background: var(--card);
}
.gf-pagina .gf-lucro-card.positivo { border-color: rgba(38, 217, 154, .4); background: linear-gradient(160deg, rgba(38, 217, 154, .13), rgba(38, 217, 154, .04)); }
.gf-pagina .gf-lucro-card.negativo { border-color: rgba(255, 91, 114, .4); background: linear-gradient(160deg, rgba(255, 91, 114, .12), rgba(255, 91, 114, .03)); }
.gf-lucro-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gf-pagina .gf-lucro-card strong { display: block; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gf-pagina .gf-lucro-card strong.green { color: var(--green-fg); }
.gf-pagina .gf-lucro-card strong.red { color: var(--red-fg); }
.gf-pagina .gf-lucro-card small { color: var(--muted); margin-top: 4px; }
.gf-pagina .gf-lucro-card .gf-roi span {
    display: inline-block; padding: 4px 10px; border-radius: 999px; font-weight: 800; font-size: 11.5px;
    background: var(--card2); border: 1px solid var(--border); white-space: nowrap;
}
.gf-roi.positivo span { color: var(--green-fg); border-color: rgba(38, 217, 154, .4); background: rgba(38, 217, 154, .12); }
.gf-roi.negativo span { color: var(--red-fg); border-color: rgba(255, 91, 114, .4); background: rgba(255, 91, 114, .1); }

.gf-meta-prog { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.gf-meta-prog[hidden] { display: none; }
.gf-meta-prog-topo { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--secondary); margin-bottom: 7px; }
.gf-pagina .gf-lucro-card .gf-meta-prog-topo strong { display: inline; font-size: 11.5px; font-weight: 800; color: var(--text); }
.gf-meta-prog-barra { height: 9px; border-radius: 999px; background: var(--card2); border: 1px solid var(--border); overflow: hidden; }
.gf-meta-prog-barra span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #ffd45c); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.gf-meta-prog.batida .gf-meta-prog-barra span { background: linear-gradient(90deg, var(--green), #7af0c4); }
.gf-meta-prog.batida .gf-meta-prog-topo span::after { content: " 🎯"; }

/* ---------- gráfico de composição ---------- */
.gf-pagina .gf-donut-row {
    margin: 0; padding: 14px; gap: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--card);
}
.gf-donut-wrap { position: relative; width: 148px; height: 148px; flex: none; }
.gf-pagina .gf-donut { width: 100%; height: 100%; border-radius: 0; }
.gf-donut svg { width: 100%; height: 100%; transform: rotate(0deg); display: block; overflow: visible; }
.gf-donut .gf-seg { transition: stroke-dasharray .85s cubic-bezier(.2, .8, .2, 1), opacity .18s, stroke-width .18s; cursor: pointer; }
.gf-donut-row.tem-foco .gf-seg:not(.foco) { opacity: .28; }
.gf-donut-row.tem-foco .gf-seg.foco { stroke-width: 5.8; }
.gf-donut-centro {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 0 26px; pointer-events: none;
}
.gf-donut-centro small { font-size: 9px; letter-spacing: .07em; font-weight: 800; color: var(--muted); line-height: 1.25; text-wrap: balance; }
.gf-donut-centro strong { font-size: 17px; font-weight: 800; letter-spacing: -.2px; font-variant-numeric: tabular-nums; margin-top: 3px; line-height: 1.15; }
.gf-donut-centro strong[data-tam="m"] { font-size: 14.5px; }
.gf-donut-centro strong[data-tam="p"] { font-size: 12.5px; }
.gf-pagina .gf-donut-legend { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gf-pagina .gf-donut-legend > div {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px; border-radius: 10px; cursor: default;
    transition: background .15s, transform .15s, opacity .15s;
}
.gf-pagina .gf-donut-legend > div:hover, .gf-pagina .gf-donut-legend > div.foco, .gf-pagina .gf-donut-legend > div:focus-visible {
    background: var(--card2); transform: translateX(2px); outline: none;
}
.gf-pagina .gf-donut-legend > div:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.gf-pagina .gf-donut-legend > div.vazio { opacity: .5; }
.gf-pagina .gf-donut-legend > div.vazio:hover, .gf-pagina .gf-donut-legend > div.vazio:focus-visible { opacity: 1; }
.gf-donut-legend span { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.gf-leg-nome { display: flex; flex-direction: column; min-width: 0; font-style: normal; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--text); }
.gf-leg-nome small { font-size: 11px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.gf-pagina .gf-donut-legend strong { flex: none; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.gf-pt { display: inline-block; width: 11px; height: 11px; border-radius: 4px; flex: none; }
@media (prefers-reduced-motion: reduce) { .gf-donut .gf-seg { transition: opacity .18s, stroke-width .18s; } }
@media (max-width: 460px) {
    .gf-pagina .gf-donut-row { flex-direction: column; align-items: stretch; }
    .gf-donut-wrap { margin: 0 auto; }
}

.gf-pagina .gf-tipos { margin: 0; border-radius: 14px; background: var(--card); }
.gf-pagina .gf-tipos[hidden] { display: none; }

.gf-pagina .gf-total-card {
    border-radius: 14px; padding: 14px 16px; border-color: rgba(245, 169, 0, .55); background: var(--card);
}
.gf-pagina .gf-total-card strong { font-size: 19px; font-variant-numeric: tabular-nums; }

/* ---------- abas fixas no topo ao rolar ---------- */
.gf-pagina .gf-tabs {
    position: sticky; top: 0; z-index: 6;
    gap: 6px; padding: 8px; margin: 0 0 16px;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--border); border-radius: 14px;
}
.gf-pagina .gf-tab {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 9px 14px; border-radius: 10px; border-bottom: 0;
    transition: background .15s, color .15s;
}
.gf-pagina .gf-tab:hover { background: var(--card2); color: var(--text); }
.gf-pagina .gf-tab.active { background: var(--accent); color: #171717; }
.gf-pagina .gf-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gf-pagina .gf-tab i { font-size: 12px; }
@media (max-width: 700px) {
    .gf-pagina .gf-tabs { top: 62px; }
    .gf-pagina .gf-tab { padding: 9px 11px; }
}

/* ---------- painéis ---------- */
.gf-pagina .gf-panel.active { animation: gfEntrar .28s ease both; }
@keyframes gfEntrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.gf-pagina .gf-sec-titulo { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 12px; }
.gf-pagina .gf-dinheiro-item {
    background: var(--card); border-radius: 14px; padding: 16px;
    transition: border-color .15s, box-shadow .15s;
}
.gf-pagina .gf-dinheiro-item:hover { border-color: var(--secondary); }
.gf-pagina .gf-dinheiro-item-head { font-size: 14px; }
.gf-pagina .gf-acoes-rapidas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.gf-pagina .gf-btn-sec { cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.gf-pagina .gf-btn-sec:hover { transform: translateY(-1px); border-color: var(--accent); }

.gf-pagina .gf-gastos-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gf-pagina .gf-gastos-cards > div { background: var(--card); border-radius: 12px; }
@media (max-width: 520px) { .gf-pagina .gf-gastos-cards { grid-template-columns: 1fr; } }

.gf-pagina .gf-meta-bloco { background: var(--card); border-radius: 14px; }
.gf-pagina .gf-switch { cursor: pointer; }
.gf-pagina .gf-btn-salvar-metas { cursor: pointer; }

/* destaque quando um cartão leva até um assunto */
.gf-pisca { animation: gfPisca 1.4s ease; }
@keyframes gfPisca {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 169, 0, 0); }
    25% { box-shadow: 0 0 0 4px rgba(245, 169, 0, .45); border-color: var(--accent); }
}

/* ---------- carregando: números piscam suave ---------- */
.gf-carregando .gf-hero-card strong,
.gf-carregando .gf-stat-card strong,
.gf-carregando .gf-lucro-card strong,
.gf-carregando .gf-total-card strong {
    color: transparent !important; border-radius: 6px;
    background: linear-gradient(90deg, var(--card2) 25%, var(--border) 50%, var(--card2) 75%);
    background-size: 200% 100%; animation: gfShimmer 1.2s linear infinite;
    width: fit-content; min-width: 96px;
}
@keyframes gfShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    .gf-pagina *, .gf-pagina *::before, .gf-pagina *::after { animation: none !important; transition: none !important; }
}

/* ---------- celular ---------- */
@media (max-width: 700px) {
    .gf-toolbar { padding: 8px; }
    .gf-pagina .gf-month-label { min-width: 0; flex: 1; }
    .gf-pagina .gf-month-nav { flex: 1 1 100%; }
    .gf-pagina .gf-toolbar-esq { width: 100%; }
    .gf-pagina .gf-header-actions { width: 100%; justify-content: flex-end; }
    .gf-pagina .gf-periodo-toggle { display: none; }
}