/* =========================================================
   Code Gestão — Área Restrita (Premium UI)
   Paleta: verde #66CB66, azul #003366
   Ajuste: remove contorno verde no ACTIVE (menu) e deixa clean
   ========================================================= */
:root{
  --green:#66CB66;
  --blue:#003366;
  --dark:#0b1220;
  --text:#0f172a;
  --muted:#64748b;
  --bg:#f5f7fb;
  --card:#ffffff;
  --glass:rgba(255,255,255,.72);
  --stroke:rgba(15,23,42,.10);
  --stroke-strong:rgba(15,23,42,.16);
  --shadow:0 18px 55px rgba(2, 6, 23, .10);
  --shadow-soft:0 10px 25px rgba(2, 6, 23, .08);
  --radius-xl:22px;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:10px;
  --focus:0 0 0 4px rgba(102,203,102,.28);

  /* Novos tokens para menu ativo clean */
  --active-bg:#f1f5f9;           /* cinza suave */
  --active-text:rgba(15,23,42,.92);
  --hover-bg:rgba(0,51,102,.05);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -20%, rgba(102,203,102,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(0,51,102,.12), transparent 60%),
    var(--bg);
}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;}
.hidden{display:none !important;}

.container{
  height:100%;
  display:flex;
}

/* Sidebar */
.sidebar{
  width:280px;
  min-width:280px;
  padding:18px 16px;
  border-right:1px solid var(--stroke);
  background:rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
}
.brand{
  display:flex; align-items:center; gap:12px;
  padding:10px 10px 16px 10px;
}
.brand-logo{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(102,203,102,.95), rgba(0,51,102,.95));
  box-shadow: var(--shadow-soft);
}
.brand-title{
  line-height:1.15;
}
.brand-title strong{display:block;font-size:14px;}
.brand-title span{font-size:12px;color:var(--muted);}

.nav{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.nav a{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px;
  border-radius:12px;
  color:rgba(15,23,42,.86);
  border:1px solid transparent;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.nav a:hover{
  background:var(--hover-bg);
  border-color:rgba(0,51,102,.10);
}

/* ✅ ACTIVE CLEAN (sem contorno verde) */
.nav a.active{
  background:var(--active-bg);
  border-color:transparent; /* remove o contorno */
  color:var(--active-text);
  font-weight:650;
  box-shadow:none;
}

/* (removido) barrinha lateral no item ativo */

.nav .group-label{
  margin:14px 8px 6px 8px;
  font-size:11px;
  letter-spacing:.12em;
  color:var(--muted);
  text-transform:uppercase;
}
.sidebar-footer{
  margin-top:auto;
  padding:12px 8px 0 8px;
  color:var(--muted);
  font-size:12px;
}

/* Main */
.main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--stroke);
  background:rgba(255,255,255,.60);
  backdrop-filter: blur(10px);
}
.topbar h1{
  margin:0;
  font-size:16px;
  letter-spacing:.2px;
}
.topbar .right{
  display:flex; align-items:center; gap:10px;
  color:var(--muted);
  font-size:13px;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:1px solid var(--stroke);
  border-radius:999px;
  background:rgba(255,255,255,.7);
}
.btn{
  border:1px solid var(--stroke-strong);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  box-shadow: 0 1px 0 rgba(2,6,23,.03);
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.btn:hover{transform: translateY(-1px);}
.btn:active{transform: translateY(0px);}
.btn.primary{
  border-color: rgba(102,203,102,.55);
  background: linear-gradient(135deg, rgba(102,203,102,.95), rgba(102,203,102,.72));
}
.btn.danger{
  border-color: rgba(239,68,68,.45);
  background: rgba(239,68,68,.10);
}
.btn:focus{outline:none; box-shadow: var(--focus);}

/* Botões com ícone (usados no Financeiro) */
.btn .ico{
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:8px;
}
.btn .ico svg{ width:16px; height:16px; display:block; }
.input, select.input{
  width:100%;
  border-radius:12px;
  border:1px solid var(--stroke-strong);
  padding:10px 12px;
  background:rgba(255,255,255,.85);
}

/* =========================================================
   COMPAT — telas que ainda usam classes “genéricas” (form-control, etc.)
   Mantém visual premium sem precisar refatorar HTML inteiro.
   ========================================================= */

/* inputs sem classe */
.card input[type="text"],
.card input[type="number"],
.card input[type="date"],
.card input[type="email"],
.card input[type="search"],
.card select,
.card textarea{
  border-radius:12px;
  border:1px solid var(--stroke-strong);
  padding:10px 12px;
  background:rgba(255,255,255,.85);
}
.card input:focus,
.card select:focus,
.card textarea:focus{
  outline:none;
  box-shadow: var(--focus);
  border-color: rgba(102,203,102,.65);
}

/* layout de campos */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; color:var(--muted); }

/* “form-control” (caso exista) */
.form-control{ width:100%; }

/* botões bootstrap-like */
.btn-primary{ 
  border-color: rgba(102,203,102,.55);
  background: linear-gradient(135deg, rgba(102,203,102,.95), rgba(102,203,102,.72));
}
.btn-danger{ 
  border-color: rgba(239,68,68,.75);
  background: linear-gradient(135deg, rgba(239,68,68,.95), rgba(239,68,68,.75));
  color:#fff;
}
.btn-sm{ padding:8px 10px; border-radius:12px; font-size:12px; }
.input:focus, select.input:focus, textarea.input:focus{
  outline:none; box-shadow: var(--focus);
  border-color: rgba(102,203,102,.65);
}
.content{
  padding:18px 22px 28px 22px;
  overflow:auto;
}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.card{
  background:rgba(255,255,255,.85);
  border:1px solid var(--stroke);
  border-radius:var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.card .card-h{
  padding:14px 14px 0 14px;
  display:flex; align-items:center; justify-content:space-between;
}
.card .card-h h2{
  margin:0;
  font-size:14px;
}
.card .card-c{
  padding:14px;
}
.kpi{
  display:flex; flex-direction:column; gap:6px;
}
.kpi .label{font-size:12px;color:var(--muted);}
.kpi .value{font-size:22px;font-weight:750;letter-spacing:-.02em;}
.kpi .sub{font-size:12px;color:rgba(15,23,42,.66);}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.table th, .table td{
  padding:10px 10px;
  border-bottom:1px solid rgba(15,23,42,.08);
  font-size:13px;
  text-align:left;
  vertical-align:middle;
}
.table th{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}
.table tbody tr:hover{
  background:rgba(102,203,102,.06);
}
.badge{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--stroke);
  color:rgba(15,23,42,.8);
  background:rgba(255,255,255,.7);
}
.badge.ok{border-color:rgba(102,203,102,.55); background:rgba(102,203,102,.12);}
.badge.warn{border-color:rgba(245,158,11,.55); background:rgba(245,158,11,.12);}
.badge.bad{border-color:rgba(239,68,68,.55); background:rgba(239,68,68,.12);}

.row{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.row .col{
  min-width:180px;
  flex:1;
}
.row .col.small{max-width:220px; flex:0 1 220px;}
.row .col.tiny{max-width:140px; flex:0 1 140px;}

.toast{
  position:fixed;
  right:18px;
  bottom:18px;
  width:min(420px, calc(100vw - 36px));
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:9999;
}
.toast .item{
  padding:12px 14px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--stroke-strong);
  border-radius:14px;
  box-shadow: var(--shadow);
}
.toast .item strong{display:block; font-size:13px;}
.toast .item span{display:block; font-size:12px; color:var(--muted); margin-top:4px;}

@media (max-width: 980px){
  .sidebar{display:none;}
  .topbar{position:sticky; top:0; z-index:20;}
}

/* =========================================================
   EXTENSÕES — Cadastros separados + botões + alerts
   Cole este bloco NO FINAL do app.css
   ========================================================= */

.nav-sub{
  margin: 4px 0 12px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.nav-sub a{
  padding:9px 10px;
  border-radius:12px;
  font-size:13px;
  color: rgba(15,23,42,.82);
  border:1px solid transparent;
  transition: background .18s ease, color .18s ease;
}
.nav-sub a:hover{
  background: rgba(0,51,102,.05);
  border-color: rgba(0,51,102,.10);
}

/* ✅ ACTIVE CLEAN (subitens) */
.nav-sub a.active{
  background: var(--active-bg);
  border-color: transparent;     /* remove contorno */
  color: var(--active-text);
  font-weight:650;
}
/* (removido) barrinha lateral no item ativo */

/* Botões pequenos e de perigo (Excluir) */
.btn.sm{
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
}

/* Danger premium (mantém vermelho forte) */
.btn.danger{
  border-color: rgba(239,68,68,.75);
  background: linear-gradient(135deg, rgba(239,68,68,.95), rgba(239,68,68,.75));
  color: #fff;
}
.btn.danger:hover{
  filter: brightness(.98);
}

/* Alertas */
.alert{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--stroke-strong);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-soft);
  margin: 12px 0;
  white-space: pre-wrap;
}
.alert-error{
  border-color: rgba(239,68,68,.28);
  background: rgba(239,68,68,.08);
  color: rgba(153,27,27,.95);
}

/* Cabeçalho de página (se ainda não tiver) */
.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}
.page-head h1{ margin:0; font-size:16px; }
.page-head .actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.search{
  display:flex;
  gap:10px;
  align-items:center;
}
.search input{
  width: 260px;
  max-width: 60vw;
  border-radius: 12px;
  border: 1px solid var(--stroke-strong);
  padding: 10px 12px;
  background: rgba(255,255,255,.85);
}
.search input:focus{
  outline:none;
  box-shadow: var(--focus);
  border-color: rgba(102,203,102,.65);
}

/* =========================================================
   Picker (autocomplete / lupa) - usado no Financeiro
   ========================================================= */
.picker{ position:relative; }
.picker-pop{
  position:absolute;
  top: calc(100% + 6px);
  left:0; right:0;
  background: rgba(255,255,255,.98);
  border:1px solid var(--stroke-strong);
  border-radius:14px;
  box-shadow: var(--shadow);
  max-height: 260px;
  overflow:auto;
  z-index: 50;
}
.picker-item{
  padding:10px 12px;
  font-size:13px;
  cursor:pointer;
}
.picker-item:hover{ background: rgba(0,51,102,.05); }
.picker-item.muted{ color: var(--muted); cursor:default; }

/* Links card (hub cadastros) */
.card.link{
  display:block;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card.link:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.card .title{ font-weight: 750; }
.card .sub{ color: var(--muted); font-size: 13px; margin-top: 4px; }

/* Grid de atalhos */
.grid-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .grid-cards{ grid-template-columns: 1fr; }
}

/* =========================================================
   FIX — Cadastros layout (Categorias/Contas/Parceiros)
   ========================================================= */

.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.page-head h1{ margin:0; font-size:22px; letter-spacing:-.02em; }

.page-head .actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* busca compacta (não ocupa a tela toda) */
.search{
  display:flex;
  align-items:center;
  gap:10px;
}
.search .input{
  width: min(360px, 55vw);
}

/* formulário de cadastros em grid bonito */
.form-grid{
  display:grid;
  grid-template-columns: 180px 1.3fr 1fr 140px 160px;
  gap:12px;
  align-items:end;
}
@media (max-width: 1100px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* botões pequenos alinhados */
.btn.sm{ padding:8px 10px; font-size:12px; border-radius:12px; }
.btn.danger{
  border-color: rgba(239,68,68,.75);
  background: linear-gradient(135deg, rgba(239,68,68,.95), rgba(239,68,68,.75));
  color:#fff;
}
.btn.danger:hover{ filter: brightness(.98); }

.alert{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--stroke-strong);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-soft);
  margin: 12px 0;
  white-space: pre-wrap;
}
.alert-error{
  border-color: rgba(239,68,68,.25);
  background: rgba(239,68,68,.07);
  color: rgba(153,27,27,.95);
}
.alert-info{
  border-color: rgba(0,51,102,.18);
  background: rgba(0,51,102,.05);
  color: rgba(15,23,42,.90);
}

/* =========================================================
   Picker (autocomplete) — lupa no campo
   ========================================================= */
.picker{ position:relative; }
.picker input{ padding-right:40px; }
.picker::after{
  content:"";
  position:absolute;
  right:12px;
  top:50%;
  width:16px;
  height:16px;
  transform: translateY(-50%);
  opacity:.55;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}


/* =========================================================
   COMPAT — Telas antigas (Contas/Parceiros/Planos/Módulos)
   Algumas páginas vieram sem classes .input/.btn.
   Este bloco aplica um visual premium sem precisar reescrever todo o HTML.
   ========================================================= */

/* wrappers comuns */
.card form, .card .form, .form{ width:100%; }

/* Campos (label + input) */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; color: var(--muted); }

/* Inputs sem classe */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="tel"],
select,
textarea{
  border-radius:12px;
  border:1px solid var(--stroke-strong);
  padding:10px 12px;
  background:rgba(255,255,255,.85);
}
textarea{ resize:vertical; min-height:42px; }
input:focus, select:focus, textarea:focus{ outline:none; box-shadow: var(--focus); border-color: rgba(102,203,102,.65); }

/* Botões sem classe */
button:not(.btn){
  border:1px solid var(--stroke-strong);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  box-shadow: 0 1px 0 rgba(2,6,23,.03);
}
button:not(.btn):hover{ transform: translateY(-1px); }
button:not(.btn):active{ transform: translateY(0px); }

/* Classes tipo Bootstrap (se aparecerem) */
.form-control{ width:100%; border-radius:12px; border:1px solid var(--stroke-strong); padding:10px 12px; background:rgba(255,255,255,.85); }
.form-select{ width:100%; border-radius:12px; border:1px solid var(--stroke-strong); padding:10px 12px; background:rgba(255,255,255,.85); }
.btn-primary{ border-color: rgba(102,203,102,.55) !important; background: linear-gradient(135deg, rgba(102,203,102,.95), rgba(102,203,102,.72)) !important; }
.btn-danger{ border-color: rgba(239,68,68,.75) !important; background: linear-gradient(135deg, rgba(239,68,68,.95), rgba(239,68,68,.75)) !important; color:#fff !important; }
.btn-sm{ padding:8px 10px; font-size:12px; border-radius:12px; }

/* Ajusta formulários “em linha” (como na tela de contas) */
.card .form-row, .form-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:end;
}
.form-row > *{ flex: 1 1 200px; }

/* Inputs sem classe (fallback) */
.form-row input, .form-row select, .form-row textarea{
  width:100%;
  border-radius:12px;
  border:1px solid var(--stroke-strong);
  padding:10px 12px;
  background:rgba(255,255,255,.85);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:none;
  box-shadow: var(--focus);
  border-color: rgba(102,203,102,.65);
}

/* Quando label e input estiverem “soltos” (sem .field) */
form label{ display:block; font-size:12px; color:var(--muted); margin: 10px 0 6px; }


/* =========================================================
   MODAIS (Baixa/ações em lote)
   ========================================================= */
.modal{ position:fixed; inset:0; background:rgba(2,6,23,.55); display:flex; align-items:center; justify-content:center; z-index:9999; }
.modal.hidden{ display:none !important; }
.modal-box{ background:rgba(255,255,255,.95); border:1px solid var(--stroke); border-radius:18px; padding:18px; width:520px; max-width:92vw; box-shadow: var(--shadow); }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }

/* dashboard: remove badges vazias (tira o “OK”) */
.badge:empty{ display:none !important; }

/* =========================================================
   FIX LOGO — Sidebar brand (logo grande, clean, sem quadrado)
   Cole no FINAL do app.css
   ========================================================= */

.brand.brand--wide{
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px 14px 10px;
}

.brand-logo-wide{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.brand-logo-wide:focus,
.brand-logo-wide:focus-visible{
  outline: none;
  box-shadow: none;
}

.brand-logo-wide img{
  height: 46px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Remove a caixa quadrada antiga, caso ainda exista no DOM */
.brand-logo{
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Título fica mais alinhado e premium */
.brand-title strong{
  font-size: 14px;
  letter-spacing: .2px;
}
.brand-title span{
  font-size: 12px;
  color: rgba(100,116,139,.95);
}

/* ===== Dashboard charts: valores visíveis ===== */
.chart-wrap{ width:100%; }
.chart-bars{
  display:flex;
  align-items:flex-end;
  gap:14px;
  padding:14px 10px 6px 10px;
  height:220px;
}
.chart-col{
  flex:1;
  min-width:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  position:relative;
}
.chart-stack{
  width:100%;
  max-width:56px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:6px;
  position:relative;
}
.bar{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  position:relative;
}
.bar.receita{ background: rgba(102,203,102,.35); }
.bar.despesa{ background: rgba(239,68,68,.18); }

/* Valor acima da barra */
.bar .bar-value{
  position:absolute;
  left:50%;
  top:-26px;
  transform:translateX(-50%);
  font-size:11px;
  font-weight:650;
  color: rgba(15,23,42,.85);
  background: rgba(255,255,255,.9);
  border:1px solid rgba(15,23,42,.10);
  border-radius:999px;
  padding:3px 8px;
  white-space:nowrap;
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
}

.chart-month{
  font-size:12px;
  color: rgba(100,116,139,.95);
}

/* Tooltip simples */
.chart-tip{
  position:fixed;
  z-index:9999;
  pointer-events:none;
  transform:translate(10px, 10px);
  background: rgba(15,23,42,.92);
  color:#fff;
  font-size:12px;
  padding:8px 10px;
  border-radius:12px;
  box-shadow: 0 18px 55px rgba(2,6,23,.25);
  display:none;
}
.chart-tip strong{ display:block; font-size:12px; margin-bottom:2px; }
.chart-tip span{ display:block; opacity:.9; }

/* =========================================================
   DASHBOARD — Premium polish (cole no FINAL do app.css)
   ========================================================= */

/* Ajuste geral de espaçamento do dashboard */
.dashboard{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Grid responsivo melhor */
.dash-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 1200px){
  .dash-grid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
}
@media (max-width: 780px){
  .dash-grid{ grid-template-columns: repeat(1, minmax(0,1fr)); }
}

/* Cards com acabamento premium */
.card{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(2,6,23,.08);
}

/* Cabeçalho do card com layout padrão */
.card .card-h{
  padding: 14px 16px 10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.card .card-h .title{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.card .card-h h2{
  margin:0;
  font-size:13px;
  letter-spacing:.2px;
}
.card .card-h .meta{
  font-size:12px;
  color: rgba(100,116,139,.95);
}

/* chips (OK / status) mais bonitos */
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.80);
  color: rgba(15,23,42,.72);
  font-size: 12px;
}
.chip.ok{
  border-color: rgba(102,203,102,.40);
  background: rgba(102,203,102,.12);
  color: rgba(15,23,42,.80);
}
.chip.warn{
  border-color: rgba(245,158,11,.45);
  background: rgba(245,158,11,.12);
}
.chip.bad{
  border-color: rgba(239,68,68,.45);
  background: rgba(239,68,68,.10);
}

/* KPI cards mais premium */
.kpi{
  gap:8px;
}
.kpi .label{
  font-size:12px;
  color: rgba(100,116,139,.98);
}
.kpi .value{
  font-size:24px;
  font-weight:800;
  letter-spacing:-.02em;
}
.kpi .sub{
  font-size:12px;
  color: rgba(100,116,139,.90);
}

/* Separador interno */
.divider{
  height:1px;
  background: rgba(15,23,42,.08);
  margin: 10px 0;
}

/* Gráfico (sem biblioteca) - deixa compacto e bonito */
.chart-shell{
  padding: 8px 6px 14px 6px;
}
.chart-legend{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:12px;
  color: rgba(100,116,139,.95);
}
.legend-item{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 6px 10px;
  border:1px solid rgba(15,23,42,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.75);
}
.dot{
  width:10px;height:10px;border-radius:999px;
}
.dot.green{ background: rgba(102,203,102,.95); }
.dot.blue{ background: rgba(0,51,102,.92); }

.chartBarsPremium{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding: 10px 10px 4px 10px;
  height: 220px;
}
.chartCol{
  flex: 1;
  min-width: 48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.chartStack{
  width: 100%;
  max-width: 64px;
  display:flex;
  gap:10px;
  align-items:flex-end;
  justify-content:center;
}
.barWrap{
  width: 44%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.barVal{
  font-size:11px;
  font-weight:700;
  color: rgba(15,23,42,.86);
  background: rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  padding: 3px 8px;
  white-space:nowrap;
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
}
.barP{
  width: 100%;
  border-radius: 999px 999px 14px 14px;
  border:1px solid rgba(15,23,42,.10);
}
.barP.receita{
  background: linear-gradient(to top, rgba(102,203,102,.18), rgba(102,203,102,.95));
}
.barP.despesa{
  background: linear-gradient(to top, rgba(0,51,102,.14), rgba(0,51,102,.92));
}
.chartMonth{
  font-size:12px;
  color: rgba(100,116,139,.95);
}

/* Tabelas do dashboard com look premium */
.table td, .table th{ padding: 10px 12px; }
.table tbody tr:hover{ background: rgba(0,51,102,.04); }

/* Ranking: última coluna destaque */
.table td:last-child b{
  font-weight:800;
}

/* Deixa “Sem dados” bonito */
.empty{
  padding: 12px 14px;
  color: rgba(100,116,139,.95);
  font-size: 13px;
}


/* Dashboard: esconde badges vazias (remove os "OK") */
.badge:empty{ display:none !important; }