/* Estilos globais e variáveis de tema
	Paleta calma: fundo suave e acento em tom teal/verde-água */
*{box-sizing:border-box;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
:root{--bg:#f3f7f6;--card:#ffffff;--muted:#4b5563;--accent:#4aa89a}
body{margin:0;background:var(--bg);color:#0f172a}
.app{display:flex;min-height:100vh}
.sidebar{width:220px;padding:20px;background:linear-gradient(180deg,#ffffff,#f8fbff);border-right:1px solid #e6eef8}
.sidebar h1{font-size:18px;margin:0 0 12px}
.sidebar nav{display:flex;flex-direction:column;gap:8px}
.sidebar button{background:transparent;border:0;text-align:left;padding:8px;border-radius:6px;cursor:pointer;color:#000}
.sidebar button.active, .sidebar button:hover{background:rgba(74,168,154,0.12)}
/* garantir contraste: título e itens da sidebar em preto */
.sidebar h1, .sidebar nav button{color:#000}

/* botões-ícone usados para ações (editar/excluir) */
.icon-btn{background:transparent;border:0;display:inline-flex;align-items:center;justify-content:center;padding:6px;border-radius:6px;cursor:pointer;color:#000}
.icon-btn svg{width:16px;height:16px;display:block}
.icon-btn:hover{background:rgba(0,0,0,0.04)}
.icon-btn.danger{color:#b85555}
.icon-btn.danger:hover{background:rgba(184,85,85,0.08)}
/* estilo para o input[type=color] - mantê-lo compacto e com borda
	para servir como preview embutido (evita que o input ocupe 100% da célula) */
input[type="color"]{width:44px;height:28px;padding:0;border-radius:6px;border:1px solid #d1d5db;vertical-align:middle;cursor:pointer;background-clip:padding-box}
/* remover retângulo interno do color input em WebKit/Blink */
input[type="color"]::-webkit-color-swatch-wrapper{padding:0;border-radius:6px}
input[type="color"]::-webkit-color-swatch{border:none;border-radius:4px}
/* Firefox */
input[type="color"]::-moz-color-swatch{border:none;border-radius:4px}
/* garantir que o label input rule não force o color picker a ocupar 100% */
label input[type="color"]{width:44px}
.main{flex:1;padding:20px;display:flex;flex-direction:column}
header{display:flex;justify-content:space-between;align-items:center}
header h2{margin:0}
/* menu button (mobile) */
.menu-btn{display:none;background:transparent;border:0;font-size:20px;padding:6px 8px;margin-right:8px;cursor:pointer}

/* toast notifications */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;background:rgba(15,23,42,0.9);color:#fff;padding:8px 12px;border-radius:8px;box-shadow:0 4px 12px rgba(2,6,23,0.2);display:none;z-index:60}

.card{background:var(--card);padding:12px;border-radius:8px;box-shadow:0 1px 2px rgba(15,23,42,0.04)}
.cards-row{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.dashboard .card{flex:1}
/* detalhes internos dos cards: limite/usado/restante */
.card .card-meta{font-size:13px;color:var(--muted);margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}
form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;padding:10px;background:var(--card);border-radius:8px}
label{display:block;font-size:13px;color:var(--muted)}
/* garantir que inputs e selects dentro do label ocupem toda a largura da célula do grid
	isso alinha melhor campos como Descrição / Valor com o campo Nome em outros formulários */
label{display:block;font-size:13px;color:var(--muted)}
label input, label select, label textarea{width:100%;box-sizing:border-box}
input,select,button{padding:8px;border-radius:6px;border:1px solid #e6eef8}
button{background:var(--accent);color:white;border:none}
.list-item{background:var(--card);padding:8px;border-radius:6px;margin:8px 0;display:flex;justify-content:space-between}
.small{font-size:13px;color:var(--muted)}

/* Cabeçalho de mês na lista de movimentos (mais sutil) */
.movimentos #list-movements h4, #list-movements h4{color:#9aa0a6;font-weight:600;margin:12px 0 8px;text-transform:capitalize}
footer{margin-top:auto;padding:12px;text-align:center;color:var(--muted)}
@media (max-width:800px){
	.sidebar{position:fixed;left:-260px;top:0;height:100%;width:220px;z-index:50;box-shadow:2px 0 6px rgba(15,23,42,0.08);transition:left .18s ease;background:linear-gradient(180deg,#ffffff,#f8fbff)}
	.sidebar.show{left:0}
	.main{padding:12px}
	.menu-btn{display:inline-block}
}

/* modal removido - confirmações usam confirm() nativo */

/* filter row used in movimentos */
.filter-row{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.filter-row select,.filter-row input{padding:6px;border-radius:6px;border:1px solid #e6eef8}
/* make filter labels responsive: stack vertically and allow shrinking on small screens */
.filter-row > label{display:flex;flex-direction:column;flex:0 1 220px;min-width:140px}

/* month-controls responsiveness (used in movimentos-mes) */
.month-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.month-controls > label{display:flex;flex-direction:column;flex:0 1 220px;min-width:140px}

/* subtabs (Movimentações do mês) */
/* subtabs: aparência polida com transição e ícone simples */
.subtabs{display:flex;gap:8px;margin-bottom:8px}
.subtabs button{background:transparent;border:1px solid transparent;padding:8px 12px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .18s ease;color:#000}
.subtabs button:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(2,6,23,0.06)}
.subtabs button.active{background:var(--accent);color:#fff;border-color:rgba(0,0,0,0.06);box-shadow:none}
.subtabs button .icon{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center}

.mm-pane{padding:8px}
.mm-pane .card{margin-bottom:8px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:12px;gap:12px}
.mm-pane .card .small{margin-top:4px}
.mm-pane .card-actions{display:flex;flex-direction:column;gap:8px;margin-top:0;align-items:flex-end}
.mm-pane .card-actions button{width:auto;min-width:180px}

/* Small screens: stack card content vertically, keep the card/fixed name visible
	 and display action buttons one under the other for easier tapping */
@media (max-width:600px){
	/* on small screens, ensure actions are full-width for easier tapping */
	.mm-pane .card{flex-direction:column;align-items:stretch}
	.mm-pane .card-actions{flex-direction:column}
	.mm-pane .card-actions button{display:block;width:100%;margin:0;padding:8px 10px}
	/* hide the secondary total block (assumed second div) to reduce clutter on mobile */
	.mm-pane .card > div:nth-child(2){display:none}
}

.pagination{display:flex;gap:8px;align-items:center}
.pagination button{padding:6px 8px;border-radius:6px;border:1px solid #e6eef8;background:#fff;cursor:pointer}
.pagination .page-info{color:var(--muted)}

/* painel lateral para ver fatura (animação e visual) */
.side-panel{position:fixed;right:-420px;top:0;bottom:0;width:420px;background:var(--card);box-shadow:-24px 0 48px rgba(2,6,23,0.12);z-index:90;padding:16px;transition:right .22s ease}
.side-panel.show{right:0}
.side-panel h4{margin-top:0}
.side-panel .close-btn{position:absolute;left:8px;top:8px;border:0;background:transparent;font-size:18px;cursor:pointer}
.side-panel .panel-list{margin-top:16px;overflow:auto;max-height:calc(100vh - 120px)}

/* Modal para visualizar fatura (centralizado, com backdrop e rolagem interna) */
.invoice-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:120}
.invoice-modal.show{display:flex}
.invoice-modal .modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.5)}
.invoice-modal .modal-content{position:relative;background:var(--card);width:min(820px,94%);max-width:820px;border-radius:10px;padding:16px;box-shadow:0 12px 40px rgba(2,6,23,0.18);z-index:121;max-height:calc(100vh - 120px);display:flex;flex-direction:column}
.invoice-modal .modal-close{position:absolute;right:10px;top:8px;border:0;background:transparent;font-size:20px;cursor:pointer;color:var(--muted)}
.invoice-modal .invoice-list{overflow:auto;margin-top:8px;padding-right:8px}
.invoice-modal .invoice-list .list-item{display:flex;justify-content:space-between;padding:8px;border-radius:6px;margin:6px 0;background:var(--bg);border:1px solid rgba(0,0,0,0.03)}
.invoice-modal h3{margin:0 0 6px 0}

/* meta + actions inside invoice modal */
.invoice-modal .modal-meta{display:flex;justify-content:space-between;align-items:center;gap:12px}
.invoice-modal .modal-total{font-weight:600;color:var(--muted)}
.invoice-modal .modal-actions{display:flex;gap:8px}
.invoice-modal .modal-actions button{padding:8px 10px;border-radius:6px;border:1px solid #e6eef8;background:var(--accent);color:#fff;cursor:pointer}
.invoice-modal .modal-actions button[disabled]{opacity:0.6;cursor:not-allowed}
.invoice-modal .invoice-list{max-height:calc(100vh - 220px);margin-top:12px}

/* paid/unpaid button styles */
.action-btn{padding:8px 10px;border-radius:6px;border:0;cursor:pointer}
.paid-btn{background:#2ea46a;color:#fff;border:0;padding:8px 10px;border-radius:6px;cursor:pointer}
.unpaid-btn{background:#d16b6b;color:#fff;border:0;padding:8px 10px;border-radius:6px;cursor:pointer}

/* small badge for fixed occurrences */
.badge{display:inline-block;background:#eef7f6;color:var(--muted);padding:4px 8px;border-radius:999px;font-size:12px;font-weight:600;margin-right:8px}