/* ======= Paleta ======= */
:root{
  --cor-principal:#003780;
  --cor-secundaria:#4B4B4D;
  --cor-destaque:#627579;
  --cor-fundo-claro:#F7F7F7;
  --cor-texto:#1E1E1E;
  --cor-sucesso:#3CB371;
  --cor-erro:#CC3333;
  --cor-card:#f9f9f9;
  --cor-botao:#8F2929;
  --cor-botao-hover:#054ba8;
  --cor-botao-active:#5D1919;
  --cor-branco:#FFFFFF;
  --cor-table-success:#2f9e44;
  --navbar-height:64px; /* ajuste se necessário */
}

/* ======= Reset ======= */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Poppins',sans-serif;
  background:var(--cor-fundo-claro);
  color:var(--cor-texto);
  line-height:1.6;
  padding-top:60px;
  padding-bottom:60px;
  overflow-x:hidden;
}

/* ======= Navbar ======= */
.navbar{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:var(--cor-principal);
  padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;
  color:var(--cor-branco);
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  transition:background-color .3s ease;
}
.navbar:hover{ background:var(--cor-botao-hover) }

.navbar-brand{
  font-size:1.5rem;font-weight:bold;color:var(--cor-branco);
  text-decoration:none;display:flex;align-items:center;gap:8px;
}

/* Toggle (hambúrguer) */
.menu-toggle{
  display:none;flex-direction:column;justify-content:space-around;
  width:30px;height:24px;background:transparent;border:none;cursor:pointer;
  margin-left:auto;position:relative;z-index:1200;padding:0;
}
.menu-toggle span{
  display:block;height:3px;width:100%;background:var(--cor-branco);
  border-radius:2px;transition:all .3s ease;opacity:1;
}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg);position:absolute;top:10px;width:30px}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg);position:absolute;top:10px;width:30px}
button.menu-toggle{min-width:auto;padding:0;transform:none}
button.menu-toggle:hover,button.menu-toggle:active{background:transparent;transform:none}

/* Menu */
.menu{list-style:none;display:flex;gap:16px}
.menu a{
  color:var(--cor-branco);text-decoration:none;font-weight:500;
  display:flex;align-items:center;gap:6px;
}
.menu a:hover,.menu .active{ color:var(--cor-fundo-claro) }

/* Usuário/Logout (topo – desktop) */
.user-actions{ display:flex;align-items:center;gap:12px }
.user-info{ display:flex;align-items:center;gap:6px;font-weight:600;font-size:.9rem;color:var(--cor-fundo-claro) }
.btn-logout{
  background:var(--cor-secundaria);color:var(--cor-branco);
  padding:8px 14px;border-radius:6px;font-weight:600;font-size:.9rem;
  display:flex;align-items:center;gap:6px;transition:background-color .3s ease;
  text-decoration:none;
}
.btn-logout:hover{ background:#373739 }

/* ======= Botões ======= */
button,.btn{
  background:var(--cor-botao);color:var(--cor-branco);
  padding:10px 20px;border:none;border-radius:6px;cursor:pointer;
  font-size:14px;font-weight:600;transition:all .3s ease-in-out;
  display:inline-flex;align-items:center;gap:8px;
}
button:hover,.btn:hover{ background:var(--cor-botao-hover);transform:scale(1.05) }
button:active,.btn:active{ background:var(--cor-botao-active);transform:scale(.98) }
.btn-primary{ background:var(--cor-principal) }
.btn-primary:hover{ background:var(--cor-botao-hover) }
.btn-primary:active{ background:var(--cor-botao-active) }
.btn-success{ background:var(--cor-sucesso) }
.btn-success:hover{ background:#2e8b57 }
.btn-danger{ background:var(--cor-erro) }
.btn-danger:hover{ background:#b32d2d }
.btn-warning{ background:var(--cor-destaque) }
.btn-warning:hover{ background:#526468 }
.btn-sm{ padding:4px 8px;font-size:.85rem }

/* ======= Estruturas ======= */
.container{ max-width:1200px;margin:30px auto;padding:20px }
h1,h2,h3{ margin-bottom:20px;color:var(--cor-principal);text-align:center;font-size:2rem;transition:color .3s ease }
h1:hover,h2:hover,h3:hover{ color:var(--cor-destaque) }

.card{
  background:var(--cor-card);padding:20px;margin-bottom:20px;border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{ transform:translateY(-5px);box-shadow:0 8px 16px rgba(0,0,0,.2) }

/* ======= Gráfico ======= */
canvas#graficoFinanceiro{ max-height:400px;min-height:200px;width:100% }

/* ======= Tabelas ======= */
.table-responsive{ width:100%;overflow-x:auto }
.table{
  width:100%;border-collapse:collapse;background:var(--cor-branco);border-radius:12px;
}
.table th,.table td{ padding:15px;text-align:center;border:1px solid #ddd }
.table th{ background:var(--cor-principal);color:var(--cor-branco);font-weight:bold }
.table td:first-child{ text-align:left }
.table-hover tbody tr{ transition:background-color .3s ease }
.table-hover tbody tr:hover{ background:#f1f1f1 }
.table-success{ background:var(--cor-table-success);color:var(--cor-branco) }

/* ======= Formulários ======= */
form{
  display:flex;flex-wrap:wrap;gap:16px;background:var(--cor-card);
  padding:20px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.06);margin-bottom:30px;
}
form input,form select{
  flex:1 1 180px;padding:10px;border:1px solid #ccc;border-radius:6px;
  font-size:1rem;background:var(--cor-branco);min-width:160px;
}
form input:focus,form select:focus{
  outline:none;border-color:var(--cor-destaque);box-shadow:0 0 0 2px rgba(98,117,121,.2);
}

/* Filtros e formulários específicos */
.filter-form .row,.avulsa-form .row,.despesa-form .row,.renda-form .row{
  display:flex;flex-wrap:nowrap;gap:16px;justify-content:center;align-items:flex-end;
}
.filter-form .filter-item{ flex:0 1 200px;min-width:150px }
.filter-form .form-label,.avulsa-form .form-label,.despesa-form .form-label,.renda-form .form-label{
  margin-bottom:8px;font-weight:500;color:var(--cor-texto)
}
.filter-form .form-control,.avulsa-form .form-control,.despesa-form .form-control,.renda-form .form-control{
  width:100%;padding:8px;font-size:.9rem
}

/* Avulsas */
.avulsa-form .avulsa-item{ flex:0 1 auto;max-width:300px }
.avulsa-form .avulsa-item:nth-child(1){ flex:1 1 40%;min-width:200px }
.avulsa-form .avulsa-item:nth-child(2){ flex:1 1 25%;min-width:150px }
.avulsa-form .avulsa-item:nth-child(3){ flex:0 1 auto;min-width:120px }
.avulsa-form .btn{ width:100%;padding:8px;font-size:.9rem }

/* Despesas fixas */
.despesa-form .despesa-item{ flex:0 1 auto;max-width:200px }
.despesa-form .despesa-item:nth-child(1){ flex:1 1 25%;min-width:180px }
.despesa-form .despesa-item:nth-child(2),
.despesa-form .despesa-item:nth-child(3),
.despesa-form .despesa-item:nth-child(4),
.despesa-form .despesa-item:nth-child(5){ flex:1 1 15%;min-width:120px }
.despesa-form .despesa-item:nth-child(6){ flex:0 1 auto;min-width:100px }
.despesa-form .btn{ width:100%;padding:8px;font-size:.9rem }

/* Rendas */
.renda-form .renda-item{ flex:0 1 auto;max-width:200px }
.renda-form .renda-item:nth-child(1){ flex:1 1 30%;min-width:180px }
.renda-form .renda-item:nth-child(2),.renda-form .renda-item:nth-child(3){ flex:1 1 20%;min-width:120px }
.renda-form .renda-item:nth-child(4){ flex:0 1 auto;min-width:100px }
.renda-form .btn{ width:100%;padding:8px;font-size:.9rem }

/* ======= Status/Alertas ======= */
.status-paga{ color:var(--cor-sucesso) }
.status-pendente{ color:var(--cor-erro) }
.status-container{ display:flex;align-items:center;gap:8px;justify-content:center }
.status-container .status-finalizada{ color:var(--cor-sucesso);font-weight:500 }
.status-container .status-andamento{ color:var(--cor-principal);font-weight:500 }
.status-container .btn-ativo{ background:var(--cor-sucesso);color:var(--cor-branco);padding:4px 8px;font-size:.85rem }
.status-container .btn-inativo{ background:var(--cor-erro);color:var(--cor-branco);padding:4px 8px;font-size:.85rem }
.status-icon{ margin-right:6px }

.alert{ padding:10px;border-radius:4px;font-size:.9rem }
.bg-success{ background:var(--cor-sucesso);color:var(--cor-branco) }
.bg-danger{ background:var(--cor-erro);color:var(--cor-branco) }

/* ======= Rodapé ======= */
.rodape{
  background:var(--cor-principal);color:var(--cor-branco);padding:20px 0;position:relative;width:100%;
  text-align:center;font-size:.9rem;
}
.rodape a{ color:#ffae42;text-decoration:none }
.rodape a:hover{ text-decoration:underline }
.rodape .container{ max-width:1200px;margin:0 auto;padding:0 20px }

/* ======= Login/Registro ======= */
.login-container,.register-container{
  max-width:480px;margin:60px auto;padding:2rem;background:var(--cor-branco);
  border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.1);
}
.login-container h2,.register-container h2{
  font-size:1.75rem;color:var(--cor-principal);margin-bottom:1.5rem;text-align:center
}
.auth-form{ display:flex;flex-direction:column;gap:1.25rem }
.form-group{ display:flex;flex-direction:column;gap:.5rem }
.form-group label{ font-size:.95rem;color:var(--cor-texto) }
.auth-form input{
  width:100%;padding:12px 16px;font-size:1rem;border:1px solid #ddd;border-radius:8px;background:var(--cor-branco);
  line-height:1.5;min-height:46px;box-sizing:border-box;height:auto;
}
.auth-form input:focus{ outline:none;border-color:var(--cor-destaque);box-shadow:0 0 0 3px rgba(98,117,121,.2) }
.auth-form button{
  width:100%;padding:14px;margin-top:.5rem;background:var(--cor-botao);
  color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;
}
.auth-links{ text-align:center;margin-top:1.5rem;font-size:.9rem }
.auth-links a{ color:var(--cor-destaque);text-decoration:none }

/* ======= Modal ======= */
.modal{
  display:none;position:fixed;z-index:9999;left:0;top:0;width:100vw;height:100vh;
  background:rgba(0,0,0,.5);justify-content:center;align-items:center;
}
.modal-content{
  background:#fff;padding:30px;border-radius:10px;width:90%;max-width:420px;
  box-shadow:0 5px 25px rgba(0,0,0,.3);text-align:center;animation:fadeIn .25s ease-in-out;
}
.modal-content h3{ color:var(--cor-principal);margin-bottom:16px }
.modal-actions{ margin-top:20px;display:flex;justify-content:center;gap:12px }
@keyframes fadeIn{ from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }

/* ================== NAVBAR – VISIBILIDADE CONSOLIDADA ================== */
/* Estado base: só mostra o essencial; visibilidade controlada por breakpoints */
nav.navbar .vc-only-desktop,
nav.navbar .vc-only-mobile{ display:none !important }

/* Desktop (>=992px): mostra bloco do topo; esconde itens mobile no menu */
@media (min-width:992px){
  nav.navbar .user-actions,
  nav.navbar .vc-only-desktop{ display:inline-flex !important; align-items:center; gap:.75rem }
  nav.navbar ul#menu li.vc-only-mobile{ display:none !important }

  /* Menu em linha */
  nav.navbar .menu{ position:static;max-height:none;overflow:visible }
  .menu-toggle{ display:none }
}

/* Mobile (<992px): topo escondido; nome+Sair dentro do menu */
@media (max-width:991.98px){
  .menu-toggle{ display:flex }
  nav.navbar .user-actions,
  nav.navbar .vc-only-desktop{ display:none !important }

  nav.navbar .menu{
    position:absolute;top:100%;left:0;right:0;width:100%;
    background:var(--cor-principal);border-radius:0 0 12px 12px;z-index:1200;
    max-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;transition:max-height .3s ease;
  }
  nav.navbar .menu.show{ max-height:calc(100vh - var(--navbar-height)) }

  nav.navbar ul#menu li.vc-only-mobile{
    display:flex !important;justify-content:center;width:100%;padding:12px 0;
  }
  nav.navbar ul#menu li.vc-only-mobile a.btn-logout{
    width:90%;justify-content:center;font-size:1.05rem;
  }

  /* Tabelas no mobile */
  .table-responsive{ overflow-x:hidden }
  .table{ display:block;width:100% }
  .table thead{ display:none }
  .table tbody{ display:block }
  .table tr{
    display:block;margin-bottom:15px;border:1px solid #ddd;border-radius:8px;background:var(--cor-branco);
    padding:10px;box-shadow:0 2px 4px rgba(0,0,0,.1);
  }
  .table td{
    display:block;text-align:left;padding:8px 10px 8px 1.5rem;border:none;border-bottom:1px solid #eee;position:relative;
  }
  .table td:last-child{ border-bottom:none }
  .table td:before{
    content:attr(data-label) ": ";font-weight:bold;display:inline-block;width:40%;padding-right:10px;color:var(--cor-principal);
  }
  .table td[data-label="Ação"],
  .table td[data-label="Status"]{ display:flex;align-items:center;flex-wrap:nowrap;gap:8px;padding:10px 10px 10px 1.5rem }
  .table td[data-label="Ação"]:before{ content:none }
  .table td[data-label="Ação"] .action-buttons{ display:flex;align-items:center;gap:8px;flex:1 1 auto }
  .table td[data-label="Ação"] .action-buttons .btn{ padding:4px 8px;font-size:.85rem }
  .table td[data-label="Status"]:before{ content:attr(data-label) ":";font-weight:bold;flex:0 0 auto;white-space:nowrap }
  .table td[data-label="Status"] .form-check{ display:flex;align-items:center;gap:8px;margin:0;flex:1 1 auto }
  .table td[data-label="Status"] .form-check-input{ margin:0;width:20px;height:20px;flex:0 0 auto }
  .table td[data-label="Status"] .form-check-label{ display:flex;align-items:center;gap:6px;flex:0 0 auto }
  .table td[data-label="Status"] .status-text{ flex:0 0 auto;white-space:nowrap }
  .table td[data-label="Status"] .status-parcelas{ display:block;margin-top:8px;flex:1 1 100% }

  /* Formulários no mobile */
  .filter-form .row,.avulsa-form .row,.despesa-form .row,.renda-form .row{ flex-wrap:wrap }
  .filter-form .filter-item,.avulsa-form .avulsa-item,.despesa-form .despesa-item,.renda-form .renda-item{
    flex:1 1 100%;max-width:100%;min-width:0;
  }

  /* Login/Registro – mobile */
  .login-container,.register-container{ padding:1.5rem;margin:20px 15px }
  .auth-form input{ padding:10px 14px;min-height:44px }
  .auth-form button{ padding:12px }
}

/* ===== Fim do CSS limpo ===== */

/* ===== VcFin — Layout de páginas de autenticação (aditivo) ===== */
:root{
  --vcf-header-h: 64px;      /* ajuste se o topo.php tiver outra altura */
  --vcf-footer-h: 56px;      /* ajuste se o rodapé tiver outra altura */
}

.vcf-surface{
  background: var(--m3-surface, #f7f9fc);
  min-height: 100vh;
}

.vcf-main{
  min-height: calc(100vh - var(--vcf-header-h) - var(--vcf-footer-h));
  display: flex;
  align-items: flex-start;
  padding: 24px 0;
}

.vcf-container{
  width: 100%;
  max-width: 1160px;           /* largura ampla para não ficar estreito */
  margin: 0 auto;
  padding: 0 16px;
}

.vcf-auth-wrapper{
  width: 100%;
  margin-top: calc(var(--vcf-header-h) + 16px); /* evita ficar atrás do cabeçalho */
  margin-bottom: 24px;
}

.vcf-card{
  background: var(--m3-surface-container, #fff);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
}

.vcf-card-auth{
  padding: 20px 24px;
}

.vcf-card-header .vcf-title{
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 1.5rem;
}
.vcf-card-header .vcf-subtitle{
  margin: 0 0 16px;
  opacity: .75;
}

.vcf-grid{
  display: grid;
  grid-template-columns: 1fr 1fr auto; /* email | senha | botão */
  gap: 12px;
}
@media (max-width: 900px){
  .vcf-grid{ grid-template-columns: 1fr; }
}

.vcf-field{ display: flex; flex-direction: column; }
.vcf-label{ font-weight: 600; margin-bottom: 6px; }
.vcf-input{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d9d9e3;
  border-radius: 12px;
  background: var(--m3-surface, #fff);
}

.vcf-actions-inline{ display: flex; align-items: end; }
.vcf-btn{
  display: inline-block;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}
.vcf-btn-primary{
  background: var(--m3-primary, #4f46e5);
  color: #fff;
}

.vcf-alert{ padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; }
.vcf-alert-error{ background: #fde6ea; color: #8d0b18; }

.vcf-actions{ margin-top: 12px; }
.vcf-link{ color: var(--m3-primary, #1e88e5); text-decoration: underline; }