/* Controle Financeiro — estilos globais */
@import url('');
:root {
  --dark-bg: #0f172a;
  --dark-card: #1e293b;
  --dark-border: #334155;
  --ice-white: #f8fafc;
  --ice-muted: #94a3b8;
  --emerald: #10b981;
  --emerald-hover: #059669;
  --sky: #38bdf8;
  --indigo: #818cf8;
  --purple: #c084fc;
  --red: #f87171;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background-color: var(--dark-bg);
  color: var(--ice-white);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  padding-bottom: 4rem;
  -webkit-tap-highlight-color: transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--dark-bg); }
::-webkit-scrollbar-thumb { background: var(--dark-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.container { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 0; }
.card {
  background-color: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.3);
}
.btn-primary {
  background: var(--emerald); color: #fff; font-weight: 600;
  padding: .625rem 1rem; border-radius: .5rem; border: 0;
  cursor: pointer; transition: background-color .2s ease;
}
.btn-primary:hover { background: var(--emerald-hover); }
.btn-danger {
  background: rgba(239,68,68,.1); color: var(--red);
  border: 1px solid rgba(239,68,68,.2); padding: .5rem 1rem;
  border-radius: .5rem; cursor: pointer; transition: background-color .2s ease;
}
.btn-danger:hover { background: rgba(239,68,68,.2); }
/* Modal: as classes hidden/modal-hidden têm prioridade quando fechado. */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  backdrop-filter: blur(4px); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.hidden, .modal-hidden { display: none !important; pointer-events: none !important; }
.modal-overlay:not(.hidden):not(.modal-hidden) { display: flex; pointer-events: auto; }
.modal-content { position: relative; z-index: 1; width: 100%; }
button { cursor: pointer; }
input[type="number"], input[type="text"] {
  user-select: text; -webkit-user-select: text;
}

/* Barra lateral compacta de contas fixas */
.finance-layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:16px;max-width:1480px;margin:0 auto;padding:16px 12px;align-items:start}
.finance-main{min-width:0}.finance-main>.max-w-6xl{padding-top:8px}
.fixed-sidebar{position:sticky;top:14px;background:#1e293b;border:1px solid #334155;border-radius:14px;padding:12px;color:#f8fafc;font-size:12px;max-height:calc(100vh - 28px);overflow-y:auto}
.fixed-sidebar-heading,.fixed-summary,.fixed-bill-top,.fixed-bill-bottom{display:flex;align-items:center;justify-content:space-between;gap:6px}
.fixed-sidebar-heading strong{font-size:13px}.fixed-sidebar-heading i{color:#34d399}.fixed-sidebar-heading span{color:#94a3b8}
.fixed-help{font-size:10px;color:#94a3b8;line-height:1.5;margin:6px 0 10px}
.fixed-bills-list{display:flex;flex-direction:column;gap:7px;max-height:43vh;overflow-y:auto}
.fixed-bill{background:#0f172a;border:1px solid #334155;border-radius:9px;padding:8px}
.fixed-bill-name{font-size:11px;font-weight:600;overflow-wrap:anywhere}.fixed-remove{color:#f87171;background:transparent;border:0;font-size:18px;line-height:1}
.fixed-bill-fields,.fixed-form-row{display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:6px;margin-top:6px}
.fixed-bill-fields input,.fixed-bill-form input{width:100%;min-width:0;border:1px solid #475569;border-radius:6px;background:#1e293b;color:#f8fafc;padding:6px;font-size:11px}
.fixed-bill-bottom{margin-top:7px}.fixed-status{font-size:10px;color:#94a3b8}.fixed-status.paid{color:#6ee7b7}.fixed-status.overdue{color:#f87171}.fixed-status.soon{color:#fbbf24}
.fixed-toggle{font-size:10px;border:1px solid #047857;color:#6ee7b7;background:#064e3b55;border-radius:5px;padding:4px}
.fixed-bill-form{border-top:1px solid #334155;margin-top:10px;padding-top:10px}.fixed-add-btn{background:#059669;color:white;border:0;border-radius:6px;padding:7px;width:100%;margin-top:7px;font-size:11px;font-weight:600}
.fixed-summary{border-top:1px solid #334155;margin-top:10px;padding-top:10px;font-size:11px}.fixed-summary strong{color:#6ee7b7}
@media(max-width:800px){.finance-layout{grid-template-columns:1fr;padding:8px}.fixed-sidebar{position:static;max-height:none}.fixed-bills-list{max-height:240px}.finance-main>.max-w-6xl{padding-top:8px}}

/* Painéis principais: duas colunas equilibradas e centradas */
.expense-panels { width: 100%; max-width: 1050px; margin-left: auto; margin-right: auto; align-items: stretch; }
.expense-panels > section { min-width: 0; }
@media (max-width: 767px) { .expense-panels { grid-template-columns: 1fr; } }

/* Alinhamento dos painéis com os cartões do resumo e cálculo em tempo real */
.expense-panels { width: 100%; max-width: none; margin-inline: 0; align-items: stretch; }
.expense-panels > .expense-panel { min-width: 0; height: 100%; justify-content: flex-start; }
.expense-panel .expense-form { min-height: 104px; }
.expense-panel .expense-form input { min-width: 0; width: 100%; }
.expense-entry-row input { flex: 1 1 auto; }
.expense-entry-row button { min-width: 44px; min-height: 42px; }
.expense-live-preview { background: #0f172a; border: 1px solid #334155; border-radius: 10px; padding: 11px 13px; margin-bottom: 16px; display: grid; gap: 8px; }
.expense-live-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: #94a3b8; }
.expense-live-line strong { color: #f8fafc; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.expense-live-balance { padding-top: 8px; border-top: 1px solid #334155; }
.expense-live-balance strong { color: #34d399; }
.expense-live-balance strong.is-negative { color: #f87171; }
@media (max-width: 1023px) { .expense-panels { grid-template-columns: 1fr; } }

/* Meu Futuro Financeiro: compacto e responsivo */
.future-panel{margin:18px 0 22px;padding:18px 20px;background:#162132;border:1px solid #334155;border-radius:15px;color:#f8fafc}
.future-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:15px}
.future-head h2{font-size:1.08rem;font-weight:800;color:#f8fafc}
.future-head p,.future-note{color:#94a3b8;font-size:.75rem;line-height:1.55;margin-top:5px}
.future-head label{font-size:.75rem;color:#cbd5e1;white-space:nowrap}
.future-head select{background:#0f172a;border:1px solid #475569;border-radius:7px;color:#6ee7b7;padding:6px;margin-left:6px}
.future-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:center}
.future-caption{color:#94a3b8;font-size:.72rem}
.future-big{display:block;font-size:1.8rem;color:#6ee7b7;margin:3px 0;font-weight:800}
.future-message{color:#cbd5e1;font-size:.82rem;line-height:1.5;margin:9px 0 14px}
.future-milestones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.future-milestones>div{background:#0f172a;border:1px solid #29374b;border-radius:8px;padding:9px;min-width:0}
.future-milestones small{display:block;color:#94a3b8;font-size:.67rem}
.future-milestones b{display:block;font-size:.86rem;overflow-wrap:anywhere}
.future-graph{padding:12px;background:#0f172a;border:1px solid #29374b;border-radius:10px}
.future-graph span{font-size:.76rem;color:#cbd5e1}
.future-graph svg{display:block;width:100%;height:auto;margin-top:8px}
.future-note{margin-top:12px}
@media(max-width:740px){.future-grid{grid-template-columns:1fr}.future-head{flex-wrap:wrap}.future-panel{padding:14px}}

/* FINANCE PRO — Cabeçalho responsivo */

.erp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.erp-topbar .erp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

#financeSettingsOpen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: 1px solid #475569;
  border-radius: 12px;
  background: #1e293b;
  color: #f8fafc;
  cursor: pointer;
}

@media (max-width: 600px) {
  .erp-topbar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    gap: 10px;
  }

  .erp-topbar .erp-brand {
    font-size: 18px;
    gap: 8px;
    white-space: nowrap;
  }

  #financeSettingsOpen {
    width: 40px;
    height: 40px;
  }
}