/* ═══════════════════════════════════════════════════════════
   Urban Land Financeiro — Temas claro (padrão) e escuro
   Paleta do Manual da Marca (Agência Três):
     Roxo    Pantone 7671 C  #574790  (rgb 87, 71, 144)
     Violeta Pantone 7442 C  #9339F1  (rgb 147, 57, 241)
     Laranja Pantone 7417 C  #FF6400  (rgb 255, 100, 0)
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Tipografia (marca: Filson Pro → substituta livre Poppins + Arial) ── */
  --font-head: 'Poppins', 'Filson Pro', Arial, system-ui, sans-serif;
  --font-body: 'Poppins', 'Filson Pro', Arial, system-ui, sans-serif;

  /* ── App shell (sidebar) — TEMA CLARO: clara, estilo CRM ── */
  --shell-bg:         #FFFFFF;
  --shell-border:     #E7E7EF;
  --shell-fg:         #4A4A5E;
  --shell-fg-muted:   #8B8B9E;
  --shell-hover:      #F4F2FA;
  --shell-active-bg:  #F0ECFB;
  --shell-active-fg:  #574790;

  /* ── Topbar — TEMA CLARO: branca ── */
  --topbar-bg:        #FFFFFF;
  --topbar-fg:        #1E1733;
  --topbar-fg-muted:  #6B6383;
  --topbar-border:    #E7E7EF;
  --topbar-hover:     rgba(87,71,143,.08);

  /* ── Marca (roxo) — TEMA CLARO (padrão) ── */
  --brand-primary:    #574790;   /* Pantone 7671 C */
  --brand-secondary:  #6D4FB8;
  --brand-light:      #9339F1;   /* Pantone 7442 C — violeta vibrante */
  --brand-dark:       #3F3270;
  --brand-accent:     #FF6400;   /* Pantone 7417 C — laranja */

  /* ── Conteúdo — TEMA CLARO (neutros alinhados ao CRM) ── */
  --bg-base:          #F4F5F9;
  --bg-sidebar:       var(--shell-bg);
  --bg-card:          #FFFFFF;
  --bg-card-hover:    #F8F8FC;
  --bg-input:         #FFFFFF;
  --bg-table-head:    #F8F8FC;
  --bg-table-row:     #FFFFFF;
  --bg-table-hover:   #F8F8FC;

  --border-color:     #E7E7EF;
  --border-subtle:    #EFEFF4;

  --text-primary:     #1E1733;
  --text-secondary:   #564E70;
  --text-muted:       #8B8399;
  --text-link:        #6D4FB8;

  /* Semantic (funcionais — tons p/ fundo claro) */
  --color-green:      #16a34a;  --color-green-bg:  rgba(22,163,74,.12);
  --color-red:        #dc2626;  --color-red-bg:    rgba(220,38,38,.12);
  --color-blue:       #2563eb;  --color-blue-bg:   rgba(37,99,235,.12);
  --color-yellow:     #d97706;  --color-yellow-bg: rgba(217,119,6,.14);
  --color-gray-bg:    rgba(100,90,120,.10);

  /* ── Gráficos (Chart.js) — padrão claro/escuro ──
     Séries (datasets): cores FIXAS, legíveis nos 2 temas:
       positivo = verde | negativo = vermelho
       destaque (lucro/margem) = violeta da marca | apoio = laranja da marca
     Cromo (grade/eixos/tooltip): muda com o tema (sobrescrito no escuro). */
  --chart-pos:            #16a34a;
  --chart-pos-bg:         rgba(34,197,94,.70);
  --chart-neg:            #dc2626;
  --chart-neg-bg:         rgba(239,68,68,.65);
  --chart-destaque:       #9339F1;              /* violeta Pantone 7442 C */
  --chart-destaque-bg:    rgba(147,57,241,.55);
  --chart-destaque-fill:  rgba(147,57,241,.12);
  --chart-accent:         #FF6400;              /* laranja Pantone 7417 C */
  --chart-accent-bg:      rgba(255,100,0,.55);
  --chart-grid:           rgba(87,71,144,.12);
  --chart-tick:           #8B8399;
  --chart-tooltip-bg:     #FFFFFF;
  --chart-tooltip-border: #E2DCF0;
  --chart-tooltip-title:  #1E1733;
  --chart-tooltip-body:   #564E70;

  /* Sidebar */
  --sidebar-w:        248px;

  /* Layout */
  --topbar-h:         64px;
  --radius:           8px;
  --radius-sm:        5px;
  --radius-lg:        12px;
  --shadow:           0 2px 12px rgba(80,60,130,.12);
  --shadow-lg:        0 8px 32px rgba(80,60,130,.20);

  /* Transitions */
  --transition:       all .15s ease;
}

/* ════════ TEMA ESCURO (roxo) ════════ */
[data-theme="dark"] {
  /* shell (sidebar) escuro */
  --shell-bg:         #15102A;
  --shell-border:     #2C2347;
  --shell-fg:         #ECE7F7;
  --shell-fg-muted:   #A99FC8;
  --shell-hover:      rgba(255,255,255,.06);
  --shell-active-bg:  rgba(147,57,241,.20);
  --shell-active-fg:  #C9A9FF;

  /* topbar escura */
  --topbar-bg:        #181228;
  --topbar-fg:        var(--shell-fg);
  --topbar-fg-muted:  var(--shell-fg-muted);
  --topbar-border:    var(--shell-border);
  --topbar-hover:     var(--shell-hover);

  --brand-primary:    #9339F1;
  --brand-secondary:  #A35CF5;
  --brand-light:      #B98BFF;
  --brand-dark:       #574790;

  --bg-base:          #0E0A1C;
  --bg-card:          #181228;
  --bg-card-hover:    #211836;
  --bg-input:         #1B1430;
  --bg-table-head:    #15102A;
  --bg-table-row:     #181228;
  --bg-table-hover:   #211836;

  --border-color:     #2C2347;
  --border-subtle:    #1F1836;

  --text-primary:     #ECE8F6;
  --text-secondary:   #B4AACB;
  --text-muted:       #807695;
  --text-link:        #B98BFF;

  --color-green:      #22c55e;  --color-green-bg:  rgba(34,197,94,.14);
  --color-red:        #ef4444;  --color-red-bg:    rgba(239,68,68,.14);
  --color-blue:       #60a5fa;  --color-blue-bg:   rgba(96,165,250,.14);
  --color-yellow:     #f59e0b;  --color-yellow-bg: rgba(245,158,11,.14);
  --color-gray-bg:    rgba(148,163,184,.10);

  /* Gráficos — cromo no tema escuro */
  --chart-grid:           rgba(255,255,255,.06);
  --chart-tick:           #B4AACB;
  --chart-tooltip-bg:     #211836;
  --chart-tooltip-border: #2C2347;
  --chart-tooltip-title:  #ECE8F6;
  --chart-tooltip-body:   #B4AACB;

  --shadow:           0 2px 12px rgba(0,0,0,.45);
  --shadow-lg:        0 8px 32px rgba(0,0,0,.6);
}

/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;   /* a página não rola na horizontal; tabelas largas rolam no próprio .table-responsive */
}

h1, h2, h3, h4, h5, .page-title-group, .logo-name,
.card-title, .modal-header h3, .panel-title {
  font-family: var(--font-head);
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--brand-light); }

/* ─── Layout ───────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--shell-border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform .25s ease;
}

.main-wrapper {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;   /* deixa os filhos (topbar/tabelas) encolherem em vez de empurrar a página */
}

/* ─── Sidebar Header ───────────────────────────────────────── */
.sidebar-header {
  /* marca no topo, como no CRM (sem divisor); alinhada com os ícones do menu */
  display: flex;
  align-items: center;
  padding: 1.4rem 1.35rem 1rem;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  width: 36px; height: 36px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
/* símbolo roxo no tema claro, branco no escuro (a sidebar agora é clara) */
.logo-icon--dark { display: none; }
[data-theme="dark"] .logo-icon--light { display: none; }
[data-theme="dark"] .logo-icon--dark  { display: block; }

.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-name { font-weight: 700; font-size: 1.07rem; color: var(--text-primary); }
.logo-tagline { font-size: .75rem; font-weight: 500; color: var(--shell-fg-muted); }

/* ─── Sidebar Nav ───────────────────────────────────────────── */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: .75rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.nav-section { margin-bottom: .5rem; }

.nav-section-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 1rem .85rem .4rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--shell-fg-muted);
  cursor: pointer;
  user-select: none;
}
.nav-section-label::after {
  content: '▾';
  margin-left: auto;
  font-size: .8rem;
  transition: transform .15s ease;
}
.nav-section.collapsed .nav-section-label::after { transform: rotate(-90deg); }
.nav-section.collapsed .nav-item { display: none; }
.nav-section-label:hover { color: var(--shell-fg); }
/* No trilho de ícones (drawer aberto), sempre mostra os ícones */
body.drawer-open .nav-section.collapsed .nav-item { display: flex; }

/* Pílulas da navegação (formato/tamanho do CRM) */
.nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1px .6rem;
  padding: .62rem .75rem;
  border-radius: 8px;
  color: var(--shell-fg);
  font-size: .92rem;
  font-weight: 500;
  transition: var(--transition);
}

.nav-item svg { width: 19px; height: 19px; flex-shrink: 0; opacity: .85; }

.nav-item:hover {
  color: var(--shell-fg);
  background: var(--shell-hover);
}

.nav-item.active {
  color: var(--shell-active-fg);
  background: var(--shell-active-bg);
  font-weight: 600;
}

.nav-item.active svg { opacity: 1; }

/* ─── Sidebar Footer (Sair) ─────────────────────────────────── */
.sidebar-footer {
  padding: .5rem 0;
  border-top: 1px solid var(--shell-border);
}
.logout-link:hover { color: var(--color-red); background: var(--color-red-bg); }

.user-info { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; }

.user-avatar {
  width: 32px; height: 32px;
  /* mesmo gradiente da marca usado no CRM (fixo nos dois temas) */
  background: linear-gradient(150deg, #574790 0%, #9339F1 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; color: #fff;
  flex-shrink: 0;
}

.user-avatar--sm { width: 28px; height: 28px; font-size: .75rem; }

.user-details { display: flex; flex-direction: column; min-width: 0; }
.user-name { font-size: .8rem; font-weight: 600; color: var(--shell-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: .68rem; color: var(--shell-fg-muted); }

.logout-btn {
  color: var(--shell-fg-muted);
  transition: var(--transition);
  padding: .25rem;
  border-radius: var(--radius-sm);
}
.logout-btn svg { width: 15px; height: 15px; display: block; }
.logout-btn:hover { color: var(--color-red); background: var(--color-red-bg); }

/* ─── Topbar ────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.75rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

.sidebar-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--topbar-fg-muted); padding: .25rem;
  display: flex; align-items: center;   /* sempre visível: recolhe o menu */
}
.sidebar-toggle svg { width: 20px; height: 20px; }
.sidebar-toggle:hover { color: var(--topbar-fg); }

.topbar-title { min-width: 0; overflow: hidden; }
.page-title-group {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 19px; color: var(--topbar-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-actions { flex-shrink: 0; }
.page-title-group svg { width: 22px; height: 22px; color: var(--brand-primary); }

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .75rem; }

/* Usuário no canto superior direito (estilo CRM) */
.topbar-user { display: flex; align-items: center; gap: .6rem; padding-left: .35rem; }
.topbar-user-info { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
.topbar-user-name { font-size: .8rem; font-weight: 600; color: var(--topbar-fg); white-space: nowrap; }
.topbar-user-role { font-size: .68rem; color: var(--topbar-fg-muted); white-space: nowrap; }
@media (max-width: 700px) { .topbar-user-info { display: none; } }

/* Botão de alternar tema (claro/escuro) — dimensões do CRM (38px) */
.theme-toggle {
  background: var(--bg-card); border: 1px solid var(--topbar-border);
  color: var(--topbar-fg); cursor: pointer;
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
/* Avatar no topbar com o mesmo tamanho do CRM (38px) */
.topbar-actions .user-avatar { width: 38px; height: 38px; font-size: .9rem; }
.theme-toggle:hover { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ─── Sino de notificações (topbar) ─────────────────────────── */
.notif-wrap { position: relative; }
.notif-bell { position: relative; }
.notif-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: #dc2626; color: #fff;
  border-radius: 999px; font-size: .66rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; line-height: 1;
}
.notif-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1200;
  width: 360px; max-width: calc(100vw - 24px);
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); box-shadow: 0 12px 32px rgba(0,0,0,.18);
  overflow: hidden;
}
.notif-head {
  padding: .65rem .9rem; font-weight: 600; font-size: .85rem;
  border-bottom: 1px solid var(--border-color); color: var(--text-primary);
}
.notif-body { max-height: 420px; overflow-y: auto; }
.notif-grupo-titulo {
  padding: .5rem .9rem .3rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary);
}
.notif-item {
  display: block; padding: .45rem .9rem; font-size: .8rem;
  color: var(--text-primary); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.notif-item:hover { background: var(--bg-hover, rgba(87,71,144,.08)); }
.notif-mais {
  display: block; padding: .4rem .9rem .6rem; font-size: .75rem;
  color: var(--brand-primary); text-decoration: none; font-weight: 600;
}
.notif-empty { padding: 1rem .9rem; font-size: .8rem; color: var(--text-secondary); }

/* ─── Content ───────────────────────────────────────────────── */
.content {
  flex: 1;
  padding: 1.75rem;
  max-width: none;   /* usa toda a largura disponível (antes travava em 1600px) */
  width: 100%;
}

/* ─── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card--chart { display: flex; flex-direction: column; }
.card--wide { flex: 2; }
.card--full { width: 100%; }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.card-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Corpo de card com espaçamento padrão (quando o conteúdo não é tabela full-bleed) */
.card-body { padding: 1.25rem 1.5rem; }

/* ─── KPI Grid ───────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
}

.kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
}

.kpi-label { font-size: .75rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }

.kpi-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.kpi-icon svg { width: 16px; height: 16px; }
.kpi-icon--green { background: var(--color-green-bg); color: var(--color-green); }
.kpi-icon--red   { background: var(--color-red-bg);   color: var(--color-red);   }
.kpi-icon--blue  { background: var(--color-blue-bg);  color: var(--color-blue);  }
.kpi-icon--yellow{ background: var(--color-yellow-bg);color: var(--color-yellow);}

.kpi-value { font-size: 1.5rem; font-weight: 700; margin-bottom: .5rem; }
.kpi-value--green { color: var(--color-green); }
.kpi-value--red   { color: var(--color-red);   }
.kpi-value--blue  { color: var(--color-blue);  }

.kpi-sub { display: flex; gap: .5rem; align-items: center; font-size: .75rem; margin-bottom: .5rem; }

.kpi-bar { height: 4px; background: var(--bg-input); border-radius: 2px; margin-top: .5rem; overflow: hidden; }
.kpi-bar-fill { height: 100%; border-radius: 2px; transition: width .4s ease; }
.kpi-bar-fill--green { background: var(--color-green); }
.kpi-bar-fill--red   { background: var(--color-red);   }

/* ─── Charts Grid ───────────────────────────────────────────── */
.charts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.bottom-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
}

.chart-container {
  padding: 1rem;
  position: relative;
  height: 240px;
}

.chart-container--horizontal { height: 400px; }

.chart-legend {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}

.legend-item {
  font-size: .72rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  color: var(--text-muted);
}

.legend-item::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.legend-item--green::before      { background: var(--color-green); }
.legend-item--green-light::before{ background: rgba(34,197,94,.4); border: 1px dashed var(--color-green); }
.legend-item--red::before        { background: var(--color-red); }
.legend-item--red-light::before  { background: rgba(239,68,68,.4); border: 1px dashed var(--color-red); }
.legend-item--blue::before       { background: var(--color-blue); }

/* ─── Categoria List ────────────────────────────────────────── */
.categoria-list { padding: .75rem 1.25rem; }

.categoria-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: .15rem .5rem;
  margin-bottom: .75rem;
}

.categoria-info { display: contents; }
.categoria-nome { font-size: .82rem; color: var(--text-primary); }
.categoria-valor { font-size: .82rem; font-weight: 600; color: var(--color-green); text-align: right; }

.categoria-bar-bg {
  grid-column: 1; height: 4px;
  background: var(--bg-input);
  border-radius: 2px; overflow: hidden;
}
.categoria-bar-fill { height: 100%; background: var(--brand-secondary); border-radius: 2px; }
.categoria-pct { grid-column: 2; font-size: .7rem; color: var(--text-muted); text-align: right; }

/* ─── Projeto List ──────────────────────────────────────────── */
.projeto-list { padding: .75rem 1.25rem; }
.projeto-item { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--border-subtle); }
.projeto-item:last-child { border: none; }
.projeto-rank { font-size: 1rem; font-weight: 700; color: var(--brand-primary); min-width: 28px; }
.projeto-info { flex: 1; display: flex; justify-content: space-between; }
.projeto-nome { font-size: .85rem; color: var(--text-primary); }
.projeto-valor { font-size: .85rem; font-weight: 600; color: var(--color-green); }

/* ─── Tables ────────────────────────────────────────────────── */
.table-responsive { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}

.table th {
  background: var(--bg-table-head);
  color: var(--text-muted);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .7rem 1rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-color);
}

.table td {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.table--hover tbody tr:hover { background: var(--bg-table-hover); }

/* ─── DRE Table ─────────────────────────────────────────────── */
.table--dre th { font-size: .7rem; padding: .5rem .75rem; }
.table--dre td { padding: .45rem .75rem; font-size: .8rem; }

.dre-col-item { min-width: 220px; }
.dre-col-mes  { min-width: 90px; text-align: right; }
.dre-col-total{ min-width: 110px; text-align: right; }

.dre-item-nome { font-size: .8rem; }
.dre-valor { text-align: right; font-variant-numeric: tabular-nums; }
.dre-total { font-weight: 700; border-left: 1px solid var(--border-color); }

.dre-row--receita  { }
.dre-row--despesa  { color: var(--text-secondary); }
.dre-row--resultado { background: var(--bg-table-head); }
.dre-row--highlight {
  background: rgba(147,57,241,.08);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.dre-row--highlight .dre-item-nome { font-weight: 700; color: var(--text-primary); }
.dre-row--sub .dre-item-nome { padding-left: 1.5rem; color: var(--text-secondary); font-size: .78rem; }
.dre-item--resultado { font-weight: 700; }
.dre-row--margem { font-style: italic; color: var(--text-muted); background: transparent; }

/* ─── Badges ────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge--green  { background: var(--color-green-bg);  color: var(--color-green); }
.badge--red    { background: var(--color-red-bg);    color: var(--color-red); }
.badge--blue   { background: var(--color-blue-bg);   color: var(--color-blue); }
.badge--yellow { background: var(--color-yellow-bg); color: var(--color-yellow); }
.badge--gray   { background: var(--color-gray-bg);   color: var(--text-muted); }

/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .82rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  text-decoration: none;
  font-family: inherit;
}

.btn-primary {
  background: var(--brand-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-secondary); color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.btn-ghost:hover { background: var(--bg-card-hover); color: var(--text-primary); }

.btn-sm  { padding: .35rem .75rem; font-size: .78rem; }
.btn-lg  { padding: .7rem 1.5rem; font-size: .9rem; }
.btn-xs  { padding: .2rem .5rem; font-size: .72rem; }
.btn-full{ width: 100%; justify-content: center; }

/* ─── Forms ─────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group--full { grid-column: 1 / -1; }
.form-group--sm { min-width: 140px; }

.form-group label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.form-input {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: .85rem;
  padding: .55rem .75rem;
  font-family: inherit;
  transition: var(--transition);
  width: 100%;
}

.form-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px rgba(147,57,241,.2);
}

.form-input::placeholder { color: var(--text-muted); }

select.form-input { cursor: pointer; }

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1.25rem;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border-subtle);
}

.form-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }

.form-page { max-width: 800px; }
.form-card { }

.filter-form { padding: 1rem 1.25rem; }
.filter-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.align-end { align-self: flex-end; }

.form-check-row { display: flex; align-items: center; margin: .5rem 0; }
.checkbox-label { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .82rem; color: var(--text-secondary); }
.checkbox-label input { width: 14px; height: 14px; accent-color: var(--brand-primary); }

/* ─── Period Selector ───────────────────────────────────────── */
.period-selector { display: flex; align-items: center; gap: .5rem; }
.period-label { font-size: .85rem; font-weight: 600; color: var(--text-primary); min-width: 120px; text-align: center; }
.period-form { display: flex; align-items: center; gap: .5rem; }
/* Data do "ver dia" digitável direto na topbar. O flatpickr copia a classe para
   o campo visível, que também herda .form-control (100% de largura) — daí o
   seletor mais específico para caber na barra. */
/* ⚠ precisa vencer `.date-clear-wrap input { width:100% }`, definido depois */
input.period-date,
.date-clear-wrap input.period-date {
  width: 104px; min-width: 0; text-align: center;
  font-size: .82rem; font-weight: 600;
  padding: .3rem .4rem;
}
.period-selector .date-clear-wrap { width: auto; flex: none; }
.date-clear-wrap input.period-date:focus { border-color: var(--brand-primary); }

.select-sm {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: .78rem;
  padding: .3rem .6rem;
  font-family: inherit;
  cursor: pointer;
}
.select-sm:focus { outline: none; border-color: var(--brand-primary); }

/* ─── Summary Bar ───────────────────────────────────────────── */
.summary-bar {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
}

.summary-item { display: flex; gap: .4rem; align-items: center; font-size: .82rem; }

/* ─── CRM — funil (kanban) no layout do Financeiro ──────────── */
.kanban { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.kanban-col {
  flex: 0 0 272px; background: var(--bg-table-head);
  border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; max-height: calc(100vh - 220px);
}
.kanban-col-head { display: flex; align-items: center; gap: .5rem; padding: .7rem .85rem; border-bottom: 1px solid var(--border-color); }
.kanban-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.kanban-col-nome { font-weight: 600; font-size: .85rem; color: var(--text-primary); }
.kanban-col-count { margin-left: auto; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 999px; padding: 0 .5rem; font-size: .72rem; color: var(--text-muted); font-weight: 600; }
.kanban-col-total { padding: .4rem .85rem; font-size: .78rem; color: var(--text-muted); font-weight: 600; }
.kanban-col-body { padding: .6rem; overflow-y: auto; flex: 1; min-height: 60px; display: flex; flex-direction: column; gap: .5rem; }
.kanban-col-body.drag-over { background: var(--bg-card-hover); }
.deal-card {
  display: block; background: var(--bg-card); border: 1px solid var(--border-color);
  border-left: 3px solid var(--brand-primary); border-radius: var(--radius);
  padding: .7rem .8rem; box-shadow: var(--shadow); cursor: grab; text-decoration: none;
}
.deal-card:hover { background: var(--bg-card-hover); }
.deal-card.dragging { opacity: .5; }
.deal-title { font-weight: 600; font-size: .85rem; color: var(--text-primary); margin-bottom: .2rem; }
.deal-valor { color: var(--brand-accent); font-weight: 700; font-size: .85rem; }
.deal-meta { color: var(--text-muted); font-size: .75rem; margin-top: .25rem; }

/* ─── Flash Messages ────────────────────────────────────────── */
.flash-container { padding: 0 1.5rem .5rem; }

.flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .82rem;
  margin-bottom: .4rem;
}

.flash button { background: none; border: none; cursor: pointer; opacity: .6; font-size: .9rem; color: inherit; }
.flash button:hover { opacity: 1; }

.flash-success { background: var(--color-green-bg); color: var(--color-green); border: 1px solid rgba(34,197,94,.25); }
.flash-danger  { background: var(--color-red-bg);   color: var(--color-red);   border: 1px solid rgba(239,68,68,.25); }
.flash-warning { background: var(--color-yellow-bg);color: var(--color-yellow);border: 1px solid rgba(245,158,11,.25); }
.flash-info    { background: var(--color-blue-bg);  color: var(--color-blue);  border: 1px solid rgba(96,165,250,.25); }

/* ─── Alerts ────────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem 1.1rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  font-size: .85rem;
}

.alert--warning { background: rgba(120,60,10,.2); border: 1px solid rgba(245,158,11,.35); color: var(--color-yellow); }
.alert--success { background: rgba(22,163,74,.10); border: 1px solid rgba(22,163,74,.35); color: var(--color-green, #16a34a); }
.alert-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: .1rem; }
.alert strong { display: block; font-weight: 600; margin-bottom: .15rem; }

/* ─── Fluxo de Caixa ─────────────────────────────────────────── */
.fluxo-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.fluxo-card-saldo, .fluxo-card-projetado {
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.fluxo-saldo-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.fluxo-saldo-valor { font-size: 1.6rem; font-weight: 700; }
.fluxo-saldo-data  { font-size: .72rem; color: var(--text-muted); }

.fluxo-card-receitas { padding: 1.1rem 1.25rem; }
.fluxo-rec-header { display: flex; justify-content: space-between; margin-bottom: .75rem; font-size: .9rem; }

.fluxo-progress-bar {
  height: 10px;
  background: var(--color-red-bg);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: .5rem;
  display: flex;
}
.fluxo-progress-green {
  background: rgba(34,197,94,.25);
  height: 100%;
  display: flex;
  transition: width .4s;
}
.fluxo-progress-real { background: var(--color-green); height: 100%; border-radius: 5px 0 0 5px; }
.fluxo-progress-labels { display: flex; justify-content: space-between; }
.fluxo-progress-labels > div { display: flex; gap: .4rem; align-items: center; }

.fluxo-main-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
}

.fluxo-chart-card { display: flex; flex-direction: column; }
.fluxo-calendario-card { display: flex; flex-direction: column; }

/* ─── Calendário ────────────────────────────────────────────── */
.calendario { padding: .5rem; }

.calendario-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 2px;
}

.cal-weekday {
  text-align: center;
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: .35rem;
  text-transform: uppercase;
}

.calendario-body { display: flex; flex-direction: column; gap: 2px; }

.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.cal-day {
  background: var(--bg-input);
  border-radius: 4px;
  padding: .35rem .4rem;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid transparent;
  font-size: .68rem;
  transition: var(--transition);
}

.cal-day:hover { border-color: var(--border-color); background: var(--bg-card-hover); }

.cal-day--empty { background: transparent; border: none; }

.cal-day--negativo { border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.05); }

.cal-day-num {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.cal-lc {
  padding: .15rem .3rem;
  border-radius: 3px;
  font-size: .64rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-lc--entrada { background: var(--color-green-bg); color: var(--color-green); }
.cal-lc--saida   { background: var(--color-red-bg);   color: var(--color-red); }
.cal-lc--previsto { opacity: .6; font-style: italic; }
.cal-lc-mais { font-size: .6rem; color: var(--text-muted); }

.cal-day-saldo {
  margin-top: auto;
  font-size: .64rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
  padding-top: 2px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.cal-saldo--neg { color: var(--color-red); }
.icon-warn { width: 10px; height: 10px; flex-shrink: 0; }

/* ─── Tipo Selector (Form Lançamento) ───────────────────────── */
.tipo-selector {
  display: flex;
  gap: .75rem;
  padding: 1.25rem 1.25rem .5rem;
}

.tipo-option {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.2rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .85rem;
  color: var(--text-secondary);
  transition: var(--transition);
}
.tipo-option input { display: none; }
.tipo-option svg { width: 16px; height: 16px; }
.tipo-option:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.tipo-option.active {
  font-weight: 600;
}
#lbl-entrada.active {
  border-color: var(--color-green);
  background: var(--color-green-bg);
  color: var(--color-green);
}
#lbl-entrada:hover { border-color: var(--color-green); color: var(--color-green); }
#lbl-saida.active {
  border-color: var(--color-red);
  background: var(--color-red-bg);
  color: var(--color-red);
}
#lbl-saida:hover { border-color: var(--color-red); color: var(--color-red); }

/* ─── User Cell ─────────────────────────────────────────────── */
.user-cell { display: flex; align-items: center; gap: .6rem; }

/* ─── Action Buttons ────────────────────────────────────────── */
.action-btns { display: flex; gap: .25rem; align-items: center; }

/* ─── Projetos Grid ─────────────────────────────────────────── */
.projetos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.projeto-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: var(--transition);
}
.projeto-card:hover { border-color: var(--brand-primary); box-shadow: var(--shadow); }
.projeto-card-header { display: flex; justify-content: space-between; align-items: center; }
.projeto-codigo { font-size: .7rem; font-weight: 700; color: var(--brand-secondary); letter-spacing: .05em; }
.projeto-card-nome { font-size: .95rem; font-weight: 700; color: var(--text-primary); }
.projeto-card-info { display: flex; gap: .75rem; font-size: .75rem; color: var(--text-muted); }
.projeto-card-vgv { display: flex; flex-direction: column; gap: .1rem; }
.projeto-card-datas { color: var(--text-muted); }
.projeto-card-actions { margin-top: .25rem; }

/* ─── Banco Cards ───────────────────────────────────────────── */
.contas-bancarias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.banco-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.banco-card-header { display: flex; justify-content: space-between; align-items: center; }
.banco-icon { font-size: 1.4rem; }
.banco-nome { font-size: .95rem; font-weight: 700; color: var(--text-primary); }
.banco-info { font-size: .78rem; }
.banco-saldo { display: flex; flex-direction: column; gap: .1rem; }
.banco-tipo { }

/* ─── Modals ────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal--lg { max-width: 720px; }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}
.modal-header h3 { font-size: .95rem; font-weight: 700; }
.modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1rem; padding: .2rem; transition: var(--transition); }
.modal-close:hover { color: var(--color-red); }

.modal-body { padding: 1.25rem; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border-subtle);
}

/* ─── Login Page ────────────────────────────────────────────── */
.login-page { background: var(--bg-base); }

.login-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.login-left {
  /* Degradê 1 do manual da marca (150°, roxo → violeta) — igual ao CRM */
  background: linear-gradient(150deg, #574790 0%, #9339F1 100%);
  padding: 3.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  color: #fff;
}
.login-left h1 { font-size: 2.2rem; font-weight: 800; line-height: 1.1; color: #fff; }
.login-left p  { font-size: 1rem; line-height: 1.6; max-width: 420px; color: rgba(255,255,255,.92); }

.login-logo-img {
  width: 250px; max-width: 72%; height: auto;
  margin-bottom: 1.5rem;
}

.login-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2.5rem;
}

.login-form-wrapper { width: 100%; max-width: 380px; }

.login-form-header { margin-bottom: 2rem; }
.login-form-header h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: .35rem; }
.login-form-header p  { font-size: .85rem; color: var(--text-muted); }

.login-form { display: flex; flex-direction: column; gap: 1.1rem; }

.input-wrapper { position: relative; }
.input-icon {
  position: absolute;
  left: .75rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--text-muted);
}
.input-wrapper .form-input { padding-left: 2.4rem; }

.login-footer { margin-top: 2rem; text-align: center; font-size: .72rem; color: var(--text-muted); line-height: 1.8; }

/* ─── Integration Placeholder ───────────────────────────────── */
.integration-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .75rem;
  padding: 2rem;
  color: var(--text-secondary);
}
.integration-icon { font-size: 2.5rem; }
.integration-placeholder h4 { font-size: 1rem; font-weight: 600; }
.integration-placeholder p  { font-size: .82rem; line-height: 1.6; }

.integration-banks { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: .5rem; }
.bank-badge {
  padding: .25rem .65rem;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: .72rem;
  color: var(--text-muted);
}

/* ─── Error Pages ───────────────────────────────────────────── */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  gap: 1rem;
}
.error-code { font-size: 5rem; font-weight: 800; color: var(--brand-primary); opacity: .5; }
.error-page h2 { font-size: 1.5rem; font-weight: 700; }

/* ─── Lançamento Detail ─────────────────────────────────────── */
.lc-descricao { font-size: .82rem; font-weight: 500; }

/* ─── Utility ───────────────────────────────────────────────── */
.text-green   { color: var(--color-green); }
.text-red     { color: var(--color-red); }
.text-blue    { color: var(--color-blue); }
.text-yellow  { color: var(--color-yellow); }
.text-muted   { color: var(--text-muted); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-xs      { font-size: .72rem; }
.text-sm      { font-size: .78rem; }
.font-mono    { font-variant-numeric: tabular-nums; }
.font-semibold{ font-weight: 600; }
.font-italic  { font-style: italic; }
.mt-1  { margin-top: .5rem; }
.mt-4  { margin-top: 1.25rem; }
.mb-4  { margin-bottom: 1.25rem; }
.ml-1  { margin-left: .35rem; }

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  color: var(--text-muted);
  font-size: .85rem;
}

/* ─── Filtros / Tabs ────────────────────────────────────────── */
.filtros-tabs {
  display: flex;
  gap: .25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: .25rem;
  width: fit-content;
}
.filtro-tab {
  padding: .4rem .9rem;
  font-size: .8rem;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.filtro-tab:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.filtro-tab.active {
  background: var(--brand-primary);
  color: #fff;
}
.filtro-tab.active:hover { background: var(--brand-secondary); color: #fff; }

/* ─── Seção Recorrência (form de lançamento) ────────────────── */
.recorrencia-section {
  border-top: 1px solid var(--border-subtle);
  background: rgba(255,255,255,.015);
}
.recorrencia-title {
  padding: 1rem 1.25rem .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-primary);
}
.recorrencia-tipo-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  padding: 0 1.25rem 1rem;
}
.rep-option {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .8rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  color: var(--text-secondary);
}
.rep-option input { display: none; }
.rep-option:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.rep-option.active {
  border-color: var(--brand-primary);
  background: var(--color-green-bg);
  color: var(--color-green);
}
.rep-option strong { font-size: .85rem; }

/* ─── Painel de Ajuda colapsável ────────────────────────────── */
.ajuda-collapse {
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.25);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
}
.ajuda-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .5rem .8rem;
  background: transparent;
  border: 0;
  color: #60a5fa;
  cursor: pointer;
  font-weight: 600;
  font-size: .85rem;
  text-align: left;
}
.ajuda-toggle:hover { background: rgba(59,130,246,.06); }
.ajuda-chevron {
  margin-left: auto;
  transition: transform .2s ease;
}
.ajuda-collapse.open .ajuda-chevron { transform: rotate(180deg); }
.ajuda-content {
  display: none;
  padding: 0 1rem .75rem 2.25rem;
  color: var(--text-secondary);
}
.ajuda-collapse.open .ajuda-content { display: block; }

/* ─── Drag de colunas (Lançamentos + Conciliação) ───────────── */
.lancamentos-table thead th,
.conciliacao-table thead th { cursor: grab; position: relative; }
.lancamentos-table thead th.th-dragging,
.conciliacao-table thead th.th-dragging { opacity: .4; cursor: grabbing; }
.lancamentos-table thead th.th-drag-over,
.conciliacao-table thead th.th-drag-over {
  background: rgba(147,57,241,.25) !important;
  outline: 2px dashed var(--brand-light);
  outline-offset: -2px;
}
/* Handle de redimensionar — INVISÍVEL por padrão, aparece só no hover */
.col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize !important;
  user-select: none;
  z-index: 50;
  background: transparent;
  border-right: 0;
  transition: background .15s ease;
  pointer-events: auto;
}
.col-resize-handle:hover {
  background: rgba(147,57,241,.4);
}
.col-resize-handle.resizing {
  background: rgba(147,57,241,.6);
}
/* Botão de filtro precisa de margem direita pra não cobrir o handle */
.lancamentos-table .col-filter-btn,
.conciliacao-table .col-filter-btn { margin-right: 6px; }
/* Última coluna (Ações) também recebe handle igual às outras */
.lancamentos-table thead th:last-child .col-resize-handle,
.conciliacao-table thead th:last-child .col-resize-handle {
  display: block;    /* garante visível mesmo na última */
}

/* ─── Filtros ativos: destaque verde no campo ───────────────── */
.filtros-form .form-group.filtro-ativo {
  background: rgba(147,57,241,.10);
  border-left: 3px solid var(--brand-light);
  padding-left: .55rem !important;
  border-radius: 4px;
  transition: background .15s ease;
}
.filtros-form .form-group.filtro-ativo > label {
  color: var(--brand-light) !important;
  font-weight: 600;
}
.filtros-form .form-group.filtro-ativo .choices__inner,
.filtros-form .form-group.filtro-ativo .form-input {
  border-color: rgba(147,57,241,.5) !important;
}
/* Radios do período (em range/todos) marcam o bloco inteiro */
.filtros-form .filtro-radios:has(input:checked:not([value="mes"])) ~ .filtro-grid .form-group:has(input[name="data_inicio"]:not(:placeholder-shown)),
.filtros-form .filtro-radios:has(input:checked:not([value="mes"])) ~ .filtro-grid .form-group:has(input[name="data_fim"]:not(:placeholder-shown)) {
  background: rgba(147,57,241,.10);
}

/* ─── Popover de personalização de colunas ──────────────────── */
.cols-popover {
  display: none;
  position: fixed;
  top: 60px;
  right: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  padding: .9rem 1rem;
  min-width: 200px;
  z-index: 9999;
}
.cols-popover.open { display: block; }

/* ─── Link no dia do calendário (Fluxo de Caixa) ────────────── */
a.cal-day-num {
  display: inline-block;
  text-decoration: none !important;
  color: var(--text-secondary) !important;
  padding: 1px 6px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  z-index: 5;
  transition: var(--transition);
}
a.cal-day-num:hover {
  background: rgba(147,57,241,.25);
  color: var(--color-green) !important;
}

/* ─── Botão que parece link ──────────────────────────────────── */
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  font-size: inherit;
}
.link-btn:hover { opacity: .8; }

/* ─── Autocomplete (texto livre) ─────────────────────────────── */
.ac-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  max-height: 220px;
  overflow-y: auto;
  z-index: 10000;
  font-size: .82rem;
}
.ac-item {
  padding: .45rem .65rem;
  cursor: pointer;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}
.ac-item:last-child { border-bottom: 0; }
.ac-item:hover { background: rgba(147,57,241,.15); color: var(--text-primary); }

/* ─── Choices.js — tema dark Urban Land ─────────────────────── */
.choices { margin-bottom: 0 !important; font-size: .85rem; }
.choices__inner {
  background: var(--bg-input) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  min-height: 38px;
  padding: .35rem .6rem !important;
}
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 2px rgba(147,57,241,.15);
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  z-index: 60;                 /* acima dos cards/linhas de baixo */
}
/* O dropdown do Choices não pode ser cortado pelo card (que tem overflow:hidden
   por padrão). Um card de filtro não precisa recortar conteúdo, então liberamos
   o overflow — a lista aparece inteira em vez de ficar escondida.
   ⚠ NÃO fazer isso no .filtros-panel: ele usa overflow:hidden + max-height:0
   pra recolher, e liberar o overflow quebra o recolhimento (vaza na tela). */
.card:has(.choices) { overflow: visible !important; }
.choices__list--dropdown .choices__item--selectable {
  color: var(--text-primary) !important;
  padding: .5rem .75rem !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: rgba(147,57,241,.15) !important;
  color: var(--text-primary) !important;
}
.choices__input {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
}
.choices[data-type*="select-one"]::after {
  border-top-color: var(--text-muted) !important;
}
.choices__placeholder { opacity: .55; }

/* ─── Headers de coluna com sort + filtro inline ─────────────── */
.col-header { position: relative; }
.col-header-inner {
  display: flex;
  align-items: center;
  gap: .25rem;
  justify-content: space-between;
}
.col-sort {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
  flex: 1;
}
.col-sort:hover { color: var(--text-primary); }
.col-header.sorted .col-sort { color: var(--brand-primary); }
.sort-arrow {
  font-size: .75rem;
  opacity: .9;
}
.sort-arrow--idle { opacity: .25; }
.col-header:hover .sort-arrow--idle { opacity: .6; }

.col-filter-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: .7rem;
  padding: 0 .35rem;
  cursor: pointer;
  border-radius: 3px;
  height: 1.4rem;
  line-height: 1;
}
.col-filter-btn:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }
.col-filter-btn.active {
  background: rgba(147,57,241,.2);
  color: var(--brand-light);
  border-color: rgba(147,57,241,.4);
}
/* Header da coluna com filtro ativo */
.col-header:has(.col-filter-btn.active) {
  background: rgba(147,57,241,.08) !important;
  border-top: 2px solid var(--brand-light);
}
.col-header:has(.col-filter-btn.active) .col-sort,
.col-header:has(.col-filter-btn.active) span {
  color: var(--brand-light) !important;
}
/* Botões dentro do popover */
.popover-actions {
  display: flex;
  gap: .35rem;
  justify-content: flex-end;
  margin-top: .25rem;
}

.col-filter-popover {
  display: none;
  position: fixed;   /* fixed pra escapar do overflow:auto da tabela */
  margin-top: .25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  padding: .6rem;
  min-width: 220px;
  max-width: 320px;
  z-index: 9999;
  overflow: visible !important;     /* dropdown do Choices precisa sair */
}
/* Dropdown do Choices.js DENTRO de popover: força z-index acima e largura adequada */
.col-filter-popover .choices { width: 100%; }
.col-filter-popover .choices__list--dropdown,
.col-filter-popover .choices__list[aria-expanded] {
  position: absolute !important;
  z-index: 10001 !important;
  max-height: 250px;
  overflow-y: auto;
}

/* Dropdown do Choices DENTRO de modais (split, vincular, etc.) — maior e clicável */
.modal .choices,
.modal-overlay .choices { width: 100%; }
.modal .choices__list--dropdown,
.modal .choices__list[aria-expanded],
.modal-overlay .choices__list--dropdown,
.modal-overlay .choices__list[aria-expanded] {
  position: absolute !important;
  z-index: 10010 !important;
  min-width: 220px !important;
  max-width: 360px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
}
.modal .choices__list--dropdown .choices__item--selectable,
.modal-overlay .choices__list--dropdown .choices__item--selectable {
  padding: .55rem .75rem !important;
  font-size: .85rem !important;
  white-space: nowrap;
  cursor: pointer !important;
}
.col-filter-popover.open { display: block; }
.popover-form {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.popover-form .form-input--xs { width: 100%; }
.popover-form label { font-weight: 500; }
.popover-form .btn { align-self: flex-end; margin-top: .25rem; }

/* ─── Performance hints ──────────────────────────────────────── */
.table tr { contain: layout style; }   /* isola repaint por linha */
.cronograma-table input,
.retencoes-table input,
.filtros-form input { will-change: auto; }

/* ─── Seção de Retenções de Impostos ────────────────────────── */
.retencoes-section {
  background: rgba(234, 179, 8, .04);
  border-top: 1px solid var(--border-subtle);
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
}
.retencoes-toggle {
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 1rem;
}
.retencoes-table th { font-size: .7rem; }
.retencoes-table td { vertical-align: middle; padding: .35rem .5rem; }

/* ─── Grid de seleção de colunas (Relatório) ────────────────── */
.colunas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .6rem;
}
.grupo-header td {
  background: rgba(30, 132, 73, .08);
  color: var(--color-green);
  font-size: .9rem;
  padding: .65rem 1rem;
  border-top: 2px solid rgba(30, 132, 73, .2);
}
.text-right { text-align: right !important; }

/* ─── Cards de Anexos ───────────────────────────────────────── */
.anx-grid {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1rem;
}
.anx-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .85rem;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}
.anx-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.anx-info { flex: 1; min-width: 0; }
.anx-nome {
  color: var(--brand-secondary);
  font-weight: 600;
  text-decoration: none;
  font-size: .9rem;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.anx-nome:hover { text-decoration: underline; }

/* ─── Selects nativos do Split (tema dark legível) ──────────── */
select.split-select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  cursor: pointer;
}
select.split-select:focus {
  border-color: var(--brand-primary);
  outline: 0;
}
select.split-select option {
  background: var(--bg-card);
  color: var(--text-primary);
  padding: .35rem;
}
select.split-select:required:invalid {
  border-color: rgba(239,68,68,.4);
}

/* ─── Tabela de Conciliação OFX ─────────────────────────────── */
.conciliacao-table { font-size: .8rem; }
.conciliacao-table th { padding: .55rem .5rem; font-size: .65rem; }
.conciliacao-table td { padding: .4rem .5rem; vertical-align: top; }
.form-input--xs {
  padding: .3rem .5rem !important;
  font-size: .75rem !important;
  width: 100%;
}
/* ─── Status visuais das linhas da conciliação ──────────────── */
.conciliacao-table--slim td { padding: .55rem .5rem; vertical-align: middle; }
.conciliacao-table--slim .conc-row { cursor: pointer; transition: background .12s; }
.conciliacao-table--slim .conc-row td:first-child {
  border-left: 6px solid transparent;
  box-shadow: inset 1px 0 0 rgba(0,0,0,.2);
}
.conc-row--ok td:first-child    { border-left-color: #22c55e !important; }   /* verde — conciliada */
.conc-row--match td:first-child { border-left-color: #eab308 !important; }   /* amarelo — match possivel */
.conc-row--ready td:first-child { border-left-color: #ec4899 !important; }   /* rosa — pronto p/ salvar */
.conc-row--sug td:first-child   { border-left-color: #94a3b8 !important; }   /* slate claro — com sugestao IA */
.conc-row--new td:first-child   { border-left-color: #f97316 !important; }   /* laranja — sem sugestao */
.conc-row--skip td:first-child  { border-left-color: #06b6d4 !important; }   /* cyan — duplicada/ignorada */


/* Linha ativa (drawer aberto sobre ela) — anel verde + scale */
.conc-row--active {
  outline: 2px solid #22c55e;
  outline-offset: -2px;
  box-shadow: 0 0 0 3px rgba(34,197,94,.20);
  position: relative;
  z-index: 2;
}
.conc-row--active td:first-child {
  border-left-width: 8px !important;
}

/* Badge ★ pronto (rosa — destaque alto) */
.badge--ready {
  background: rgba(236,72,153,.30);
  color: #f9a8d4;
  border: 1px solid rgba(236,72,153,.65);
  font-weight: 600;
}

/* Badge slate — sugestao da IA (claro) */
.badge--slate {
  background: rgba(148,163,184,.22);
  color: var(--text-secondary);
  border: 1px solid rgba(148,163,184,.45);
}

/* Badge "Conciliada" - verde (destaque alto) — claro por padrão */
.badge--done {
  background: rgba(22,163,74,.16);
  color: #15803d;
  border: 1px solid rgba(22,163,74,.45);
  font-weight: 600;
}

/* Badges alinhados aos status da conciliação — texto escuro no tema claro */
.badge--cyan   { background: rgba(8,145,178,.14); color: #0e7490; border: 1px solid rgba(8,145,178,.40); }
.badge--orange { background: rgba(234,88,12,.14);  color: #c2410c; border: 1px solid rgba(234,88,12,.40); }
.badge--pink   { background: rgba(219,39,119,.14); color: #be185d; border: 1px solid rgba(219,39,119,.40); }

/* Tema escuro: tinta mais forte + texto claro */
[data-theme="dark"] .badge--done   { background: rgba(34,197,94,.30); color: #86efac; border-color: rgba(34,197,94,.65); }
[data-theme="dark"] .badge--cyan   { background: rgba(6,182,212,.20); color: #22d3ee; border-color: rgba(6,182,212,.45); }
[data-theme="dark"] .badge--orange { background: rgba(249,115,22,.20); color: #fb923c; border-color: rgba(249,115,22,.45); }
[data-theme="dark"] .badge--pink   { background: rgba(236,72,153,.20); color: #f472b6; border-color: rgba(236,72,153,.45); }

/* Background mais saturado (antes era .04, agora .12) */
.conc-row--ok    { background: rgba(34,197,94,.22);   border-bottom: 1px solid rgba(34,197,94,.35); }   /* verde — destaque alto */
.conc-row--match { background: rgba(234,179,8,.13);   border-bottom: 1px solid rgba(234,179,8,.20); }   /* amarelo */
.conc-row--ready { background: rgba(236,72,153,.22);  border-bottom: 1px solid rgba(236,72,153,.38); }  /* rosa — destaque alto */
.conc-row--sug   { background: rgba(148,163,184,.13); border-bottom: 1px solid rgba(148,163,184,.22); } /* slate claro */
.conc-row--new   { background: rgba(249,115,22,.12);  border-bottom: 1px solid rgba(249,115,22,.22); }  /* laranja */
.conc-row--skip  { background: rgba(6,182,212,.10);   border-bottom: 1px solid rgba(6,182,212,.20); opacity: .75; }  /* cyan */

/* Borda esquerda extra-grossa nas linhas de mais destaque */
.conc-row--ok td:first-child,
.conc-row--ready td:first-child {
  border-left-width: 8px !important;
}

/* Hover preserva a tonalidade mas escurece um pouco */
.conc-row--ok:hover    { background: rgba(34,197,94,.32) !important; }
.conc-row--match:hover { background: rgba(234,179,8,.20) !important; }
.conc-row--ready:hover { background: rgba(236,72,153,.32) !important; }
.conc-row--sug:hover   { background: rgba(148,163,184,.22) !important; }
.conc-row--new:hover   { background: rgba(249,115,22,.20) !important; }
.conc-row--skip:hover  { background: rgba(6,182,212,.18) !important; }

.conc-status-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  font-weight: 700; font-size: .85rem;
  background: rgba(255,255,255,.05);
}

.conc-memo {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 380px;
}

/* ─── Legenda / filtros de status (pílulas — legíveis em claro e escuro) ─── */
.conc-legend {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .6rem .75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}
.conc-legend-item {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 600;
  padding: .32rem .72rem;
  border-radius: 999px;
  border: 1px solid var(--chip-bd, var(--border-color));
  background: var(--chip-bg, var(--bg-card-hover));
  color: var(--chip-fg, var(--text-secondary));
  text-decoration: none;
  transition: var(--transition);
}
a.conc-legend-item:hover { border-color: var(--chip-fg); filter: brightness(.97); }
[data-theme="dark"] a.conc-legend-item:hover { filter: brightness(1.12); }
.conc-legend-item.is-active { box-shadow: 0 0 0 2px var(--chip-fg) inset; filter: none; }

/* Variantes — TEMA CLARO (texto escuro sobre tinta clara) */
.conc-legend-item--all   { --chip-fg:#475569; --chip-bg:rgba(100,116,139,.10); --chip-bd:rgba(100,116,139,.30); }
.conc-legend-item--ok    { --chip-fg:#15803d; --chip-bg:rgba(22,163,74,.12);   --chip-bd:rgba(22,163,74,.35); }
.conc-legend-item--match { --chip-fg:#b45309; --chip-bg:rgba(217,119,6,.14);   --chip-bd:rgba(217,119,6,.40); }
.conc-legend-item--ready { --chip-fg:#be185d; --chip-bg:rgba(219,39,119,.12);  --chip-bd:rgba(219,39,119,.38); }
.conc-legend-item--sug   { --chip-fg:#475569; --chip-bg:rgba(100,116,139,.12); --chip-bd:rgba(100,116,139,.32); }
.conc-legend-item--new   { --chip-fg:#c2410c; --chip-bg:rgba(234,88,12,.12);   --chip-bd:rgba(234,88,12,.38); }
.conc-legend-item--skip  { --chip-fg:#0e7490; --chip-bg:rgba(8,145,178,.12);   --chip-bd:rgba(8,145,178,.35); }
.conc-legend-item--done  { --chip-fg:#1d4ed8; --chip-bg:rgba(37,99,235,.12);   --chip-bd:rgba(37,99,235,.35); }

/* Variantes — TEMA ESCURO (texto claro sobre tinta escura) */
[data-theme="dark"] .conc-legend-item--all   { --chip-fg:#cbd5e1; --chip-bg:rgba(148,163,184,.16); --chip-bd:rgba(148,163,184,.35); }
[data-theme="dark"] .conc-legend-item--ok    { --chip-fg:#86efac; --chip-bg:rgba(34,197,94,.18);   --chip-bd:rgba(34,197,94,.42); }
[data-theme="dark"] .conc-legend-item--match { --chip-fg:#fde047; --chip-bg:rgba(234,179,8,.16);   --chip-bd:rgba(234,179,8,.42); }
[data-theme="dark"] .conc-legend-item--ready { --chip-fg:#f9a8d4; --chip-bg:rgba(236,72,153,.18);  --chip-bd:rgba(236,72,153,.42); }
[data-theme="dark"] .conc-legend-item--sug   { --chip-fg:#cbd5e1; --chip-bg:rgba(148,163,184,.16); --chip-bd:rgba(148,163,184,.35); }
[data-theme="dark"] .conc-legend-item--new   { --chip-fg:#fdba74; --chip-bg:rgba(249,115,22,.16);  --chip-bd:rgba(249,115,22,.42); }
[data-theme="dark"] .conc-legend-item--skip  { --chip-fg:#67e8f9; --chip-bg:rgba(34,211,238,.14);  --chip-bd:rgba(34,211,238,.42); }
[data-theme="dark"] .conc-legend-item--done  { --chip-fg:#93c5fd; --chip-bg:rgba(96,165,250,.16);  --chip-bd:rgba(96,165,250,.42); }

/* ─── Drawer multi-tab (item OFX) ─────────────────────────── */
.item-drawer { padding: 1rem 1.25rem; }
.item-drawer-header {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  padding: .75rem 1rem; margin-bottom: 1rem;
}
.idh-line {
  display: flex; align-items: center; gap: 1rem; margin-bottom: .35rem;
  flex-wrap: wrap;
}
.idh-data { font-family: monospace; color: var(--text-muted); }
.idh-valor { font-weight: 700; font-size: 1.1rem; }
.idh-memo { font-size: .85rem; }
.idh-meta { font-size: .7rem; color: var(--text-muted); margin-top: .25rem; }
.idh-meta code { background: rgba(255,255,255,.05); padding: 1px 5px; border-radius: 3px; }

.idr-tabs {
  display: flex; gap: 2px; margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.idr-tab {
  background: transparent; border: none;
  padding: .65rem 1rem; cursor: pointer;
  color: var(--text-muted); font-size: .85rem;
  border-bottom: 2px solid transparent;
  transition: all .15s ease;
}
.idr-tab:hover { color: var(--text); background: rgba(255,255,255,.03); }
.idr-tab.active {
  color: #22c55e;
  border-bottom-color: #22c55e;
  font-weight: 600;
}
/* Match tab — destaque amarelo pra chamar atenção */
.idr-tab--match { color: #eab308; font-weight: 600; }
.idr-tab--match.active { color: #eab308; border-bottom-color: #eab308; }
.idr-tab--match:hover { background: rgba(234,179,8,.08); color: #eab308; }
.idr-tab-content { padding-top: .5rem; }
.idr-section { margin-top: .5rem; }
.idr-section-title {
  font-size: .9rem; color: var(--text); font-weight: 600;
  margin: 0 0 .75rem 0;
}

.table-compact { font-size: .85rem; }
.table-compact th, .table-compact td { padding: .4rem .5rem; }
.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; font: inherit;
}

.split-edit-header {
  display: flex; align-items: center; gap: .75rem;
  padding-bottom: .5rem; margin-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Auto-grow textarea da descrição no split (cresce conforme conteúdo) */
.split-desc-ta {
  resize: none;
  overflow: hidden;
  min-height: 30px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─── Linha em edição (drawer aberto) ────────────────────── */
.lancamentos-table tr.lc-row--editando td {
  background: rgba(34,197,94,.16) !important;
  box-shadow: inset 0 0 0 9999px rgba(34,197,94,.06);
}
.lancamentos-table tr.lc-row--editando td:first-child {
  border-left: 4px solid #22c55e;
}

/* ─── Paginação ──────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; flex-wrap: wrap;
  margin: 1rem 0;
}
.pagination-info { color: var(--text-muted); font-size: .85rem; padding: 0 .5rem; }

/* ─── Botão de limpar campo de data (flatpickr) ──────────── */
.date-clear-wrap { position: relative; display: block; }
.date-clear-wrap input { width: 100%; padding-right: 2.1rem; }       /* só calendário */
.date-clear-wrap.has-clear input { padding-right: 3.5rem; }          /* calendário + ✕ */
.date-clear-btn {
  position: absolute;
  top: 50%;
  right: 1.9rem;           /* fica à ESQUERDA do botão de calendário */
  transform: translateY(-50%);
  width: 1.15rem; height: 1.15rem;
  display: none;
  align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: var(--text-muted);
  font-size: .7rem; line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.date-clear-btn:hover { background: rgba(239,68,68,.4); color: #fff; }
/* Botão de calendário (abre o flatpickr) — digitação é o padrão */
.date-cal-btn {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  width: 1.3rem; height: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: .85rem; line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.date-cal-btn:hover { color: var(--color-primary); background: rgba(255,255,255,.08); }

/* flatpickr no tema dark — alinha a fonte/altura ao form-input */
.flatpickr-input.form-input,
input.form-input.flatpickr-input { cursor: text; }

/* ─── Barra de ações em lote (Lançamentos) ───────────────── */
.bulk-bar {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1rem; margin-bottom: 1rem;
  background: rgba(6,182,212,.10);
  border: 1px solid rgba(6,182,212,.35);
  border-left: 4px solid #06b6d4;
  border-radius: 6px;
  font-size: .9rem;
  position: sticky; top: 0; z-index: 50;
}
.bulk-bar strong { color: #22d3ee; font-size: 1.05rem; }

/* ─── Banner do Match na aba Vincular ─────────────────────── */
.match-banner {
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.35);
  border-left: 4px solid #3b82f6;
  border-radius: 6px;
  padding: .65rem .9rem;
  margin: .75rem 0;
}
.match-banner-row {
  display: flex; align-items: center; gap: .75rem;
  cursor: pointer; margin: 0;
}
.match-banner-row input[type="checkbox"] { transform: scale(1.2); }
.match-banner-info { flex: 1; min-width: 0; }
.match-banner-title { font-size: .85rem; margin-bottom: .3rem; }
.match-banner-data {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .9rem; align-items: center;
  font-size: .9rem;
}
.match-data-cell {
  display: flex; flex-direction: column; gap: .1rem;
  min-width: 0;
}
.match-data-cell--desc { min-width: 0; overflow: hidden; }
.match-data-cell--desc strong {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.match-data-cell--valor { text-align: right; }
.match-data-cell--valor strong { font-size: 1rem; color: var(--text); }

/* Botão warning (amarelo) */
.btn-warning {
  background: #d97706;
  color: #fff;
  border: 1px solid #d97706;
}
.btn-warning:hover { background: #b45309; border-color: #b45309; }

/* alert info */
.alert--info {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.25);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: .85rem;
}
.alert--info .alert-icon { width: 1.1rem; height: 1.1rem; color: #60a5fa; flex-shrink: 0; margin-top: .15rem; }

/* ─── Drawer lateral (painel de edição inline) ──────────────── */
/* Backdrop fica invisível e NÃO bloqueia cliques na tela de fundo
   (o usuário deve conseguir interagir com a lista enquanto edita) */
.lc-panel-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  pointer-events: none;     /* NÃO bloqueia cliques */
  z-index: 998;
}
.lc-panel-backdrop.open { /* sem efeito visual: só placeholder */ }

.lc-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: var(--lc-panel-width, 560px);
  min-width: 380px;
  max-width: 95vw;
  background: var(--bg-card);
  border-left: 1px solid var(--border-color);
  box-shadow: -8px 0 32px rgba(0,0,0,.4);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
  z-index: 999;
  display: flex;
  flex-direction: column;
}
.lc-panel.open { transform: translateX(0); }
/* (resize handle do drawer foi removido — drawer tem largura fixa) */

/* Sidebar com transição suave (sempre, não só drawer-open) */
.sidebar {
  transition: width .25s ease;
  overflow-x: hidden;     /* esconde textos durante o colapso */
}
.sidebar .nav-section-label,
.sidebar .nav-item span,
.sidebar .sidebar-brand-text,
.sidebar .user-details,
.sidebar .logout-btn {
  white-space: nowrap;
  transition: opacity .15s ease;
}

/* Quando drawer está aberto: sidebar principal colapsa pra trilho de ícones */
body.drawer-open .sidebar { width: 64px; }

/* Esconde todos os textos REMOVENDO do layout (display:none) — se usar
   visibility/opacity a caixa do texto continua ocupando espaço no flex e
   empurra o ícone de forma diferente em cada item, desalinhando o trilho. */
body.drawer-open .sidebar .nav-section-label,
body.drawer-open .sidebar .nav-item span,
body.drawer-open .sidebar .logo-text,
body.drawer-open .sidebar .user-details,
body.drawer-open .sidebar .logout-btn {
  display: none;
}

/* Header: só o símbolo centralizado no trilho de 64px, sem estourar pra fora */
body.drawer-open .sidebar .sidebar-header { padding: 1rem 0; justify-content: center; }
body.drawer-open .sidebar .sidebar-logo  { justify-content: center; gap: 0; width: 100%; }
body.drawer-open .sidebar .logo-icon { margin: 0 auto; }

/* Nav: ícones apenas centralizados (tamanho/cor seguem o padrão original) */
body.drawer-open .sidebar .nav-item {
  justify-content: center;
  padding: .6rem 0;
  gap: 0;
  border-left-width: 0;
}

/* Footer: só o avatar centralizado */
body.drawer-open .sidebar .sidebar-footer { padding: .75rem 0; justify-content: center; }
body.drawer-open .sidebar .user-info      { justify-content: center; flex: 0 0 auto; }

.main-wrapper {
  transition: margin-left .25s ease, padding-right .25s ease;
}
body.drawer-open .main-wrapper {
  margin-left: 64px;
  padding-right: var(--lc-panel-width, 560px);
}

/* ─── Colapso MANUAL do menu (botão ☰) — só em telas largas ─── */
@media (min-width: 901px) {
  body.sidebar-collapsed .sidebar { width: 64px; }
  body.sidebar-collapsed .sidebar .nav-section-label,
  body.sidebar-collapsed .sidebar .nav-item span,
  body.sidebar-collapsed .sidebar .logo-text,
  body.sidebar-collapsed .sidebar .user-details,
  body.sidebar-collapsed .sidebar .logout-btn { display: none; }
  body.sidebar-collapsed .sidebar .sidebar-header { padding: 1rem 0; justify-content: center; }
  body.sidebar-collapsed .sidebar .sidebar-logo  { justify-content: center; gap: 0; width: 100%; }
  body.sidebar-collapsed .sidebar .logo-icon { margin: 0 auto; }
  body.sidebar-collapsed .sidebar .nav-item { justify-content: center; padding: .6rem 0; gap: 0; border-left-width: 0; }
  body.sidebar-collapsed .sidebar .sidebar-footer { padding: .75rem 0; justify-content: center; }
  body.sidebar-collapsed .sidebar .user-info { justify-content: center; flex: 0 0 auto; }
  body.sidebar-collapsed .main-wrapper { margin-left: 64px; }
}

/* ─── Tabela ocupa toda a largura disponível ─────────────── */
.conciliacao-table { width: 100%; }
.conciliacao-table--slim {
  table-layout: auto;
  width: 100%;
}
.conciliacao-table--slim .conc-memo {
  max-width: none;       /* deixa o MEMO usar o espaço disponível */
  white-space: normal;
}

/* Garante scroll horizontal da tabela quando o conteúdo aperta */
.lancamentos-table { min-width: 1100px; }                /* força largura mínima */
.table-responsive  { overflow-x: auto; }                  /* libera scroll bar */
body.drawer-open .table-responsive {
  overflow-x: auto !important;
  scrollbar-width: thin;
}
/* Visual da scrollbar (Webkit) */
.table-responsive::-webkit-scrollbar { height: 10px; }
.table-responsive::-webkit-scrollbar-track { background: var(--bg-card); }
.table-responsive::-webkit-scrollbar-thumb {
  background: var(--brand-primary);
  border-radius: 5px;
}
.table-responsive::-webkit-scrollbar-thumb:hover { background: var(--brand-secondary); }

@media (max-width: 900px) {
  .lc-panel { width: 100vw; max-width: 100vw; }
  body.drawer-open .sidebar { display: none; }
  body.drawer-open .main-wrapper { margin-left: 0; }
}
.lc-panel iframe {
  flex: 1;
  width: 100%;
  border: 0;
  background: var(--bg-body);
}

.lc-panel-loading {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: .9rem;
  z-index: 2;
}

/* ─── Layout enxuto (panel_base) ─────────────────────────────── */
body.panel-mode {
  background: var(--bg-body) !important;
  margin: 0;
  padding: 0;
}
.panel-mode .panel-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
}
.panel-mode .panel-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}
.panel-mode .panel-close-btn {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  padding: .25rem .6rem;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.panel-mode .panel-close-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
.panel-mode .panel-body {
  padding: 1.25rem 1.5rem 2rem;
}

/* esconder elementos que não fazem sentido dentro do painel */
.panel-mode .page-title-group,
.panel-mode .topbar { display: none !important; }

/* form-page do form_lancamento dentro do panel: remove constraints */
.panel-mode .form-page { padding: 0; max-width: 100%; }
.panel-mode .form-card { box-shadow: none; border: 0; padding: 0; background: transparent; }

/* Tela de sucesso */
.panel-mode .panel-success {
  text-align: center;
  padding: 4rem 2rem;
}
.panel-mode .panel-success-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--color-green-bg);
  color: var(--color-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
}
.panel-mode .panel-success h3 {
  color: var(--text-primary);
  margin: 0 0 .5rem;
}

/* Responsive: em mobile, drawer ocupa tela inteira */
@media (max-width: 768px) {
  .lc-panel { width: 100vw; max-width: 100vw; }
}

/* ─── Painel de Filtros (recolhível) ────────────────────────── */
.filtros-panel {
  background: var(--bg-card);
  border: 0;                 /* fechado: sem borda (evita o traço fino no topo) */
  border-radius: var(--radius);
  margin-bottom: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease, padding .3s ease;
  padding: 0 1rem;
}
.filtros-panel.open {
  max-height: 2000px;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border-color);
}
.filtros-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 1rem;
}
.filtros-header h3 {
  font-size: 1rem;
  margin: 0;
  color: var(--text-primary);
}
.filtro-secao {
  margin-bottom: 1.25rem;
}
.filtro-secao h4 {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin: 0 0 .6rem 0;
}
.filtro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}
.filtro-radios {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: .5rem;
}
.filtros-actions {
  display: flex;
  gap: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border-subtle);
  margin-top: 1rem;
}

/* ─── Checkbox inline no label de campo ─────────────────────── */
.checkbox-label-inline {
  display: inline-flex !important;
  align-items: center;
  gap: .3rem;
  margin-left: .5rem;
  font-size: .7rem !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.checkbox-label-inline input[type="checkbox"] {
  width: .85rem;
  height: .85rem;
  margin: 0;
  cursor: pointer;
}

/* ─── Linha de lançamento clicável (duplo-clique edita) ─────── */
.lc-row { cursor: pointer; user-select: none; }
.lc-row:hover { background: var(--bg-card-hover) !important; }

/* ─── Cronograma de Etapas ──────────────────────────────────── */
.recorrencia-tipo-selector--4col { grid-template-columns: repeat(4, 1fr) !important; }

.cronograma-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: .75rem;
  flex-wrap: wrap;
}

.cronograma-table-wrap {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
}

.cronograma-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}

.cronograma-table th {
  background: var(--bg-table-head);
  color: var(--text-muted);
  font-weight: 600;
  font-size: .7rem;
  text-transform: uppercase;
  padding: .55rem .65rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.cronograma-table td {
  padding: .35rem .5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.cronograma-table input.form-input {
  padding: .35rem .55rem;
  font-size: .78rem;
}

.cronograma-table tfoot td {
  background: var(--bg-table-head);
  padding: .55rem .65rem;
}

.cronograma-total td {
  font-weight: 700;
  border-top: 1px solid var(--border-color);
}

.cronograma-total #cronograma-soma-pct,
.cronograma-total #cronograma-soma-valor {
  font-variant-numeric: tabular-nums;
  color: var(--color-green);
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .charts-grid { grid-template-columns: 1fr; }
  .bottom-grid { grid-template-columns: 1fr; }
  .fluxo-kpi-grid { grid-template-columns: 1fr 1fr; }
  .fluxo-main-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }
  .sidebar { transform: translateX(-240px); width: 240px; }
  .sidebar.open { transform: translateX(0); }
  .main-wrapper { margin-left: 0; }
  .sidebar-toggle { display: flex; }
  .login-container { grid-template-columns: 1fr; }
  .login-left { display: none; }
}

@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .content { padding: 1rem; }
  .fluxo-kpi-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}