/* =========================================================
   Finanças — camada de estilo por cima do Sleek (Bootstrap 4.6)
   O Sleek cuida do esqueleto (menu lateral, cabeçalho, login).
   Aqui ficam os componentes gerados pelo app.js, no visual do Sleek.
   ========================================================= */
:root{
  --acc:#4c84ff;--acc-d:#2f6bff;--soft:#eef3ff;
  --ink:#1b223c;--mut:#8a909d;--line:#e5e9f2;--bg:#f5f6fa;--card:#fff;
  --inc:#29cc97;--inc-t:#1a9e72;--exp:#fe5461;--warn:#fec400;--warn-t:#b38900;
  --r:.25rem;
}
[hidden]{display:none!important}
body{color:var(--mut)}
a{color:var(--acc)}

/* ---------- esqueleto ---------- */
.content>section{display:none}
.content>section.on{display:block}
.navbar .sidebar-toggle:before{content:"\F035C"!important;font-family:"Material Design Icons"!important} /* Sleek usa código do MDI 4; aqui o ícone de menu no MDI 7 */
.sidebar-fixed .sidebar-with-footer{padding-bottom:118px!important} /* nosso rodapé é menor que o do Sleek */
.sidebar .sidebar-inner{margin-top:1rem}
.sidebar .sidebar-inner>li>a{padding:.85rem 1.56rem;text-transform:none;font-size:.9rem}
.sidebar .sidebar-inner>li>a .nav-text{white-space:normal}
.sidebar-scroll{flex:1 1 auto;overflow-y:auto;overflow-x:hidden}
.sidebar-scroll::-webkit-scrollbar{width:5px}
.sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.sidebar .sidebar-inner>li>a{cursor:pointer}
.sb-wallet{color:#fff;font-weight:500;line-height:1.3;word-break:break-word}
.sb-wallet small{display:block;color:#8a909d;font-weight:400;margin-top:2px}
body:not(.is-admin) .adm-only{display:none!important}
body.no-wallet .w{display:none!important}
.sb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1040}
.main-header .navbar{gap:.5rem}
.hdr-title{font-family:Montserrat,sans-serif;font-weight:600;color:var(--ink);font-size:1.05rem;margin-left:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.navbar-right .navbar-nav{align-items:center}
.hdr-month{display:flex;align-items:center;gap:2px;margin:0 .5rem}
.hdr-month input{width:150px}
.hdr-month .btn-link{color:var(--mut);padding:.25rem .4rem;font-size:1.1rem;line-height:1}
.sync{font-size:.8rem;white-space:nowrap;padding:0 .25rem}
.user-avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--acc);color:#fff;font:500 .85rem Montserrat,sans-serif;margin-right:.5rem;flex:0 0 auto}
.dropdown-header .user-avatar{margin-right:.75rem}
.user-menu .dropdown-menu li a{cursor:pointer}

/* login */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.auth-card{width:100%;max-width:460px}
.auth-card .card-header{padding:1.5rem}
.auth-card .app-brand a{display:flex;align-items:center;gap:.75rem;color:#fff;text-decoration:none}
.auth-card .brand-name{font:600 1.25rem Montserrat,sans-serif;color:#fff}
#lErr:empty{display:none}

/* ---------- cartões de conteúdo ---------- */
.content .card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;min-width:0;box-shadow:none}
.content .card>h3,.content .card h3{font:600 .95rem/1.3 Montserrat,sans-serif;color:var(--ink);margin:0 0 1rem;text-transform:none;letter-spacing:0}
.content h3 .mdi{color:var(--acc)}
.grid{display:grid;gap:1.25rem;margin-bottom:1.25rem}
.k4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.content>section>.card,.content>section>div:not(.grid)>.card{margin-bottom:1.25rem}
.kpi h3{font:500 .8rem Roboto,sans-serif!important;color:var(--mut)!important;text-transform:uppercase!important;letter-spacing:.04em!important;margin-bottom:.5rem!important}
.kpi .v{font:600 1.6rem/1.2 Montserrat,sans-serif;color:var(--ink);word-break:break-word}
.kpi .s{color:var(--mut);font-size:.8rem;margin-top:.35rem}
.pos{color:var(--inc-t)!important}.neg{color:var(--exp)!important}.warn{color:var(--warn-t)!important}
.kpi .v.pos{color:var(--inc)!important}
.hint{color:var(--mut);font-size:.8rem}

/* ---------- tabelas ---------- */
.content table{width:100%;border-collapse:collapse;color:#646c7d}
.content th,.content td{padding:.6rem .75rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.content th{font:500 .75rem Roboto,sans-serif;color:var(--mut);text-transform:uppercase;letter-spacing:.03em;border-bottom-width:2px}
.content tbody tr:hover td{background:#fafbfd}
.content td b,.content td strong{color:var(--ink)}
.r{text-align:right!important;white-space:nowrap}
.tw{overflow-x:auto}
tr.off td{opacity:.45}
.off2{opacity:.45}
tr.b td{font-weight:600;color:var(--ink)}
tr.sep td{border-top:2px solid var(--line)}
.ft td,.ft th{white-space:nowrap}
.stk{position:sticky;left:0;background:var(--card);z-index:1}
td.c{white-space:nowrap;padding:.4rem .45rem}
td.c input[type=text]{width:88px;text-align:right;padding:.25rem .4rem;font-size:.8rem}
td.c input[type=checkbox]{vertical-align:middle;margin-left:4px}
td.paid{background:rgba(41,204,151,.12)!important}
td.paid input[type=text]{text-decoration:line-through;opacity:.7}

/* ---------- formulários ---------- */
.content input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not(.form-control),
.content select:not(.form-control),.content textarea:not(.form-control){
  font:inherit;font-size:.875rem;color:#495057;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:.4rem .65rem;max-width:100%;transition:border-color .15s,box-shadow .15s}
.content input:focus,.content select:focus,.content textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 .15rem rgba(76,132,255,.2)}
.content input[type=file]{font-size:.8rem;max-width:260px}
.content td select{padding:.25rem .45rem;font-size:.8rem;max-width:230px}
.frow{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:.9rem}
.frow label{display:flex;flex-direction:column;font-size:.75rem;color:var(--mut);gap:.3rem;margin:0;font-weight:500}
.frow label.chk,label.chk{flex-direction:row;align-items:center;gap:.4rem;font-size:.85rem;color:#646c7d}

/* ---------- botões (gerados pelo app.js) no padrão btn do Sleek ---------- */
.content button:not(.btn),.auth-card button:not(.btn){
  font:500 .8rem Roboto,sans-serif;cursor:pointer;border:1px solid var(--line);background:#fff;color:#646c7d;
  border-radius:var(--r);padding:.42rem .9rem;transition:all .15s;white-space:nowrap}
.content button:not(.btn):hover{border-color:var(--acc);color:var(--acc)}
.content button.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.content button.pri:hover{background:var(--acc-d);border-color:var(--acc-d);color:#fff}
.content button.dan{color:var(--exp);border-color:rgba(254,84,97,.35)}
.content button.dan:hover{background:var(--exp);border-color:var(--exp);color:#fff}
.content button.x{border:0;background:none;color:var(--mut);padding:.15rem .45rem}
.content button.x:hover{color:var(--acc);background:var(--soft)}
.content button.x.dan{color:var(--exp)}
.content button.x.dan:hover{color:#fff;background:var(--exp)}
.content button:disabled{opacity:.55;cursor:default}
.content button .mdi{margin-right:.2rem}

/* ---------- miudezas ---------- */
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:4px}.bar i{display:block;height:100%}
.diag{margin:0;padding-left:1.1rem;color:#646c7d}.diag li{margin-bottom:.6rem}
.flag{font-size:.72rem;color:var(--warn-t);display:block}
.chart{width:100%;height:auto}.chart text{fill:var(--mut);font-size:11px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.catrow{cursor:pointer;padding:.4rem 0;color:#646c7d}.catrow:hover{opacity:.8}
.pill{font-size:.7rem;background:var(--soft);color:var(--acc);border-radius:10px;padding:.1rem .5rem;white-space:nowrap;font-weight:500}
.steps{color:#646c7d}.steps li{margin-bottom:.5rem}
details summary{cursor:pointer;color:var(--mut);font-size:.8rem}
pre{white-space:pre-wrap;font-size:.72rem;max-height:300px;overflow:auto;background:var(--bg);padding:.6rem;border-radius:var(--r)}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.65rem 1.1rem;border-radius:var(--r);opacity:0;transition:.25s;pointer-events:none;z-index:2000;max-width:90vw;font-size:.875rem;box-shadow:0 6px 20px rgba(0,0,0,.15)}
#toast.on{opacity:1}
body.loading .content{opacity:.45;pointer-events:none;transition:opacity .2s}
.modal-lite{position:fixed;inset:0;background:rgba(27,34,60,.45);z-index:1060;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal-lite .card{width:100%;max-width:560px;max-height:90vh;overflow:auto}
.footer .copyright p{margin:0;font-size:.8rem}

/* ---------- celular ---------- */
@media (max-width:767.98px){
  .hdr-month input{width:118px}
  .hdr-sync{display:none}
  .g2{grid-template-columns:1fr}
  .content .card{padding:1rem}
}
@media (max-width:575.98px){
  .main-header .navbar{flex-wrap:wrap}
  .navbar-right{width:100%}
  .navbar-right .navbar-nav{justify-content:space-between;width:100%}
  .hdr-month{margin:0}
}
@media print{
  .left-sidebar,.main-header,.footer,.noprint{display:none!important}
  .content>section{display:none!important}.content>section.on{display:block!important}
}

/* ---------- modais e barra de ações ---------- */
.page-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:flex-end;margin-bottom:1.25rem}
.page-actions .hint{margin-right:auto}
.content .page-actions button:not(.btn){padding:.5rem 1rem;font-size:.85rem}
body.modal-open{overflow:hidden}
.modal-lite{position:fixed;inset:0;background:rgba(27,34,60,.5);z-index:1060;display:flex;align-items:flex-start;justify-content:center;padding:4vh 1rem;overflow-y:auto;animation:mfade .15s ease-out}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.content .modal-lite .card.mcard{width:100%;max-width:600px;padding:0;margin:0 auto;box-shadow:0 20px 50px rgba(27,34,60,.25);border:0}
.content .modal-lite .card.mcard.wide{max-width:1000px}
.mhead{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.5rem;border-bottom:1px solid var(--line)}
.content .mhead h3{margin:0!important;font-size:1.05rem!important}
.mbody{padding:1.25rem 1.5rem;max-height:calc(92vh - 140px);overflow-y:auto}
.mfoot{display:flex;gap:.5rem;align-items:center;padding:1rem 1.5rem;border-top:1px solid var(--line);background:#fafbfd;border-radius:0 0 var(--r) var(--r)}
.mfoot .sp{flex:1}
.mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1rem}
.mgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mgrid .full{grid-column:1/-1}
.mgrid label{display:flex;flex-direction:column;gap:.3rem;font-size:.75rem;color:var(--mut);font-weight:500;margin:0}
.mgrid label.chk{flex-direction:row;align-items:center;font-size:.85rem;color:#646c7d}
.mgrid input:not([type=checkbox]):not([type=color]),.mgrid select{width:100%}
.mgrid .help{font-size:.75rem;color:var(--mut);font-weight:400}
.mbody p.hint:last-child{margin-bottom:0}
.inline-sum{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;align-items:center;color:#646c7d}
.inline-sum b{color:var(--ink)}
@media (max-width:575.98px){.mgrid,.mgrid.c3{grid-template-columns:1fr}.mbody{padding:1rem}.mhead,.mfoot{padding:.9rem 1rem}}
.content label,.mgrid label,.frow label{text-transform:none!important}
.auth-card label{text-transform:none!important}