/* Sistema de gestão da festa — CSS escrito à mão (sem Tailwind/build). */

:root {
  --cor-fundo: hsl(250 20% 98%);
  --cor-texto: hsl(244 27% 13%);
  --cor-card: hsl(0 0% 100%);
  --cor-primaria: hsl(243 75% 59%);
  --cor-primaria-texto: hsl(0 0% 100%);
  --cor-muted: hsl(248 25% 95%);
  --cor-muted-texto: hsl(244 15% 45%);
  --cor-borda: hsl(248 20% 90%);
  --cor-destrutiva: hsl(0 84% 60%);
  --cor-destrutiva-texto: hsl(0 0% 98%);
  --cor-sucesso: #10b981;
  --cor-alerta: #f59e0b;

  --sidebar-fundo: hsl(244 30% 11%);
  --sidebar-texto: hsl(248 20% 85%);
  --sidebar-primaria: hsl(243 75% 65%);
  --sidebar-hover: hsl(244 25% 18%);
  --sidebar-borda: hsl(244 25% 18%);

  --raio: 0.75rem;
  --raio-sm: 0.5rem;
  --sombra: 0 1px 3px rgba(20, 20, 40, 0.06), 0 1px 2px rgba(20, 20, 40, 0.04);
  --sombra-md: 0 4px 16px rgba(20, 20, 40, 0.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: hsl(243 75% 59% / 0.25); border-radius: 99px; }

/* ---------- Layout geral (páginas logadas) ---------- */

.app-shell { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  display: flex;
  flex-direction: column;
  width: 224px;
  background: var(--sidebar-fundo);
  border-right: 1px solid var(--sidebar-borda);
  flex-shrink: 0;
  transition: width .2s ease;
}
.app-shell.colapsado .sidebar { width: 64px; }
.app-shell.colapsado .sidebar .nav-label,
.app-shell.colapsado .sidebar .sidebar-logo-text,
.app-shell.colapsado .sidebar .nav-submenu { display: none; }
.app-shell.colapsado .sidebar .nav-toggle { justify-content: center; }
.app-shell.colapsado .sidebar .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }

.sidebar-logo { display: flex; align-items: center; gap: 12px; padding: 20px 16px; border-bottom: 1px solid var(--sidebar-borda); }
.sidebar-logo img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; flex-shrink: 0; }
.sidebar-logo-text .titulo { font-size: 13px; font-weight: 600; color: var(--sidebar-texto); line-height: 1.3; }
.sidebar-logo-text .subtitulo { font-size: 10px; color: hsl(248 20% 85% / 0.5); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 16px 8px; display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: 10px; border: none; background: none;
  color: hsl(248 20% 85% / 0.7); font-size: 13.5px; font-weight: 500; text-align: left;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-texto); }
.nav-item.ativo { background: var(--cor-primaria); color: var(--cor-primaria-texto); box-shadow: 0 2px 8px hsl(243 75% 59% / .3); }
.nav-item .icone { flex-shrink: 0; }
.nav-toggle .icone:last-child { margin-left: auto; transition: transform .15s; }
.nav-toggle.ativo .icone:last-child,
.nav-submenu.aberto ~ .nav-toggle .icone:last-child { transform: rotate(180deg); }
.nav-grupo .nav-toggle[aria-expanded="true"] .icone:last-child { transform: rotate(180deg); }
.nav-submenu { margin: 4px 0 4px 27px; padding-left: 12px; border-left: 1px solid var(--sidebar-borda); display: none; flex-direction: column; gap: 2px; }
.nav-submenu.aberto { display: flex; }
.nav-sub { padding: 8px 12px; font-size: 13px; }

.sidebar-rodape { padding: 10px; border-top: 1px solid var(--sidebar-borda); }
.botao-colapsar { width: 100%; display: flex; justify-content: center; padding: 8px; border-radius: 8px; background: none; border: none; color: hsl(248 20% 85% / 0.4); }
.botao-colapsar:hover { background: var(--sidebar-hover); color: var(--sidebar-texto); }
.app-shell.colapsado .botao-colapsar .icone { transform: rotate(180deg); }

.drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 50; }
.drawer-overlay.aberto { display: block; }
.drawer-mobile { position: fixed; top: 0; left: 0; bottom: 0; width: 264px; z-index: 51; transform: translateX(-100%); transition: transform .2s ease; }
.drawer-mobile.aberto { transform: translateX(0); }

.app-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.topbar-mobile { display: none; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--cor-borda); background: var(--cor-card); position: relative; }
.topbar-titulo-mobile { position: absolute; left: 50%; transform: translateX(-50%); font-size: 14px; font-weight: 600; }
.topbar-desktop { display: flex; align-items: center; justify-content: flex-end; padding: 10px 24px; border-bottom: 1px solid var(--cor-borda); background: var(--cor-card); }

.conteudo-pagina { flex: 1; overflow-y: auto; padding: 20px 24px; }

.tabbar-mobile { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: var(--cor-card); border-top: 1px solid var(--cor-borda); }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; font-size: 10px; font-weight: 500; color: var(--cor-muted-texto); }
.tab-item.ativo { color: var(--cor-primaria); }

.botao-icone { display: inline-flex; align-items: center; justify-content: center; padding: 6px; border: none; background: none; border-radius: 8px; color: var(--cor-muted-texto); }
.botao-icone:hover { background: var(--cor-muted); }
.link-voltar { display: flex; align-items: center; gap: 4px; border: none; background: none; color: var(--cor-primaria); font-size: 13px; font-weight: 500; padding: 0; }

/* ---------- Menu do usuário (dropdown) ---------- */

.menu-usuario { position: relative; }
.avatar-btn { width: 30px; height: 30px; border-radius: 50%; background: var(--cor-primaria); color: var(--cor-primaria-texto); border: none; font-size: 12px; font-weight: 700; }
.avatar-btn-desktop { display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 4px; border-radius: 10px; }
.avatar-btn-desktop:hover { background: var(--cor-muted); }
.info-usuario { text-align: right; }
.info-usuario .nome { font-size: 12.5px; font-weight: 600; }
.info-usuario .email { font-size: 10.5px; color: var(--cor-muted-texto); }
.avatar-circulo { width: 32px; height: 32px; border-radius: 50%; background: var(--cor-primaria); color: var(--cor-primaria-texto); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }

.dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); box-shadow: var(--sombra-md); z-index: 60; padding: 6px; }
.dropdown.aberto { display: block; }
.dropdown-cabecalho { padding: 8px 10px; }
.dropdown-cabecalho .nome { font-size: 12.5px; font-weight: 600; }
.dropdown-cabecalho .email { font-size: 11px; color: var(--cor-muted-texto); }
.dropdown hr { border: none; border-top: 1px solid var(--cor-borda); margin: 4px 0; }
.dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; background: none; border-radius: 6px; font-size: 13px; text-align: left; color: var(--cor-texto); }
.dropdown-item:hover { background: var(--cor-muted); }

/* ---------- Componentes genéricos ---------- */

.cabecalho-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.cabecalho-pagina h1 { font-size: 20px; }
.cabecalho-pagina .subtitulo { color: var(--cor-muted-texto); font-size: 13px; margin-top: 2px; }
.cabecalho-pagina .acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.cartao { background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px; }
.cartao + .cartao { margin-top: 16px; }
.cartao-titulo { font-size: 14px; font-weight: 600; margin-bottom: 12px; }

.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.stat-card .rotulo { font-size: 12px; color: var(--cor-muted-texto); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.stat-card .valor { font-size: 21px; font-weight: 700; }
.stat-card .valor.positivo { color: var(--cor-sucesso); }
.stat-card .valor.negativo { color: var(--cor-destrutiva); }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 9px; border: 1px solid transparent; font-size: 13.5px; font-weight: 600; transition: opacity .12s, background .12s; white-space: nowrap; }
.botao:disabled { opacity: .55; cursor: not-allowed; }
.botao-primario { background: var(--cor-primaria); color: var(--cor-primaria-texto); }
.botao-primario:hover:not(:disabled) { opacity: .92; }
.botao-secundario { background: var(--cor-muted); color: var(--cor-texto); }
.botao-secundario:hover:not(:disabled) { background: var(--cor-borda); }
.botao-perigo { background: var(--cor-destrutiva); color: #fff; }
.botao-perigo:hover:not(:disabled) { opacity: .92; }
.botao-fantasma { background: none; color: var(--cor-texto); border-color: var(--cor-borda); }
.botao-fantasma:hover:not(:disabled) { background: var(--cor-muted); }
.botao-sm { padding: 6px 11px; font-size: 12.5px; }
.botao-icone-only { padding: 8px; }

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label { font-size: 12.5px; font-weight: 600; color: var(--cor-texto); }
.campo .dica { font-size: 11px; color: var(--cor-muted-texto); }
.campo input, .campo select, .campo textarea {
  padding: 9px 11px; border: 1px solid var(--cor-borda); border-radius: 8px;
  font-size: 13.5px; background: var(--cor-card); color: var(--cor-texto); width: 100%;
  font-family: inherit;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px hsl(243 75% 59% / .15); }
.campo textarea { resize: vertical; min-height: 70px; }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px; }
.checkbox-linha { display: flex; align-items: center; gap: 8px; }
.checkbox-linha input { width: auto; }

/* Campo de valor em Real (R$) — usado no "Valor" de Lançamento/Transferência
   (lancamentos.php, financeiro.php + Utils.aplicarMascaraMoeda em
   assets/js/utils.js). O "R$" fica FORA do campo de digitação, como um
   prefixo fixo dentro do mesmo contorno — deixa claro que ali é dinheiro em
   Real sem o usuário precisar digitar o símbolo. Especificidade
   `.campo .grupo-moeda input` (3 classes) vence de propósito a regra mais
   genérica `.campo input` acima, sem precisar de !important. */
.campo .grupo-moeda {
  display: flex; align-items: stretch; border: 1px solid var(--cor-borda); border-radius: 8px;
  background: var(--cor-card); overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.campo .grupo-moeda:focus-within { border-color: var(--cor-primaria); box-shadow: 0 0 0 3px hsl(243 75% 59% / .15); }
.campo .grupo-moeda .prefixo-moeda {
  display: flex; align-items: center; padding: 0 10px; background: var(--cor-muted);
  color: var(--cor-muted-texto); font-size: 13.5px; font-weight: 700; border-right: 1px solid var(--cor-borda);
  user-select: none; white-space: nowrap;
}
.campo .grupo-moeda input {
  border: none; border-radius: 0; box-shadow: none; padding: 9px 11px;
  flex: 1; min-width: 0; text-align: right; font-variant-numeric: tabular-nums;
}
.campo .grupo-moeda input:focus { outline: none; box-shadow: none; }

.mensagem-erro { color: var(--cor-destrutiva); font-size: 12.5px; background: hsl(0 84% 60% / .08); padding: 8px 11px; border-radius: 8px; margin-bottom: 12px; }
.mensagem-sucesso { color: var(--cor-sucesso); font-size: 12.5px; background: hsl(160 84% 39% / .08); padding: 8px 11px; border-radius: 8px; margin-bottom: 12px; }
.mensagem-info { color: var(--cor-primaria); font-size: 12.5px; background: hsl(243 75% 59% / .08); padding: 8px 11px; border-radius: 8px; margin-bottom: 12px; }

.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge-verde { background: hsl(160 84% 39% / .12); color: hsl(160 84% 28%); }
.badge-amarelo { background: hsl(45 93% 47% / .15); color: hsl(32 81% 35%); }
.badge-vermelho { background: hsl(0 84% 60% / .12); color: hsl(0 70% 45%); }
.badge-cinza { background: var(--cor-muted); color: var(--cor-muted-texto); }

.tabela-wrap { overflow-x: auto; border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-card); }
table.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabela th { text-align: left; padding: 10px 14px; background: var(--cor-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--cor-muted-texto); border-bottom: 1px solid var(--cor-borda); white-space: nowrap; }
table.tabela td { padding: 10px 14px; border-bottom: 1px solid var(--cor-borda); vertical-align: middle; }
table.tabela tr:last-child td { border-bottom: none; }
table.tabela tr:hover td { background: hsl(243 75% 59% / .03); }
.tabela-vazia { padding: 40px 20px; text-align: center; color: var(--cor-muted-texto); font-size: 13px; }
.col-acoes { display: flex; gap: 4px; justify-content: flex-end; }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--cor-borda); margin-bottom: 18px; overflow-x: auto; }
.aba-item { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--cor-muted-texto); border: none; background: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.aba-item.ativo { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); }
.aba-conteudo { display: none; }
.aba-conteudo.ativo { display: block; }

.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,15,30,.5); z-index: 100; align-items: center; justify-content: center; padding: 16px; }
.modal-overlay.aberto { display: flex; }
.modal-caixa { background: var(--cor-card); border-radius: var(--raio); width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--sombra-md); }
.modal-caixa.modal-lg { max-width: 640px; }
.modal-cabecalho { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--cor-borda); }
.modal-cabecalho h3 { font-size: 15px; }
.modal-corpo { padding: 18px; overflow-y: auto; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.pagina-simples { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; background: var(--cor-fundo); }
.cartao-centralizado { background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra-md); padding: 32px; max-width: 400px; width: 100%; text-align: center; }
.cartao-centralizado h1 { font-size: 18px; margin-bottom: 8px; }
.cartao-centralizado p { margin-bottom: 6px; color: var(--cor-muted-texto); font-size: 13px; }
.icone-alerta { font-size: 34px; margin-bottom: 10px; }
.texto-muted { color: var(--cor-muted-texto); }

.login-logo { width: 56px; height: 56px; object-fit: contain; margin: 0 auto 14px; }
.login-form { text-align: left; margin-top: 18px; }

.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: girar .6s linear infinite; }
.spinner-escuro { border-color: hsl(243 75% 59% / .2); border-top-color: var(--cor-primaria); }
@keyframes girar { to { transform: rotate(360deg); } }

.chip-filtro { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--cor-borda); border-radius: 8px; background: var(--cor-card); font-size: 12.5px; }

.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 4px; flex-wrap: wrap; }
.paginacao .info { font-size: 12px; color: var(--cor-muted-texto); }

/* ---------- Responsivo ---------- */

@media (max-width: 900px) {
  .sidebar:not(.drawer-mobile) { display: none; }
  .topbar-mobile { display: flex; }
  .topbar-desktop { display: none; }
  .tabbar-mobile { display: flex; }
  .conteudo-pagina { padding: 14px 14px 70px; }
  .botao-colapsar { display: none; }
}
@media (min-width: 901px) {
  .drawer-mobile, .drawer-overlay { display: none !important; }
}