:root {
    --cor-fundo: #f4f6f5;
    --cor-texto: #1f2723;
    --cor-texto-suave: #5b6b66;
    --cor-primaria: #2f6f62;
    --cor-primaria-escura: #234f45;
    --cor-primaria-clara: #e4efec;
    --cor-dourado: #b8923d;
    --cor-dourado-claro: #f6ecd7;
    --cor-borda: #dbe3e0;
    --cor-card: #ffffff;
    --cor-casa: #2f6f62;
    --cor-pessoal: #b8923d;
    --cor-empresa: #5b6b73;
    --cor-erro: #b3261e;
    --cor-status-pago-bg: #e2f3e8;
    --cor-status-pago-texto: #1e6b47;
    --cor-status-pendente-bg: #faf1de;
    --cor-status-pendente-texto: #8a6414;
    --cor-alerta-prazo-bg: #fde3c8;
    --cor-alerta-prazo-bg-hover: #fad3ac;
    --fonte-titulo: Georgia, 'Times New Roman', serif;
    --fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fonte-texto);
    background: var(--cor-fundo);
    color: var(--cor-texto);
}

a { color: var(--cor-primaria-escura); }

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 700; color: var(--cor-primaria-escura); }
h1 { font-size: 1.7rem; margin: 0 0 6px; }
h2 { font-size: 1.25rem; margin: 0 0 14px; }
h3 { font-size: 1.05rem; margin: 20px 0 12px; }

/* ------------------------------------------------------------
   Layout principal: menu lateral fixo (desktop) / barra inferior
   fixa (mobile). app-shell é o container flex de página inteira;
   app-main carrega o conteúdo, com margem pra não ficar embaixo do
   menu lateral.
   ------------------------------------------------------------ */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 232px;
    flex-shrink: 0;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    background: var(--cor-primaria);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 22px 0 18px;
    overflow-y: auto;
}

.sidebar-brand {
    font-family: var(--fonte-titulo);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0 22px 22px;
}

.sidebar-nav { list-style: none; margin: 0; padding: 0; }

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 600;
    border-left: 3px solid transparent;
}

.sidebar-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.sidebar-nav a.ativo {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-left-color: var(--cor-dourado);
}

.sidebar-icone { font-size: 1.1rem; line-height: 1; }

.sidebar-secundario {
    margin-top: 12px;
    padding: 14px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.sidebar-secundario a { color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 0.82rem; }
.sidebar-secundario a:hover { color: #fff; text-decoration: underline; }

.sidebar-footer {
    margin-top: auto;
    padding: 16px 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.sidebar-membros { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }

.sidebar-membro { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); }
.sidebar-membro.atual { color: #fff; font-weight: 700; }

.sidebar-membro-chip {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.74rem;
    flex-shrink: 0;
}

.sidebar-membro.atual .sidebar-membro-chip { background: var(--cor-dourado); color: var(--cor-primaria-escura); }

.sidebar-sair { color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 0.82rem; }
.sidebar-sair:hover { color: #fff; text-decoration: underline; }

.app-main { flex: 1; min-width: 0; margin-left: 232px; }

.topbar-mobile { display: none; }

.bottom-nav { display: none; }

.content { max-width: 1180px; margin: 0 auto; padding: 24px 20px 40px; }

.card {
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    padding: 22px 24px;
    margin-bottom: 22px;
    box-shadow: 0 1px 2px rgba(31, 39, 35, 0.04);
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

label { font-size: 0.85rem; font-weight: 600; color: var(--cor-texto-suave); }

input, select, textarea {
    padding: 9px 12px;
    border: 1px solid var(--cor-borda);
    border-radius: 7px;
    font-size: 1rem;
    width: 100%;
    background: #fff;
    color: var(--cor-texto);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-clara);
}

.radio-group { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.radio-group label { display: flex; align-items: center; gap: 6px; font-weight: 400; color: var(--cor-texto); }

input[type="checkbox"], input[type="radio"] { width: auto; }

.checkbox-label { display: flex; align-items: center; gap: 6px; font-weight: 400; color: var(--cor-texto); }

button, .btn {
    background: var(--cor-primaria);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 7px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

button:hover, .btn:hover { background: var(--cor-primaria-escura); }

button.secundario, .btn.secundario {
    background: transparent;
    color: var(--cor-primaria-escura);
    border: 1px solid var(--cor-primaria);
    font-weight: 600;
}

button.secundario:hover, .btn.secundario:hover { background: var(--cor-primaria-clara); color: var(--cor-primaria-escura); }

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--cor-borda); }
th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cor-texto-suave); font-weight: 700; }
tbody tr:hover { background: var(--cor-primaria-clara); }
tfoot th { border-top: 2px solid var(--cor-borda); border-bottom: none; }

.tabela-scroll { overflow-x: auto; }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
}
.badge-casa { background: var(--cor-casa); }
.badge-pessoal { background: var(--cor-pessoal); }
.badge-empresa { background: var(--cor-empresa); }
.badge-compartilhada { background: var(--cor-casa); }

.negativo { color: var(--cor-erro); font-weight: 700; }
.positivo { color: var(--cor-primaria-escura); font-weight: 700; }

.flash {
    background: var(--cor-primaria-clara);
    border: 1px solid var(--cor-primaria);
    color: var(--cor-primaria-escura);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.erro {
    background: #fbe9e7;
    border: 1px solid var(--cor-erro);
    color: var(--cor-erro);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--cor-fundo);
}

.auth-card { width: 100%; max-width: 360px; }

/* Linha de estatísticas (totais em destaque no topo de uma tela) */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.stat-tile {
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(31, 39, 35, 0.04);
}

.stat-tile-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cor-texto-suave);
    font-weight: 700;
    margin-bottom: 6px;
}

.stat-tile-valor {
    font-family: var(--fonte-titulo);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cor-primaria-escura);
}

.stat-tile.acento-dourado .stat-tile-valor { color: var(--cor-dourado); }
.stat-tile.acento-erro .stat-tile-valor { color: var(--cor-erro); }

/* Badge de status Pago/Pendente, clicável (é um botão por baixo) */
.status-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
}

.status-pago {
    background: var(--cor-status-pago-bg);
    color: var(--cor-status-pago-texto);
}
.status-pago:hover { background: #d3ecdd; }

.status-pendente {
    background: var(--cor-status-pendente-bg);
    color: var(--cor-status-pendente-texto);
}
.status-pendente:hover { background: #f5e6c2; }

/* Não pago e a data de pagamento já passou — diferente de "a vencer"
   (pendente, mas ainda dentro do prazo). Vermelho porque é mais urgente. */
.status-vencida {
    background: #fbe2df;
    color: var(--cor-erro);
}
.status-vencida:hover { background: #f7cec9; }

/* Coluna de ações (editar/excluir) com ícones, separada visualmente */
.tabela-acoes-col { border-left: 1px solid var(--cor-borda); }

.acoes-icones { display: flex; gap: 4px; }

.icone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--cor-texto-suave);
    border: 1px solid var(--cor-borda);
    font-size: 0.95rem;
    line-height: 1;
}

.icone-btn:hover { background: var(--cor-primaria-clara); color: var(--cor-primaria-escura); border-color: var(--cor-primaria); }

.icone-btn.icone-excluir:hover { background: #fbe9e7; color: var(--cor-erro); border-color: var(--cor-erro); }

.linha-duplicata-suspeita { background: var(--cor-status-pendente-bg); }
.linha-duplicata-suspeita:hover { background: #f5e6c2; }

/* Linha com "não importar (é a mesma compra)" escolhido — visualmente
   esmaecida pra deixar claro que essa linha não vai ser salva, mas os
   campos continuam preenchidos/visíveis (nunca escondidos) caso o usuário
   queira reverter a escolha antes de confirmar. */
.linha-nao-importar { opacity: 0.55; }

.aviso-duplicata {
    display: block;
    font-size: 0.72rem;
    color: var(--cor-status-pendente-texto);
    font-weight: 600;
    margin-top: 4px;
}

/* Aviso de duplicata em bloco (lançamento manual) — mesma linguagem de
   cor do .aviso-duplicata inline usado na conferência de importação,
   só que em card, já que aqui é um aviso único bloqueando o envio,
   não uma marcação por linha numa tabela. */
.aviso-duplicata-bloco {
    background: var(--cor-status-pendente-bg);
    border: 1px solid var(--cor-status-pendente-texto);
    color: var(--cor-status-pendente-texto);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 600;
}

.opcoes-duplicata {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 6px;
    gap: 4px;
    font-weight: 400;
    min-width: 220px;
}
.opcoes-duplicata label { font-size: 0.78rem; font-weight: 400; color: var(--cor-texto); white-space: normal; }

.stat-tile-input {
    font-family: var(--fonte-titulo);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cor-primaria-escura);
    border: none;
    padding: 0;
    width: 100%;
    background: transparent;
}
.stat-tile-input:focus { outline: none; box-shadow: none; border-bottom: 2px solid var(--cor-primaria); }

.tabela-nowrap th, .tabela-nowrap td { white-space: nowrap; }

.ja-adicionado {
    background: var(--cor-status-pago-bg) !important;
    color: var(--cor-status-pago-texto) !important;
    border-color: transparent !important;
    cursor: default;
}

.card-sugestao {
    background: var(--cor-card);
    border: 1px solid var(--cor-primaria);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 20px;
}

.opcao-sugestao {
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.opcao-sugestao:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   Chips de categoria/forma de pagamento: paleta cíclica de 8 cores
   (ver indiceCorCiclica() em format.php) — sem depender de um campo
   "cor" cadastrado.
   ------------------------------------------------------------ */
.badge-cor-0, .chip-forma-cor-0 { background: #2f6f62; }
.badge-cor-1, .chip-forma-cor-1 { background: #b8923d; }
.badge-cor-2, .chip-forma-cor-2 { background: #5b6b73; }
.badge-cor-3, .chip-forma-cor-3 { background: #8a5a44; }
.badge-cor-4, .chip-forma-cor-4 { background: #4a6fa5; }
.badge-cor-5, .chip-forma-cor-5 { background: #7a5a8c; }
.badge-cor-6, .chip-forma-cor-6 { background: #b3563f; }
.badge-cor-7, .chip-forma-cor-7 { background: #6b7a3e; }

.chip-forma {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 0.76rem;
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   Barra de filtros (tipo / forma / período) + totais lado a lado.
   ------------------------------------------------------------ */
.filtro-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.filtro-controles { display: flex; flex-wrap: wrap; gap: 14px; flex: 1; }
.filtro-controles .form-row { margin-bottom: 0; min-width: 150px; }

.filtro-totais { display: flex; gap: 14px; flex-wrap: wrap; }
.filtro-totais .stat-tile { min-width: 150px; }

/* ------------------------------------------------------------
   Gráfico de rosca (Fixas x Variáveis) — SVG puro, sem biblioteca.
   ------------------------------------------------------------ */
.donut-wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.donut-chart { width: 150px; height: 150px; flex-shrink: 0; }
.donut-legenda { display: flex; flex-direction: column; gap: 12px; }
.donut-legenda-item { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; }
.donut-legenda-valor { color: var(--cor-texto-suave); font-size: 0.82rem; }
.donut-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.donut-vazio { color: var(--cor-texto-suave); font-size: 0.9rem; }

/* ------------------------------------------------------------
   Lista de despesas em cards (mobile) — alternativa à tabela.
   ------------------------------------------------------------ */
.despesas-cards-mobile { display: none; }

.despesa-card {
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.despesa-card.linha-duplicata-suspeita { background: var(--cor-status-pendente-bg); }

.despesa-card-topo { display: flex; align-items: center; gap: 12px; }
.despesa-card-info { flex: 1; min-width: 0; }
.despesa-card-desc { font-weight: 700; color: var(--cor-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.despesa-card-meta { font-size: 0.8rem; color: var(--cor-texto-suave); margin-top: 2px; }
.despesa-card-valor { font-family: var(--fonte-titulo); font-weight: 700; color: var(--cor-primaria-escura); white-space: nowrap; }
.despesa-card-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }

.despesa-oculta { display: none !important; }

/* Destaque "a vencer nos próximos 7 dias" — laranja, deliberadamente
   diferente do dourado de acento já usado em outro lugar, pra ler como
   um aviso de prazo e não só um "destaque bonito". */
tbody tr.linha-vence-em-breve, .despesa-card.linha-vence-em-breve { background: var(--cor-alerta-prazo-bg); }
tbody tr.linha-vence-em-breve:hover { background: var(--cor-alerta-prazo-bg-hover); }

@media (max-width: 860px) {
    .sidebar { display: none; }

    .topbar-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
        background: var(--cor-primaria);
        color: #fff;
    }
    .topbar-mobile-brand { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: 0.02em; }
    .topbar-mobile a { color: #fff; text-decoration: none; font-size: 0.85rem; opacity: 0.9; }
    .topbar-mobile a:hover { opacity: 1; text-decoration: underline; }

    .app-main { margin-left: 0; padding-bottom: 78px; }

    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        background: var(--cor-primaria);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.14);
        z-index: 30;
    }
    .bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 8px 4px 10px;
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        font-size: 0.64rem;
        font-weight: 700;
        text-align: center;
    }
    .bottom-nav a .icone { font-size: 1.2rem; }
    .bottom-nav a.ativo { color: #fff; }

    .despesas-tabela-desktop { display: none; }
    .despesas-cards-mobile { display: block; }
}

@media (max-width: 600px) {
    .content { padding: 16px 14px 32px; }
    .card { padding: 18px; }
    .filtro-totais .stat-tile { flex: 1; min-width: 0; }
}