/* Dashboard financeiro admin (Pages/FinanceiroDashboard.razor) — 3 abas.
   Cores específicas do design (oliva #5c5e00, lavanda #ddb1f7, escuro #2b2318) hardcoded;
   o resto usa as CSS vars do app.css. */

.fd-wrap { max-width: 1140px; }

.fd-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.fd-controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; align-self: flex-start; }
.fd-base { display: inline-flex; background: #fff; border: 1.5px solid var(--color-border); border-radius: 12px; padding: 3px; box-shadow: var(--shadow-card); }
.fd-base-btn { border: none; background: none; border-radius: 9px; padding: 7px 14px; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; }
.fd-base-btn:hover { color: var(--color-text-secondary); }
.fd-base-btn.on { background: #fff3ec; color: var(--color-orange); }
.fd-mes { display: flex; align-items: center; gap: 4px; align-self: flex-start; background: #fff; border: 1.5px solid var(--color-border); border-radius: 12px; padding: 4px; box-shadow: var(--shadow-card); }
.fd-mes-lbl { font-size: 13px; font-weight: 600; color: var(--color-text); padding: 0 6px; min-width: 132px; text-align: center; }
.fd-mes-btn { width: 30px; height: 30px; border: none; background: var(--color-cream); border-radius: 8px; color: var(--color-text); font-size: 16px; cursor: pointer; line-height: 1; }
.fd-mes-btn:hover:not(:disabled) { background: #fff3ec; color: var(--color-orange); }
.fd-mes-btn:disabled { opacity: .35; cursor: default; }

.fd-tabs { margin-bottom: 22px; }

/* utilitárias de cor */
.fd-wrap .oliva { color: #5c5e00; }
.fd-wrap .vermelho { color: var(--color-danger); }

/* ── KPIs ── */
.fd-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.fd-kpi { background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.fd-kpi-escuro { background: #2b2318; }
.fd-kpi-liquido { border: 1.5px solid rgba(180,181,54,0.35); }
.fd-kpi-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: 6px; }
.fd-kpi-lbl.lavanda { color: #ddb1f7; }
.fd-kpi-val { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: #f6f2e3; line-height: 1.05; }
.fd-kpi-escuro .fd-kpi-val { color: #f6f2e3; }
.fd-kpi:not(.fd-kpi-escuro) .fd-kpi-val { color: var(--color-text); }
.fd-kpi-val.vermelho { color: var(--color-danger); }
.fd-kpi-val.oliva { color: #5c5e00; }
.fd-spark { position: absolute; top: 12px; right: 14px; font-size: 12px; color: #b4b536; animation: fd-sparkle 3.4s ease-in-out infinite; }
@keyframes fd-sparkle { 0%,100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .fd-spark { animation: none; } }

.fd-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; border-radius: 50px; padding: 3px 9px; margin-top: 9px; }
.fd-chip.oliva { background: rgba(180,181,54,0.16); color: #5c5e00; }
.fd-chip.vermelho { background: rgba(232,71,63,0.12); color: var(--color-danger); }
.fd-chip.lavanda { background: #f5ecff; color: #9b59d6; }
.fd-kpi-escuro .fd-chip.oliva { background: rgba(180,181,54,0.22); color: #cdd05a; }

/* ── Cards genéricos ── */
.fd-card { background: #fff; border-radius: 18px; box-shadow: var(--shadow-card); padding: 20px 22px; margin-bottom: 16px; }
.fd-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.fd-card-tit { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--color-text); }
.fd-card-sub { font-size: 11.5px; color: var(--color-text-muted); }

/* ── Barras 12 meses ── */
.fd-bars { display: flex; align-items: flex-end; gap: 9px; height: 150px; }
.fd-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.fd-bar { width: 100%; border-radius: 7px 7px 3px 3px; background: #e8ddf5; min-height: 4px; transition: filter .15s; }
.fd-bar-col:hover .fd-bar { filter: brightness(.94); }
.fd-bar-atual { background: linear-gradient(180deg, #ff6e1f, #e05a10); box-shadow: 0 4px 12px rgba(255,110,31,0.3); }
.fd-bar-lbl { font-size: 9px; font-weight: 600; color: var(--color-text-muted); }
.fd-bar-lbl.atual { color: #d45800; font-weight: 700; }
/* valor acima de cada barra (não só o mês atual) */
.fd-bar-val { font-size: 8.5px; font-weight: 700; color: var(--color-text-secondary); white-space: nowrap; line-height: 1; min-height: 9px; }
.fd-bar-val.atual { color: #d45800; }
@media (max-width: 620px) { .fd-bar-val { font-size: 7px; } }

/* ── Ticket + origem ── */
.fd-dois { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; margin-bottom: 16px; }
.fd-dois .fd-card { margin-bottom: 0; }
.fd-origens { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.fd-origem-top { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
.fd-origem-val { color: var(--color-text-secondary); }
.fd-origem-trilho { height: 6px; border-radius: 50px; background: #f0ece0; overflow: hidden; }
.fd-origem-fill { height: 100%; border-radius: 50px; min-width: 3px; }
.fd-origem-fill.ev { background: #ff6e1f; }
.fd-origem-fill.cl { background: #ddb1f7; }
.fd-origem-fill.lj { background: #b4b536; }

/* ── Filtros (aba Transações) ── */
.fd-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.fd-busca { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 50px; padding: 9px 16px; box-shadow: var(--shadow-card); flex: 1; min-width: 200px; }
.fd-busca input { border: none; background: none; outline: none; font-family: var(--font-body); font-size: 13px; color: var(--color-text); width: 100%; }
.fd-sel { background: #fff; border: 1.5px solid var(--color-border); border-radius: 50px; padding: 8px 14px; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--color-text); cursor: pointer; }

/* ── Tabela de transações ── */
.fd-tabela { background: #fff; border-radius: 18px; box-shadow: var(--shadow-card); overflow: hidden; }
.fd-tr { display: grid; grid-template-columns: 1.6fr 1.5fr 0.9fr 0.9fr 0.9fr; gap: 10px; align-items: center; padding: 12px 18px; }
.fd-th { background: #faf7ee; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--color-text-muted); }
.fd-row { border-top: 1px solid #f4f0e4; cursor: default; }
.fd-cli { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fd-av { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.fd-av.lg { width: 38px; height: 38px; font-size: 12px; }
.fd-av.xl { width: 48px; height: 48px; font-size: 15px; outline: 2px solid #ff6e1f; outline-offset: 2px; }
.fd-cli-nome { font-size: 12.5px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-cli-data { font-size: 10px; color: var(--color-text-muted); }
.fd-item { font-size: 12px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-metodo { font-size: 11.5px; color: var(--color-text-secondary); }
.fd-valor { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--color-text); }
.fd-valor.vermelho { color: var(--color-danger); }

.fd-orig-chip { display: inline-block; font-size: 9px; font-weight: 700; border-radius: 50px; padding: 2px 8px; margin-top: 3px; }
.fd-orig-chip.ev { background: #fff3ec; color: #d45800; }
.fd-orig-chip.cl { background: #f5ecff; color: #9b59d6; }
.fd-orig-chip.lj { background: rgba(180,181,54,0.14); color: #5c5e00; }

.fd-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; border-radius: 50px; padding: 4px 10px; white-space: nowrap; }
.fd-status .fd-dot { width: 6px; height: 6px; border-radius: 50%; }
.fd-status.pago { background: rgba(180,181,54,0.12); color: #5c5e00; }
.fd-status.pago .fd-dot { background: #b4b536; }
.fd-status.pend { background: rgba(132,153,183,0.14); color: #4a5e72; }
.fd-status.pend .fd-dot { background: #8499b7; }
.fd-status.reemb { background: rgba(232,71,63,0.1); color: var(--color-danger); }
.fd-status.reemb .fd-dot { background: var(--color-danger); }

.fd-vazio-linha { padding: 28px 18px; text-align: center; font-size: 13px; color: var(--color-text-muted); border-top: 1px solid #f4f0e4; }
.fd-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: #faf7ee; font-size: 11.5px; color: var(--color-text-muted); flex-wrap: wrap; }
.fd-pag { display: flex; align-items: center; gap: 8px; }
.fd-pag-atual { font-size: 11.5px; font-weight: 700; color: var(--color-text); }
.fd-pag-btn { width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--color-border); background: #fff; color: var(--color-text); cursor: pointer; line-height: 1; }
.fd-pag-btn:hover:not(:disabled) { border-color: var(--color-orange); color: var(--color-orange); }
.fd-pag-btn:disabled { opacity: .4; cursor: default; }

/* ── Clientes ── */
.fd-clientes-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.fd-ranking { display: flex; flex-direction: column; gap: 9px; }
.fd-cliente { background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); padding: 13px 18px; display: flex; align-items: center; gap: 13px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.fd-cliente:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0,0,0,0.1); }
.fd-cliente.top { outline: 2px solid #ddb1f7; outline-offset: 2px; }
.fd-pos { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--color-text-muted); min-width: 22px; }
.fd-pos.ouro { color: #d45800; }
.fd-cliente-nome { font-size: 13.5px; font-weight: 700; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-cliente-meta { font-size: 10.5px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-cliente-lifetime { text-align: right; }
.fd-lifetime-val { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--color-text); }
.fd-lifetime-lbl { font-size: 9.5px; color: var(--color-text-muted); }
.fd-ver { font-size: 12px; font-weight: 600; color: var(--color-orange); flex-shrink: 0; }

/* ── Modal cliente ── */
.fd-modal-bg { position: fixed; inset: 0; background: rgba(43,35,24,0.45); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 1000; }
.fd-modal { width: 520px; max-width: 100%; max-height: 88vh; overflow-y: auto; background: #f6f2e3; border-radius: 22px; box-shadow: 0 24px 60px rgba(43,35,24,0.45); }
.fd-modal-head { background: #fff; padding: 18px 22px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid rgba(0,0,0,0.06); position: sticky; top: 0; z-index: 1; }
.fd-modal-nome { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--color-text); flex-wrap: wrap; }
.fd-badge-top { background: #fff3ec; color: #d45800; font-size: 9px; font-weight: 700; border-radius: 50px; padding: 2px 8px; }
.fd-modal-x { width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--color-cream); color: var(--color-text-muted); font-size: 13px; cursor: pointer; flex-shrink: 0; }
.fd-modal-x:hover { color: var(--color-text); }
.fd-modal-grid { padding: 16px 22px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fd-mini { background: #fff; border-radius: 14px; padding: 13px 16px; box-shadow: 0 3px 12px rgba(0,0,0,0.05); }
.fd-mini-escuro { background: #2b2318; box-shadow: none; }
.fd-mini-val { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: #f6f2e3; margin-top: 3px; }
.fd-assinaturas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fd-assin-chip { background: #f5ecff; color: #9b59d6; font-size: 10px; font-weight: 700; border-radius: 50px; padding: 4px 10px; }

.fd-modal-tl { padding: 16px 22px 20px; }
.fd-tl { position: relative; padding-left: 20px; margin-top: 10px; }
.fd-tl-trilho { position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, #ddb1f7, #ff6e1f, rgba(255,110,31,0)); border-radius: 2px; }
.fd-tl-item { position: relative; margin-bottom: 10px; }
.fd-tl-dot { position: absolute; left: -19px; top: 12px; width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid #f6f2e3; }
.fd-tl-dot.pago { background: #b4b536; }
.fd-tl-dot.pend { background: #8499b7; }
.fd-tl-dot.reemb { background: var(--color-danger); }
.fd-tl-card { background: #fff; border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.fd-tl-card.reembolso { border: 1px dashed rgba(232,71,63,0.35); }
.fd-tl-emoji { font-size: 14px; }
.fd-tl-desc { font-size: 12px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-tl-meta { font-size: 9.5px; color: var(--color-text-muted); }
.fd-tl-val { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--color-text); flex-shrink: 0; }
.fd-tl-val.vermelho { color: var(--color-danger); }
.fd-modal-foot { margin-top: 6px; font-size: 10.5px; font-weight: 600; }

/* Timeline: cabeçalho com filtros de origem (aditivos, default tudo) + chip de comparecimento. */
.fd-tl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fd-tl-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.fd-tl-filtro {
    border: 1.5px solid rgba(132,153,183,0.3); background: transparent; color: var(--color-text-muted);
    border-radius: 9999px; padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer;
    opacity: .55; transition: opacity .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.fd-tl-filtro:hover { opacity: .85; }
.fd-tl-filtro.on { opacity: 1; background: #fff3ec; border-color: var(--color-orange); color: #d45800; }
.fd-tl-comp { display: inline-block; margin-left: 8px; border-radius: 9999px; padding: 1px 8px; font-size: 10px; font-weight: 700; }
.fd-tl-comp.comp-sim { background: rgba(180,181,54,0.18); color: #5c5e00; }
.fd-tl-comp.comp-nao { background: rgba(132,153,183,0.16); color: #4a5e72; }

/* ── Responsivo ── */
@media (max-width: 860px) {
    .fd-kpis { grid-template-columns: 1fr; }
    .fd-dois { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .fd-th { display: none; }
    .fd-tr { grid-template-columns: 1fr auto; grid-auto-rows: auto; row-gap: 6px; }
    .fd-cli { grid-column: 1 / 2; }
    .fd-valor { grid-column: 2 / 3; grid-row: 1; justify-self: end; }
    .fd-row > div:nth-child(2) { grid-column: 1 / 3; }
    .fd-metodo { grid-column: 1 / 2; }
    .fd-row > div:nth-child(5) { grid-column: 2 / 3; justify-self: end; }
    .fd-tl-card { flex-wrap: wrap; }
}