/* ═══════════════════════════════════════════════════════════════════
   JRW Financeiro — Design System (estilo Organizze)
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Tokens de cor ─────────────────────────────────────────────────── */
:root {
  --color-income:      #00875f;
  --color-income-bg:   #e6f9f3;
  --color-income-mid:  #00b37e;
  --color-expense:     #dc3545;
  --color-expense-bg:  #fdecea;
  --color-overdue:     #e74c3c;
  --color-pending:     #f59e0b;
  --color-pending-bg:  #fff8e7;
  --color-primary:     #0064E0;
  --color-primary-dark:#0051b8;
  --color-primary-bg:  #e6f0ff;
  --color-surface:     #fafafa;   /* off-white — metodologia: sem branco puro */
  --color-bg:          #f0f2f5;   /* fundo de página: ligeiramente neutro */
  --color-border:      #e4e8ee;
  --color-text:        #1a202c;
  --color-heading:     #111827;   /* off-black: heading mais escuro que corpo */
  --color-muted:       #64748b;   /* neutro levemente azulado — tom da marca */
  --color-sidebar-bg:  #0d1b2e;   /* off-black sidebar (não pure black) */
  --color-sidebar-active: rgba(0,100,224,0.22);
  --radius-card:       12px;
  --radius-badge:      20px;
  --shadow-card:       none;
  --shadow-card-hover: none;
  --transition:        0.18s ease;
}

/* ── Modo privacidade (borra valores e nomes pra gravar vídeo) ───────────
   Botão no header (.privacy-toggle-btn) liga/desliga body.privacy-mode.
   Tudo marcado com .jrw-blur (mais .amount-income/.amount-expense, que já
   cobrem dinheiro em Hospedagens/Contratos/Financeiro) borra junto. ────── */
.privacy-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--color-border);
  background: #fff;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
}
.privacy-toggle-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.privacy-toggle-btn__off { display: none; }
.privacy-toggle-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.privacy-toggle-btn.is-active .privacy-toggle-btn__on  { display: none; }
.privacy-toggle-btn.is-active .privacy-toggle-btn__off { display: inline-flex; }

body.privacy-mode .jrw-blur,
body.privacy-mode .amount-income,
body.privacy-mode .amount-expense {
  filter: blur(7px);
  user-select: none;
  transition: filter 0.15s ease;
}
body.privacy-mode .jrw-blur-chart canvas {
  filter: blur(9px);
}

/* ── Reset global ──────────────────────────────────────────────────── */
*, body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* ── Sidebar ────────────────────────────────────────────────────────── */
.navbar.navbar-vertical {
  background: var(--color-sidebar-bg) !important;
  border-right: none !important;
  box-shadow: 2px 0 12px rgba(0,0,0,0.15) !important;
}

.navbar-brand {
  padding: 1.25rem 1rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

.navbar-vertical .nav-link {
  border-radius: 8px !important;
  margin: 2px 8px !important;
  padding: 0.55rem 0.85rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.72) !important;
  transition: background var(--transition), color var(--transition) !important;
}

.navbar-vertical .nav-link:hover {
  background: rgba(255,255,255,0.09) !important;
  color: #fff !important;
}

.navbar-vertical .nav-link.active {
  background: var(--color-sidebar-active) !important;
  color: #fff !important;
}

.navbar-vertical .nav-link .nav-link-icon {
  opacity: 0.7;
  transition: opacity var(--transition);
}

.navbar-vertical .nav-link.active .nav-link-icon,
.navbar-vertical .nav-link:hover .nav-link-icon {
  opacity: 1;
}

/* Divider vertical nav */
.navbar-vertical .navbar-nav {
  padding: 0.5rem 0 !important;
}

/* User footer sidebar */
.navbar-vertical .mt-auto {
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  padding-top: 0.75rem !important;
}

/* Sidebar: section labels e divisores de grupo */
.nav-section-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  padding: 1rem 1.1rem 0.2rem;
  white-space: nowrap;
  list-style: none;
  user-select: none;
}

li.nav-section-divider {
  list-style: none;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 0.4rem 1rem;
}

@media (max-width: 991.98px) {
  .nav-section-label { padding: 0.75rem 1.1rem 0.15rem; }
}

/* ── Page wrapper ──────────────────────────────────────────────────── */
.page-wrapper {
  background: var(--color-bg) !important;
}

.page-header {
  background: var(--color-bg) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.page-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--color-heading) !important;
  letter-spacing: -0.02em;
}

/* ── Cards ─────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  transition: box-shadow var(--transition) !important;
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-card-hover) !important;
}

.card-header {
  background: rgba(0,0,0,0.015) !important; /* sutil diferença do body para criar hierarquia */
  border-bottom: 1px solid var(--color-border) !important;
  padding: 1rem 1.25rem !important;
}

.card-title {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--color-heading) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.card-body {
  padding: 1.25rem !important;
}

/* Cards de KPI (dashboard) */
.card-stat {
  border-left: none !important;
  position: relative;
}

.card-stat .subheader {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--color-muted) !important;
  margin-bottom: 0.6rem !important;
}

.card-stat .card-value {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}

.card-stat.border-danger {
  border-top: 3px solid var(--color-expense) !important;
}

/* ── Valores monetários ─────────────────────────────────────────────── */
.amount-income {
  color: var(--color-income) !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

.amount-expense {
  color: var(--color-expense) !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

/* ── Badges de status ───────────────────────────────────────────────── */
.badge {
  border-radius: var(--radius-badge) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 0.28em 0.75em !important;
  letter-spacing: 0.01em !important;
}

/* Status específicos */
.badge.bg-success-lt, .badge.bg-success {
  background: var(--color-income-bg) !important;
  color: var(--color-income) !important;
  border: 1px solid rgba(0,135,95,0.2) !important;
}

.badge.bg-danger-lt, .badge.bg-danger {
  background: var(--color-expense-bg) !important;
  color: var(--color-expense) !important;
  border: 1px solid rgba(220,53,69,0.2) !important;
}

.badge.bg-warning-lt, .badge.bg-warning {
  background: var(--color-pending-bg) !important;
  color: #b45309 !important;
  border: 1px solid rgba(245,158,11,0.25) !important;
}

.badge.bg-secondary-lt {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

.badge.bg-blue-lt {
  background: var(--color-primary-bg) !important;
  color: var(--color-primary) !important;
  border: 1px solid rgba(0,100,224,0.2) !important;
}

.badge.bg-green-lt {
  background: var(--color-income-bg) !important;
  color: var(--color-income) !important;
  border: 1px solid rgba(0,135,95,0.2) !important;
}

.badge.bg-red-lt {
  background: var(--color-expense-bg) !important;
  color: var(--color-expense) !important;
  border: 1px solid rgba(220,53,69,0.2) !important;
}

/* ── Tabelas ─────────────────────────────────────────────────────────── */
.table {
  color: var(--color-text) !important;
  font-size: 0.875rem !important;
}

.table thead th {
  background: #f8fafc !important;
  color: var(--color-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 0.75rem 1rem !important;
  white-space: nowrap;
}

.table tbody td {
  padding: 0.85rem 1rem !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-top: none !important;
}

.table tbody tr:last-child td {
  border-bottom: none !important;
}

.table tbody tr:hover td {
  background: #fafbfc !important;
}

/* Linha com borda colorida à esquerda */
.transaction-row.is-overdue > td:first-child {
  border-left: 3px solid var(--color-overdue) !important;
  padding-left: 0.75rem !important;
}

.transaction-row.is-income > td:first-child {
  border-left: 3px solid var(--color-income-mid) !important;
  padding-left: 0.75rem !important;
}

.transaction-row.is-expense > td:first-child {
  border-left: 3px solid #f87171 !important;
  padding-left: 0.75rem !important;
}

/* ── Formulários ─────────────────────────────────────────────────────── */
.form-control, .form-select {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 0.875rem !important;
  color: var(--color-text) !important;
  background: #fff !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
  padding: 0.5rem 0.85rem !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(0,100,224,0.12) !important;
  outline: none !important;
}

.form-control-lg {
  font-size: 1rem !important;
  padding: 0.65rem 1rem !important;
  border-radius: 10px !important;
}

.form-label {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 0.4rem !important;
}

.input-group-text {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: var(--color-muted) !important;
  font-size: 0.875rem !important;
}

.input-group .form-control {
  border-left: none !important;
}

.input-group .input-group-text + .form-control {
  border-left: none !important;
}

/* ── Botões ──────────────────────────────────────────────────────────── */
.btn {
  border-radius: 8px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  transition: all var(--transition) !important;
  letter-spacing: 0.01em !important;
}

.btn-primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 1px 3px rgba(0,100,224,0.25) !important;
}

.btn-primary:hover {
  background: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  box-shadow: 0 3px 8px rgba(0,100,224,0.35) !important;
  transform: translateY(-1px);
}

.btn-success {
  background: var(--color-income) !important;
  border-color: var(--color-income) !important;
}

.btn-success:hover {
  background: #006b4b !important;
  border-color: #006b4b !important;
  transform: translateY(-1px);
}

.btn-sm {
  border-radius: 6px !important;
  font-size: 0.78rem !important;
  padding: 0.3rem 0.65rem !important;
}

.btn-outline-secondary {
  border-color: #d1d5db !important;
  color: #374151 !important;
}

.btn-outline-secondary:hover {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
  color: var(--color-text) !important;
}

.btn-outline-danger {
  border-color: #fca5a5 !important;
  color: var(--color-expense) !important;
}

.btn-outline-danger:hover {
  background: var(--color-expense-bg) !important;
  border-color: var(--color-expense) !important;
  color: var(--color-expense) !important;
}

/* ── Botões de ação da tabela ────────────────────────────────────────── */
.actions-cell {
  width: 1%;
  white-space: nowrap;
  padding-right: 1rem !important;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Revela as ações ao passar o mouse na linha */
tr:hover .row-actions { opacity: 1; }
/* Em mobile ficam sempre visíveis */
@media (max-width: 768px) { .row-actions { opacity: 1; } }

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: background 0.13s ease, color 0.13s ease, transform 0.1s ease;
  padding: 0;
  text-decoration: none;
  flex-shrink: 0;
}

.action-btn:hover { transform: scale(1.1); }

/* Pagar/Receber — verde */
.action-btn--pay {
  background: var(--color-income);
  color: #fff;
  width: 28px;
  height: 28px;
}
.action-btn--pay:hover {
  background: #006b4b;
  color: #fff;
  transform: scale(1.08);
}

/* Editar — azul neutro */
.action-btn--edit:hover {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

/* Duplicar — cinza */
.action-btn--dupe:hover {
  background: #f1f5f9;
  color: #475569;
}

/* Excluir — vermelho */
.action-btn--delete:hover {
  background: var(--color-expense-bg);
  color: var(--color-expense);
}

/* Desfazer pagamento — âmbar */
.action-btn--unpay {
  color: #b45309;
}
.action-btn--unpay:hover {
  background: #fff8e7;
  color: #92400e;
}

/* ── CNPJ copiável (abaixo do nome do cliente) ───────────────────────────── */
.cnpj-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-muted);
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.13s ease;
}
.cnpj-copy:hover { color: var(--color-primary); }
.cnpj-copy svg { flex-shrink: 0; opacity: 0.7; }
.cnpj-copy:hover svg { opacity: 1; }
.cnpj-copy.is-copied { color: var(--color-income); }

/* ── Check de NF emitida ──────────────────────────────────────────────── */
.nf-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
  line-height: 1;
  white-space: nowrap;
}
/* Pendente — contorno discreto, convida ao clique */
.nf-check--off {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: #64748b;
}
.nf-check--off:hover {
  border-color: var(--color-income);
  color: var(--color-income);
  background: var(--color-income-bg);
}
/* Emitida — verde sólido suave */
.nf-check--on {
  background: var(--color-income-bg);
  border: 1.5px solid transparent;
  color: var(--color-income);
}
.nf-check--on:hover {
  background: #fde8e8;
  border-color: #f1aeb5;
  color: #b42318;
}

/* ── Botão toggle pago/recebido (modal) ──────────────────────────────── */
.paid-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1.5px solid var(--color-border);
  background: #f8fafc;
  color: #94a3b8;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  padding: 0;
}

.paid-toggle-btn:hover {
  border-color: #94a3b8;
  color: #475569;
  background: #f1f5f9;
}

.paid-toggle-btn.is-paid {
  background: var(--color-income-bg);
  border-color: var(--color-income);
  color: var(--color-income);
}

.paid-toggle-btn.is-paid:hover {
  background: #c8f5e8;
  border-color: #006b4b;
  color: #006b4b;
}

/* ── Modais ──────────────────────────────────────────────────────────── */
.modal-content {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.08) !important;
}

.modal-header {
  padding: 1.25rem 1.5rem 0.75rem !important;
  border-bottom: none !important;
}

.modal-body {
  padding: 0.75rem 1.5rem 1rem !important;
}

.modal-footer {
  padding: 1rem 1.5rem 1.25rem !important;
  border-top: 1px solid var(--color-border) !important;
  background: #fafbfc !important;
  border-radius: 0 0 16px 16px !important;
}

/* Tabs receita/despesa no modal */
.modal-type-tab {
  border-radius: 8px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 0.45rem 1.1rem !important;
  transition: all var(--transition) !important;
  color: var(--color-muted) !important;
}

.modal-type-tab:hover {
  background: #f1f5f9 !important;
  color: var(--color-text) !important;
}

.modal-type-tab.active-income {
  background: var(--color-income-bg) !important;
  color: var(--color-income) !important;
}

.modal-type-tab.active-expense {
  background: var(--color-expense-bg) !important;
  color: var(--color-expense) !important;
}

/* ── Alertas ─────────────────────────────────────────────────────────── */
.alert {
  border-radius: 10px !important;
  font-size: 0.875rem !important;
  border: none !important;
}

.alert-success {
  background: var(--color-income-bg) !important;
  color: var(--color-income) !important;
}

.alert-danger {
  background: var(--color-expense-bg) !important;
  color: var(--color-expense) !important;
}

.alert-warning {
  background: var(--color-pending-bg) !important;
  color: #92400e !important;
}

.alert-info {
  background: #eff6ff !important;
  color: var(--color-primary) !important;
}

/* ── Paginação ───────────────────────────────────────────────────────── */
.pagination .page-link {
  border-radius: 6px !important;
  margin: 0 2px !important;
  font-size: 0.8rem !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

.pagination .page-item.active .page-link {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* ── Status dot ──────────────────────────────────────────────────────── */
.status-dot {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0;
}

/* ── Tags ────────────────────────────────────────────────────────────── */
.tag-badge {
  display: inline-block;
  font-size: 0.68rem !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  margin: 1px !important;
  font-weight: 500 !important;
}

/* ── Cards de dashboard com linha colorida no topo ───────────────────── */
.card-stat {
  position: relative;
  overflow: hidden;
}

.card-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), #5b9cf6);
  opacity: 0;
  transition: opacity var(--transition);
}

.card-stat:hover::before { opacity: 1; }

/* Destaque para card de atrasados */
.card-stat.border-danger::before {
  background: linear-gradient(90deg, var(--color-overdue), #f87171);
  opacity: 1;
}

/* ── Month Navigator — hero (página) e compact (cards/serviços) ──────── */

/* Hero: elemento principal da página, centralizado */
.month-nav-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 1.25rem 0 0.5rem;
}

.month-nav-hero__btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: var(--shadow-card);
  transition: all var(--transition);
  user-select: none;
}

.month-nav-hero__btn:hover {
  background: var(--color-bg);
  border-color: #94a3b8;
  color: var(--color-text);
  box-shadow: var(--shadow-card-hover);
}

.month-nav-hero__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 220px;
  text-align: center;
}

.month-nav-hero__label {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  white-space: nowrap;
  line-height: 1.2;
}

.month-nav-hero__back {
  font-size: 0.75rem;
  color: var(--color-primary);
  text-decoration: none;
  opacity: 0.85;
}

.month-nav-hero__back:hover { opacity: 1; text-decoration: underline; }

/* Switcher de mês compacto — para a linha do título (header) */
.month-nav-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.month-nav-inline__btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  text-decoration: none;
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
  transition: all var(--transition);
  user-select: none;
}
.month-nav-inline__btn:hover {
  background: var(--color-bg);
  border-color: #94a3b8;
  color: var(--color-text);
}
.month-nav-inline__label {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  min-width: 128px;
  text-align: center;
}

/* Compact: usado em cards, serviços, etc. */
.month-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.month-nav-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1;
  flex-shrink: 0;
  transition: all var(--transition);
  user-select: none;
}

.month-nav-btn:hover {
  background: var(--color-bg);
  border-color: #94a3b8;
  color: var(--color-text);
}

.month-nav-label {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  min-width: 148px;
  text-align: center;
  white-space: nowrap;
}

/* ── Filtros modernos ────────────────────────────────────────────────── */
.filter-modern {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 0.85rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Segmented control (período) */
.segmented-control {
  display: inline-flex;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.seg-item {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-muted);
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1.5;
}

.seg-item:hover {
  color: var(--color-text);
  background: rgba(255,255,255,0.7);
}

.seg-item.active {
  background: #fff;
  color: var(--color-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* Date range */
.date-range-input {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1.5px solid var(--color-border);
  border-radius: 9px;
  padding: 0 0.6rem;
  height: 36px;
}

.date-range-input input[type=date] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.8rem !important;
  font-weight: 500;
  color: var(--color-text) !important;
  padding: 0 !important;
  width: 112px;
  cursor: pointer;
}

.date-range-input input[type=date]:focus {
  box-shadow: none !important;
  outline: none !important;
}

.date-sep {
  color: var(--color-muted);
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* Chips de filtro */
.filter-chips {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-chip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 0.85rem;
  border-radius: 20px;
  border: 1.5px solid var(--color-border) !important;
  background: #f8fafc !important;
  font-size: 0.78rem !important;
  font-weight: 500;
  color: var(--color-muted) !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.55rem center !important;
  padding-right: 1.7rem !important;
  min-width: 90px;
}

.filter-chip:hover {
  border-color: #94a3b8 !important;
  background-color: #fff !important;
  color: var(--color-text) !important;
}

.filter-chip.active, .filter-chip:focus {
  border-color: var(--color-primary) !important;
  background-color: var(--color-primary-bg) !important;
  color: var(--color-primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230064E0' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Botão limpar filtros */
.filter-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  transition: all 0.15s;
  margin-left: auto;
}

.filter-clear-btn:hover {
  background: var(--color-expense-bg);
  color: var(--color-expense);
}

@media (max-width: 768px) {
  .filter-modern { padding: 0.75rem; }
  .segmented-control { width: 100%; }
  .seg-item { flex: 1; text-align: center; }
  .date-range-input { width: 100%; }
  .date-range-input input[type=date] { flex: 1; width: auto; }
  /* Search form dentro do filter-modern: full-width no mobile */
  .filter-modern .ms-auto.d-flex { width: 100%; margin-left: 0 !important; }
  .filter-modern .filter-search-wrap { flex: 1; }
  .filter-modern .filter-chip.filter-search { width: 100%; min-width: unset; box-sizing: border-box; }
}

/* ── Btn group de período (legado — mantido por compatibilidade) ──────── */
.btn-group .btn-outline-secondary {
  font-size: 0.8rem !important;
  padding: 0.35rem 0.85rem !important;
}

/* ── Linha dos totais ────────────────────────────────────────────────── */
.totals-bar {
  font-size: 0.875rem;
  padding: 0.5rem 0;
}

/* ── Card footer ─────────────────────────────────────────────────────── */
.card-footer {
  background: #fafbfc !important;
  border-top: 1px solid var(--color-border) !important;
  padding: 0.75rem 1.25rem !important;
}

/* ── Dropdown ────────────────────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
  padding: 0.5rem !important;
}

.dropdown-item {
  border-radius: 6px !important;
  font-size: 0.875rem !important;
  padding: 0.45rem 0.85rem !important;
  color: var(--color-text) !important;
  transition: background var(--transition) !important;
}

.dropdown-item:hover {
  background: #f1f5f9 !important;
  color: var(--color-text) !important;
}

/* ── Login page ──────────────────────────────────────────────────────── */
.page-center {
  background: var(--color-bg) !important;
}

.page-center .card {
  max-width: 420px !important;
  margin: auto !important;
}

/* ── Collapse link "campos adicionais" ───────────────────────────────── */
a[data-bs-toggle="collapse"] {
  font-size: 0.8rem !important;
  color: var(--color-muted) !important;
  text-decoration: none !important;
  transition: color var(--transition) !important;
}

a[data-bs-toggle="collapse"]:hover {
  color: var(--color-primary) !important;
}

/* ── Responsivo ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .card-stat .card-value { font-size: 1.35rem !important; }
  .page-title { font-size: 1.1rem !important; }
  .modal-content { border-radius: 12px !important; }
}

/* ── Tabela de lançamentos — hierarquia e separação (desktop) ─────────── */

/* Mais padding vertical nas linhas */
.card-table tbody .transaction-row td {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}

/* Separador entre linhas mais visível */
.card-table tbody .transaction-row {
  border-bottom: 1px solid var(--color-border);
}

/* Hover sutil */
.card-table tbody .transaction-row:hover {
  background-color: #f8fafc !important;
  transition: background .1s;
}

/* Cliente: destaque maior — é a âncora visual da linha */
.td-client .fw-bold,
.td-client .fw-semibold {
  font-size: 1rem !important;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--color-heading) !important;
}

/* Nome em tabelas genéricas (clientes, serviços) */
.table .fw-bold {
  color: var(--color-heading);
}

/* Valor: peso 700 e sem quebra */
.td-amount {
  font-weight: 700 !important;
  font-size: 1rem !important;
  white-space: nowrap;
}

/* Descrição: levemente mais discreta */
.td-desc > div:first-child {
  color: var(--color-text);
  font-size: .85rem;
}

/* ── Desktop: mobile-only elements ocultos ───────────────────────────── */
@media (min-width: 768px) {
  .btn-filter-toggle { display: none !important; }
  .mobile-chips-wrapper { display: contents; }  /* transparente no flex parent */
  .tx-date-mobile { display: none; }
}

/* ── Mobile: Financeiro — filtros colapsáveis + cards de lançamento ───── */
@media (max-width: 767.98px) {

  /* Month nav menor */
  .month-nav-hero { padding: 0.5rem 0 0.25rem; gap: 8px; margin-bottom: 1rem !important; }
  .month-nav-hero__label { font-size: 1.25rem !important; }
  .month-nav-hero__btn { width: 36px !important; height: 36px !important; }

  /* Presets: scroll horizontal, sem quebra */
  .filter-modern .filter-row:first-child {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .filter-modern .filter-row:first-child::-webkit-scrollbar { display: none; }
  .filter-modern .segmented-control { flex-wrap: nowrap; min-width: max-content; }

  /* Toggle de NF: deixa o nav de mês quebrar para a própria linha (sem scroll) */
  .filter-modern.nf-toggle-row .filter-row:first-child {
    overflow-x: visible;
    flex-wrap: wrap;
  }
  .filter-modern.nf-toggle-row .month-nav-inline { margin-left: 0 !important; }

  /* Botão "Filtros ▾" */
  .btn-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: 20px;
    background: #fff;
    color: var(--color-text);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .btn-filter-toggle.has-active,
  .btn-filter-toggle.is-open {
    border-color: var(--color-primary);
    background: #eff6ff;
    color: var(--color-primary);
  }
  .filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
  }

  /* Selects colapsáveis no mobile */
  .mobile-chips-wrapper {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    padding-top: 6px;
  }
  .mobile-chips-wrapper.is-open { display: flex; }

  /* ─── Financeiro: cada lançamento vira um card (lidera pela descrição) ─── */

  /* Container externo transparente — os cards ficam soltos */
  .tx-card-wrap {
    background: transparent !important;
    border: none !important;
  }
  .tx-card-wrap .table-responsive {
    overflow: visible !important;
    border-radius: 0 !important;
    padding: 4px 0 !important;
  }
  .tx-card-wrap .card-table { background: transparent !important; }

  /* Paginação ainda tem card */
  .tx-card-wrap .card-footer {
    background: #fff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    margin-top: 8px;
  }

  .tx-card-wrap .card-table thead { display: none !important; }
  .tx-card-wrap .card-table tbody { display: block; }

  .tx-card-wrap .transaction-row {
    display: grid !important;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    padding: 12px 14px !important;
    background: #fff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    margin-bottom: 8px;
  }
  .tx-card-wrap .transaction-row td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    vertical-align: top !important;
  }
  /* zera o acento vertical que o desktop põe na 1ª célula */
  .tx-card-wrap .transaction-row > td:first-child {
    border-left: none !important;
    padding-left: 0 !important;
  }

  /* Faixa colorida lateral no card inteiro */
  .tx-card-wrap .transaction-row.is-income   { border-left: 4px solid #2a9d8f !important; }
  .tx-card-wrap .transaction-row.is-expense  { border-left: 4px solid #e76f51 !important; }
  .tx-card-wrap .transaction-row.is-overdue  { border-left: 4px solid #dc2626 !important; }
  .tx-card-wrap .transaction-row.is-transfer { border-left: 4px solid #4a90d9 !important; }

  /* Descrição = título; cliente (se houver) abaixo; cat/date escondidos */
  .tx-card-wrap .td-desc   { grid-column: 1; grid-row: 1; }
  .tx-card-wrap .td-desc > div:first-child { font-size: .92rem !important; font-weight: 600; color: var(--color-heading); }
  .tx-card-wrap .td-client { grid-column: 1; grid-row: 2; padding-top: 2px !important; }
  .tx-card-wrap .td-client .fw-bold { font-size: .8rem !important; font-weight: 500 !important; color: var(--color-muted); }
  .tx-card-wrap .transaction-row .td-cat,
  .tx-card-wrap .transaction-row .td-date { display: none !important; }

  .tx-card-wrap .td-amount {
    grid-column: 2; grid-row: 1;
    text-align: right;
    white-space: nowrap;
    font-size: 1rem !important;
    font-weight: 700 !important;
  }
  .tx-card-wrap .td-status { grid-column: 2; grid-row: 2; text-align: right; align-self: start; padding-top: 4px !important; }

  /* Ações: rodapé do card */
  .tx-card-wrap .transaction-row td.actions-cell {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: auto !important;
    display: flex !important;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 10px !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-top: 8px;
  }
  .tx-card-wrap .row-actions { opacity: 1; }

  /* Reset decisivo do padding das células (vence o padding padrão da tabela) */
  .tx-card-wrap .card-table .transaction-row > td { padding-top: 0 !important; padding-bottom: 0 !important; }
  .tx-card-wrap .card-table .transaction-row > td.td-status { padding-top: 3px !important; }
  .tx-card-wrap .card-table .transaction-row > td.td-client { padding-top: 1px !important; }

  /* Data inline na descrição */
  .tx-date-mobile {
    font-size: .75rem;
    opacity: .7;
  }

  /* Cashflow grid: compacto */
  .cashflow-grid { gap: 8px !important; }
  .cashflow-cell { padding: 10px !important; }
  .cashflow-cell .cashflow-label { font-size: .62rem !important; }
  .cashflow-cell .cashflow-value { font-size: .9rem !important; }
}

/* ════════════════════════════════════════════════════════════════════
   Mobile: tabelas de listagem viram CARDS (padrão único do app)
   Aplica-se a qualquer <table class="… list-cards">. Cada linha = um card:
   1ª coluna = título; demais colunas = "Rótulo  valor"; ações = rodapé.
   Colunas .hide-mobile continuam ocultas.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  table.list-cards { display: block; }
  table.list-cards thead { display: none; }
  table.list-cards tbody { display: block; }

  table.list-cards > tbody > tr {
    display: block;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }

  /* Estado vazio (colspan) volta ao normal */
  table.list-cards > tbody > tr > td[colspan] {
    display: block !important;
    text-align: center;
  }
  table.list-cards > tbody > tr > td[colspan]::before { display: none; }

  table.list-cards > tbody > tr > td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 5px 0 !important;
    border: none !important;
    text-align: right;
    min-width: 0;
  }
  table.list-cards > tbody > tr > td::before {
    content: attr(data-label);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-muted);
    text-align: left;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* 1ª coluna = título do card (nome do cliente / contrato / domínio) */
  table.list-cards > tbody > tr > td:first-child {
    display: block;
    text-align: left;
    padding-bottom: 9px !important;
    margin-bottom: 7px;
    border-bottom: 1px solid #f1f5f9 !important;
  }
  table.list-cards > tbody > tr > td:first-child::before { display: none; }
  table.list-cards > tbody > tr > td:first-child .fw-bold { font-size: 1rem; }

  /* Coluna de ações = rodapé do card */
  table.list-cards > tbody > tr > td.actions-cell {
    width: auto !important;
    justify-content: flex-end;
    padding: 10px 0 0 !important;
    margin-top: 7px;
    border-top: 1px solid #f1f5f9 !important;
  }
  table.list-cards > tbody > tr > td.actions-cell::before { display: none; }
  table.list-cards .row-actions { gap: 8px; opacity: 1; }

  /* Valor/badge do lado direito não encolhem */
  table.list-cards > tbody > tr > td > .badge { flex-shrink: 0; }

  /* Filtro de período do Dashboard: presets em cima (rolam), datas embaixo */
  .dash-period-filter .filter-row {
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: visible !important;
    gap: 8px;
  }
  .dash-period-filter .segmented-control {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .dash-period-filter .segmented-control::-webkit-scrollbar { display: none; }
  .dash-period-filter .date-range-input { width: 100%; }
  .dash-period-filter .date-range-input input[type="date"] { flex: 1 1 0; min-width: 0; }

  /* Linhas que são lançamentos (Cobranças): acento colorido no card inteiro */
  table.list-cards > tbody > tr.transaction-row.is-income   { border-left: 4px solid #2a9d8f; }
  table.list-cards > tbody > tr.transaction-row.is-expense  { border-left: 4px solid #e76f51; }
  table.list-cards > tbody > tr.transaction-row.is-overdue  { border-left: 4px solid #dc2626; }
  table.list-cards .transaction-row > td:first-child {
    border-left: none !important;
    padding-left: 0 !important;
  }
}

/* ── Mobile: barra fixa compacta + drawer lateral ─────────────────────── */
@media (max-width: 991.98px) {

  /* ① Barra superior fixa e compacta
     z-index 1060: deve ser > backdrop (1045) para o drawer não ficar coberto */
  .navbar-vertical {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: auto !important;
    height: 52px !important;
    min-height: unset !important;
    width: 100% !important;
    overflow: visible !important;
    z-index: 1060;
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
  }

  .navbar-vertical .container-fluid {
    height: 52px;
    padding: 0 14px;
    flex-wrap: nowrap;
    align-items: center;
  }

  /* Logo menor */
  .navbar-vertical .navbar-brand-autodark img {
    height: 24px !important;
    max-width: 120px !important;
  }

  /* ② Empurra o conteúdo abaixo da barra fixa */
  .page-wrapper {
    margin-top: 52px !important;
  }

  /* ③ Drawer lateral — dentro do aside (z-index 1060), não precisa de z-index próprio */
  #sidebar-menu {
    position: fixed !important;
    top: 0; bottom: 0; left: 0;
    width: 272px;
    background: var(--color-sidebar-bg, #001433) !important;
    transform: translateX(-272px);
    transition: transform .27s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1065;            /* dentro do contexto do aside (1060): deve estar acima */
    display: block !important; /* sobrescreve o d-none do Bootstrap collapse */
    padding: 16px 0 32px;
    border-right: none !important;
  }

  #sidebar-menu.drawer-open {
    transform: translateX(0);
  }

  /* ④ Backdrop: z-index entre o conteúdo da página (0) e o aside (1060) */
  .jrw-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1055;
  }
  .jrw-backdrop.visible { display: block; }

  /* ⑤ Inputs com font-size 16px: impede zoom automático do iOS em formulários */
  input:not([type=range]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ⑥ Dashboard mobile: cards compactos em 2 colunas */
  .card-stat .card-body {
    padding: 0.85rem !important;
  }
  .card-stat .card-value {
    font-size: 1.15rem !important;
  }
  .card-stat .subheader {
    margin-bottom: 0.35rem !important;
    font-size: 0.65rem !important;
  }

  /* ⑦ Card saldo: compacto, description oculta no mobile */
  .dash-saldo-card .card-body {
    padding: 1rem !important;
  }
  .dash-saldo-value {
    font-size: 1.65rem !important;
  }
  .dash-saldo-desc {
    display: none;
  }
  .dash-saldo-meta {
    display: flex;
    gap: 16px;
    margin-top: 6px;
    font-size: .8rem;
  }
}

/* ── Animações suaves ────────────────────────────────────────────────── */
.card, .btn, .badge, .form-control, .form-select {
  transition: all var(--transition) !important;
}

/* Remove outline padrão do Tabler que fica feio */
*:focus { outline: none !important; }

/* ── Autocomplete ────────────────────────────────────────────────────── */
.autocomplete-wrap { position: relative; }

.autocomplete-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  z-index: 200;
  background: #fff;
  border: 1.5px solid var(--color-primary);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  max-height: 240px;
  overflow-y: auto;
  display: none;
}

.autocomplete-list.show { display: block; }

.autocomplete-item {
  padding: 0.55rem 0.9rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid #f1f5f9;
}

.autocomplete-item:last-child { border-bottom: none; }

.autocomplete-item:hover,
.autocomplete-item.ac-active {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.autocomplete-empty {
  padding: 0.6rem 0.9rem;
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* ── Busca na barra de filtros ──────────────────────────────────────── */
.filter-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.filter-search-icon {
  position: absolute;
  left: 0.65rem;
  color: var(--color-muted);
  pointer-events: none;
  z-index: 1;
}

.filter-search {
  background-image: none !important;  /* remove a seta de select */
  padding-left: 2rem !important;
  padding-right: 0.85rem !important;
  min-width: 160px;
  cursor: text !important;
}

.filter-search::placeholder { color: var(--color-muted); opacity: 1; }

/* ── Fluxo de caixa (Organizze-style) ──────────────────────────────── */
/* ── Cashflow redesign ────────────────────────────────────────────────── */

.cf-card { overflow: hidden; }

.cf-grid {
  display: flex;
  flex-direction: column;
}

/* ① Saldo anterior */
.cf-row-anterior {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
}

.cf-val-anterior {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
}

/* ② Fluxos: 2 colunas */
.cf-row-flows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--color-border);
}

.cf-col {
  padding: 14px 20px;
}

.cf-col-income {
  border-right: 1px solid var(--color-border);
}

.cf-col-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

.cf-col-income .cf-col-title { color: var(--color-income); }
.cf-col-expense .cf-col-title { color: var(--color-expense); }

.cf-item { margin-bottom: 8px; }
.cf-item:last-child { margin-bottom: 0; }

.cf-lbl {
  font-size: .72rem;
  font-weight: 500;
  text-transform: none; /* sentence case — metodologia: all-caps só em poucas palavras legíveis */
  letter-spacing: 0;
  color: var(--color-muted);
  margin-bottom: 1px;
}

.cf-lbl--forecast { opacity: .7; }

.cf-val {
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ③ Saldo final */
.cf-row-saldo {
  display: flex;
  gap: 28px;
  padding: 14px 20px;
  background: #f8fafc;
}

.cf-val-saldo {
  font-size: 1.1rem;
  font-weight: 700;
}

/* Cores */
.cf-green { color: var(--color-income); }
.cf-red   { color: var(--color-expense); }
.cf-blue  { color: var(--color-primary); }
.cf-muted { color: var(--color-muted) !important; }

/* ── Cashflow legacy (mantido para compatibilidade) ───────────────────── */
.cashflow-grid {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
}

.cashflow-col {
  padding: 0 1.5rem 0 0;
  flex-shrink: 0;
}

.cashflow-col--sep {
  padding-right: 1.5rem;
  margin-right: 1.5rem;
  border-right: 1px solid #f1f5f9;
}

.cashflow-row {
  display: flex;
  gap: 1.5rem;
}

.cashflow-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-muted);
  margin-bottom: 2px;
}

.cashflow-value {
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
  margin-bottom: .65rem;
}

.cashflow-value:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .cashflow-grid { flex-direction: column; gap: .75rem; }
  .cashflow-col--sep { border-right: none; border-bottom: 1px solid #f1f5f9;
                       padding-right: 0; margin-right: 0; padding-bottom: .75rem; margin-bottom: 0; }
  .cashflow-row { gap: 1rem; }
}

/* ── Badge de transferência (azure/azul) ────────────────────────────── */
.badge.bg-azure-lt {
  background: #e8f1fb !important;
  color: #1a6fc4 !important;
  border: 1px solid rgba(74,144,217,0.25) !important;
}

/* ── Saldo por conta — Dashboard ────────────────────────────────────── */
.dash-account-card {
  border-radius: 10px !important;
  border: 1.5px solid var(--color-border) !important;
  transition: box-shadow var(--transition);
}

.dash-account-card:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,0.08) !important;
}

.dash-acc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dash-acc-balance {
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

@media (max-width: 767.98px) {
  .dash-acc-balance { font-size: .9rem; }
}

/* ── Linha de transferência na listagem ─────────────────────────────── */
.transaction-row.is-transfer .td-amount {
  color: #1a6fc4 !important;
  font-weight: 600 !important;
}

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD — Redesign completo
   ════════════════════════════════════════════════════════════════ */

/* ── Section headers ─────────────────────────────────────────────── */
.dash-sh {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.dash-sh__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}
.dash-sh__line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.dash-sh__sub {
  font-size: 0.72rem;
  color: var(--color-muted);
  white-space: nowrap;
}

/* ── Row labels (Previsão / Realizado) ───────────────────────────── */
.dash-kpi-row-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  letter-spacing: 0.01em;
}

/* ── Saldo Total card ────────────────────────────────────────────── */
.dash-total-card {
  border-left: 4px solid #10b981 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}
.dash-total-card--neg {
  border-left-color: #ef4444 !important;
}
.dash-total__value {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-heading);
}
.dash-total__meta { margin-top: 0.75rem; }
.dash-total__meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
}
.dash-total__meta-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Account cards ───────────────────────────────────────────────── */
.dash-acc-card {
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  transition: box-shadow 0.15s;
}
.dash-acc-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
}
.dash-acc__value {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.dash-acc-default-badge {
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── KPI Cards base ──────────────────────────────────────────────── */
.dash-kpi {
  border-radius: 12px !important;
  border-top: 3px solid transparent !important;
  transition: transform 0.15s, box-shadow 0.15s;
}
.dash-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.10) !important;
}
.dash-kpi__icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-kpi__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-muted);
}
.dash-kpi__value {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-top: 0.2rem;
  white-space: nowrap;
}
.dash-kpi__sub {
  font-size: 0.7rem;
  color: var(--color-muted);
  margin-top: 0.25rem;
}

/* Linha "Fiscal (NF)" no card de Faturamento */
.dash-kpi__fiscal {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--color-border);
  font-size: 0.74rem;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.dash-kpi__fiscal-label { color: var(--color-muted); }
.dash-kpi__fiscal-value { font-weight: 700; color: var(--color-income); }
.dash-kpi__fiscal-gap   { color: #b45309; }

/* ── Teto anual do MEI ────────────────────────────────────────────── */
.dash-mei .card-body { padding: 1rem 1.25rem; }
.dash-mei__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}
.dash-mei__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.dash-mei__badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--color-income-bg);
  color: var(--color-income);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
}
.dash-mei__value { font-size: 1.05rem; font-weight: 700; color: var(--color-text); }
.dash-mei__limit { font-size: 0.85rem; font-weight: 500; color: var(--color-muted); }
.dash-mei__track {
  height: 9px;
  border-radius: 6px;
  background: #eef1f5;
  overflow: hidden;
}
.dash-mei__fill {
  height: 100%;
  border-radius: 6px;
  background: var(--color-income-mid);
  transition: width 0.4s ease;
}
.dash-mei__fill.is-warn   { background: #f59e0b; }
.dash-mei__fill.is-danger { background: #dc2626; }
.dash-mei__foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-size: 0.74rem;
  color: var(--color-muted);
}

/* ── A Receber — âmbar ───────────────────────────────────────────── */
.dash-kpi--toreceive { border-top-color: #f59e0b !important; }
.dash-kpi--toreceive .dash-kpi__icon  { background: #fef9ee; color: #b45309; }
.dash-kpi--toreceive .dash-kpi__label { color: #b45309; }
.dash-kpi--toreceive .dash-kpi__value { color: #92400e; }

/* ── A Pagar — vermelho ──────────────────────────────────────────── */
.dash-kpi--topay { border-top-color: #ef4444 !important; }
.dash-kpi--topay .dash-kpi__icon  { background: #fef2f2; color: #dc2626; }
.dash-kpi--topay .dash-kpi__label { color: #dc2626; }
.dash-kpi--topay .dash-kpi__value { color: #b91c1c; }

/* ── Saldo Previsto — azul ───────────────────────────────────────── */
.dash-kpi--forecast { border-top-color: #3b82f6 !important; }
.dash-kpi--forecast .dash-kpi__icon  { background: #eff6ff; color: #2563eb; }
.dash-kpi--forecast .dash-kpi__label { color: #2563eb; }
.dash-kpi--forecast .dash-kpi__value { color: #1d4ed8; }
.dash-kpi--forecast-neg .dash-kpi__icon { background: #fef2f2; color: #dc2626; }

/* ── Recebido — verde ────────────────────────────────────────────── */
.dash-kpi--received {
  border-top-color: #10b981 !important;
  background: #f0fdf9 !important;
}
.dash-kpi--received .dash-kpi__icon  { background: #d1fae5; color: #047857; }
.dash-kpi--received .dash-kpi__label { color: #047857; }
.dash-kpi--received .dash-kpi__value { color: #065f46; }

/* ── Pago — rosa/vermelho ────────────────────────────────────────── */
.dash-kpi--paid {
  border-top-color: #f43f5e !important;
  background: #fff1f3 !important;
}
.dash-kpi--paid .dash-kpi__icon  { background: #ffe4e8; color: #be123c; }
.dash-kpi--paid .dash-kpi__label { color: #be123c; }
.dash-kpi--paid .dash-kpi__value { color: #9f1239; }

/* ── Atrasados — alerta ──────────────────────────────────────────── */
.dash-kpi--overdue { border-top-color: #dc2626 !important; }
.dash-kpi--overdue .dash-kpi__icon  { background: #fee2e2; color: #dc2626; }
.dash-kpi--overdue .dash-kpi__label { color: #dc2626; }
.dash-kpi--overdue.has-overdue { background: #fff1f2 !important; }

.dash-overdue-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 10px;
  background: #dc2626;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0 4px;
}

/* ── Gráficos — dot colorido no header ───────────────────────────── */
.dash-chart-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Ícone no novo layout (top-right, menor) ─────────────────────── */
.dash-kpi__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Wrapper do gráfico de barras (altura explícita) ─────────────── */
.dash-chart-bar-wrap {
  position: relative;
  height: 260px;
}

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD v2.1 — Visão estratégica (Faturamento, Resultado, MRR)
   ════════════════════════════════════════════════════════════════ */

/* ── Badge de variação (↑ 12% vs maio) ───────────────────────────── */
.dash-delta {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.dash-delta--up   { background: #d1fae5; color: #047857; }
.dash-delta--down { background: #fee2e2; color: #b91c1c; }

/* ── Faturamento — azul primário (KPI estrela) ───────────────────── */
.dash-kpi--faturamento { border-top-color: var(--color-primary) !important; }
.dash-kpi--faturamento .dash-kpi__icon  { background: var(--color-primary-bg); color: var(--color-primary); }
.dash-kpi--faturamento .dash-kpi__label { color: var(--color-primary); }
.dash-kpi--faturamento .dash-kpi__value { color: var(--color-heading); }

/* ── Resultado — verde quando positivo, vermelho quando negativo ── */
.dash-kpi--resultado { border-top-color: #10b981 !important; }
.dash-kpi--resultado .dash-kpi__icon  { background: #d1fae5; color: #047857; }
.dash-kpi--resultado .dash-kpi__label { color: #047857; }
.dash-kpi--resultado .dash-kpi__value { color: #065f46; }

.dash-kpi--resultado-neg { border-top-color: #ef4444 !important; }
.dash-kpi--resultado-neg .dash-kpi__icon  { background: #fee2e2; color: #dc2626; }
.dash-kpi--resultado-neg .dash-kpi__label { color: #dc2626; }
.dash-kpi--resultado-neg .dash-kpi__value { color: #b91c1c; }

/* ── Contas dentro do card de Saldo Total ────────────────────────── */
.dash-acc-list {
  border-top: 1px solid var(--color-border);
  padding-top: 0.5rem;
}
.dash-acc-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.4rem 0;
}
.dash-acc-row + .dash-acc-row {
  border-top: 1px dashed var(--color-border);
}
.dash-acc-row__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-acc-row__name { color: var(--color-muted); }
.dash-acc-row__value {
  margin-left: auto;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── Card MRR — receita recorrente ───────────────────────────────── */
.dash-mrr-card {
  border-left: 4px solid #8b5cf6 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}
.dash-mrr__icon {
  background: #f3eeff;
  color: #7c3aed;
}
.dash-mrr-card .dash-kpi__label { color: #7c3aed; }

/* ── Cards do dashboard: flat (sem borda colorida de destaque, sem sombra) ──
   Mantém os textos/ícones coloridos; remove só as "bordinhas" e sombras.   */
.dash-total-card,
.dash-mrr-card,
.dash-kpi,
.dash-kpi[class*="dash-kpi--"] {
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}
.dash-total-card:hover,
.dash-mrr-card:hover,
.dash-kpi:hover {
  transform: none !important;
  box-shadow: none !important;
}

.dash-mrr__value {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--color-heading);
}
.dash-mrr__permonth {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: 0;
  margin-left: 2px;
}

/* ── Resumo "Próximos 30 dias" (dentro do card MRR) ──────────────── */
.dash-next30 {
  border-top: 1px solid var(--color-border);
  font-size: 0.82rem;
}
.dash-next30__title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 0.35rem;
}
.dash-next30__item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.dash-next30__link {
  font-size: 0.78rem;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}
.dash-next30__link:hover { text-decoration: underline; }

/* ── Top Clientes — barras horizontais ───────────────────────────── */
.dash-tc-row { padding: 0.45rem 0; }
.dash-tc-row + .dash-tc-row { border-top: 1px solid #f1f5f9; }
.dash-tc-row__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-heading);
}
.dash-tc-row__value {
  font-size: 0.85rem;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.dash-tc-row__share {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-muted);
  min-width: 34px;
  text-align: right;
}
.dash-tc-bar {
  height: 6px;
  border-radius: 4px;
  background: #eef2f7;
  margin-top: 5px;
  overflow: hidden;
}
.dash-tc-bar__fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--color-primary), #5b9cf6);
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .dash-total__value       { font-size: 1.5rem; }
  .dash-kpi__value         { font-size: 1.15rem; }
  .dash-acc__value         { font-size: 1rem; }
  .dash-kpi__icon          { width: 28px; height: 28px; border-radius: 7px; }
  .dash-kpi__icon svg      { width: 14px; height: 14px; }
  .dash-kpi .card-body     { padding: 0.85rem !important; }
  .dash-sh__sub            { display: none; }
  .dash-chart-bar-wrap     { height: 200px; }
  .dash-mrr__value         { font-size: 1.4rem; }
  .dash-next30 .d-flex     { gap: 0.75rem !important; }
  .dash-next30__link       { margin-left: 0 !important; width: 100%; }
}

/* Título de seção de formulário (usado no form de cliente, página e modal) */
.form-section-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted);
  margin-bottom: .75rem;
}
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }