/* ============================================================
   STYLE.CSS — versão comentada e consolidada
   Objetivo: remover duplicações e documentar cada bloco.
   ============================================================ */

/* == 1) Tipografia & Tokens de Tema ========================= */
/* ===== Manrope (UI moderna) ===== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap');

:root{
  --bg:#f6f7fb; --panel:rgba(255,255,255,.78); --muted:#6b7280; --text:#0b1220;
  --ok:#16a34a; --bad:#dc2626; --line:#d1d5db; --accent:#2563eb; --today:#0ea5e9;
  --weekend:rgba(15,23,42,.04);
}
*{box-sizing:border-box}
body{
  margin:0;
  background:linear-gradient(180deg,#f6f7fb 0%, #ffffff 100%);
  color:var(--text);
  font:12.5px/1.55 "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent);text-decoration:none}
input,select,button,textarea{font:inherit}

.wrap{max-width:100vw;margin:24px auto;padding:0 16px}
.card{
  background:var(--panel);
  backdrop-filter:saturate(130%) blur(4px); -webkit-backdrop-filter:saturate(130%) blur(4px);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}
.grid{display:grid;gap:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

label{font-size:inherit;color:var(--muted)}
input,select{
  background:#fff;color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
}

/* ===== Botões/toolbar ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 14px; border-radius:10px; font-weight:600; line-height:1;
  border:1px solid transparent; text-decoration:none; cursor:pointer; white-space:nowrap;
}
.btn:hover{filter:brightness(1.03)}
.btn-primary{background:#111827; color:#fff; border-color:#334155}
.btn-outline{background:#fff; color:var(--accent); border-color:#cbd5e1}
.btn-outline:hover{background:rgba(37,99,235,.06)}
.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:6px}

/* ===== Tabela ===== */
table{width:100%;border-collapse:separate;border-spacing:0;overflow:auto;background:rgba(255,255,255,.4)}
th,td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:5px 8px;white-space:nowrap;text-align:right}
tbody tr:nth-child(even){background:rgba(15,23,42,.1)}

/* 1ª coluna larga o suficiente pra caber tudo numa linha */
th.sticky,td.sticky{
  position:sticky; left:0; text-align:left; white-space:normal;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(130%) blur(4px);
  z-index:2; min-width:520px;
}
td.sticky{background:rgba(255,255,255,.78); z-index:1}

thead th{
  position:sticky; top:0;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(130%) blur(4px);
  z-index:3;
}

.neg{color:var(--bad)} .pos{color:var(--ok)} .muted{color:var(--muted)}
.pill{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--line)}
.inactive{opacity:.45;filter:saturate(.6)}
.hr{height:1px;background:var(--line);margin:12px 0}
.footer td{font-weight:600}
.saldo{background:rgba(15,23,42,.02)}
.weekend{background:var(--weekend)}
.today{outline:2px solid var(--today); outline-offset:-2px;}

/* ===== KPIs / Projeções ===== */
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));}
.stat{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.6)}
.stat-label{font-size:12px;color:var(--muted);margin-bottom:4px}
.stat-value{font-size:20px;font-weight:700}
.stat-hint{font-size:12px;margin-top:2px}

/* ===== Login ===== */
.login-card{max-width:360px;margin:12vh auto;background:#fff;padding:24px;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 18px rgba(0,0,0,.06)}
.login-card h3{margin:0 0 12px}
.login-card .err{color:#dc2626;margin-bottom:8px}
.login-card label{display:block;margin:.6rem 0 .25rem}
.login-card input{width:100%}
.login-card button{width:100%;margin-top:12px}
.login-card .hint{font-size:12px;color:var(--muted);margin-top:8px}

/* ===== Linha única na coluna "Evento" ===== */
.evtools{
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
}
.evtools .desc{
  flex:1 1 auto; min-width:0; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.evtools .pill, .evtools .btn, .evtools summary{ white-space:nowrap; }
.evedit > summary{
  cursor:pointer; border:1px solid var(--line); border-radius:999px;
  padding:2px 8px; font-size:12px; display:inline-block; background:#fff;
}

@media print{
  :root{ --bg:#fff; --panel:#fff; --text:#000; --line:#d1d5db; --muted:#6b7280; }
  body{background:#fff;color:#000}
  .card{box-shadow:none;border-color:#e5e7eb;background:#fff;backdrop-filter:none}
  .row, form, details, .pill, button, a{display:none !important}
  table{font-size:12px;background:#fff}
  td.sticky, th.sticky, thead th{position:static;background:#fff;backdrop-filter:none}
  .today{outline:1px solid #000}
}
/* Botão dentro da célula (dar baixa / desfazer) */
.cellbtn{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px dashed transparent;
  padding:2px 6px; border-radius:8px; cursor:pointer;
}
.cellbtn:hover{ border-color:var(--line); background:rgba(0,0,0,.03); }
.cellbtn.done{ background:rgba(22,163,74,.10); border-color:rgba(22,163,74,.25); }
.cellbtn.done span{ text-decoration:line-through; opacity:.85; }

/* ===== Bloco de Notas ===== */
.notepad{
  width:100%;
  min-height:220px;
  resize:vertical;
  border:1px dashed var(--line);
  border-radius:12px;
  padding:12px;
  background:rgba(255,255,255,.85);
  outline:none;
}
.notepad:focus{
  border-color:#9ca3af;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
/* Wrapper para tabelas com cantos arredondados */
.table-rounded{
  border-radius:12px;   /* mesmo raio dos cards */
  overflow:hidden;      /* recorta as quinas da tabela */
  background:transparent;
}

/* garante que a tabela não crie margem própria */
.table-rounded table{
  margin:0;
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}




/* == 2) CRM — UI harmonizada com Financeiro ==================
   - Bloco único: substitui todos os trechos CRM duplicados.
   - Escopo: apenas páginas/áreas que usam o formulário do CRM
     (selecionado por action="/crm/deals/save") e elementos
     padrões (.row-just, .pipeline-grid, .stage-card, etc.).
================================================================ */

/* 2.1) Botão primário nos cabeçalhos de cards (ex.: "Ver negócios") */
.card .row-just .btn.btn-primary{
  background:#1e3a8a;
  border-color:#1e3a8a;
  color:#fff;
}
.card .row-just .btn.btn-primary:hover{ filter:brightness(.95); }

/* 2.2) Link-card (card clicável sem cara de link) */
.link-card{ display:block; text-decoration:none; color:inherit; }
.link-card:hover{ box-shadow:0 6px 16px rgba(0,0,0,.06); transform: translateY(-1px); transition:.15s; }

/* 2.3) Cabeçalho utilitário de cards (título à esquerda + ação à direita) */
.section-title{ margin:0; font-weight:700; letter-spacing:.2px; }
.row-just{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }

/* 2.4) Quick-create (form do topo do CRM) — padding e labels iguais ao Financeiro */
.card form[action$="/crm/deals/save"]{
  padding:12px;                     /* respiro interno em todos os lados */
}
.card form[action$="/crm/deals/save"] .form-row{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
}
/* Labels acima dos campos (linha 1) */
.card form[action$="/crm/deals/save"] label{
  display:block; font-size:12.5px; line-height:inherit;
  font-weight:600; color:#6b7280; margin-bottom:6px; letter-spacing:.2px;
}
/* Linha de Notas + Salvar (rótulo na mesma linha do input) */
.card form[action$="/crm/deals/save"] .form-row--descricao{
  gap:8px; margin-top:6px; padding-right:12px;
}
.card form[action$="/crm/deals/save"] .form-row--descricao label{
  display:inline-block; margin:0; font-size:inherit; font-weight:600; color:#6b7280;
  line-height:38px; min-width:90px;
}
/* Altura/padding dos campos */
.card form[action$="/crm/deals/save"] input,
.card form[action$="/crm/deals/save"] select{
  height:38px; line-height:38px; padding:8px 10px; border-radius:8px;
}

/* 2.5) Pipeline (cards por estágio) */
.pipeline-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:12px; margin-top:8px;
}
.stage-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:12px;
}
.stage-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.stage-name{ font-weight:600; color:#111827; }
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:22px; padding:0 8px; border-radius:999px;
  font-weight:600; font-size:12.5px; background:#eef2ff; color:#1e3a8a; border:1px solid #dbe3ff;
}
.stage-total{ font-size:12.5px; font-weight:700; }
.stage-total.pos{ color:#065f46; }
.stage-total.neg{ color:#b91c1c; }

/* 2.6) Tabela inline do CRM (respiro consistente) */
.card .row-just + form{ margin-bottom:10px; }
.table th, .table td{ padding:10px 12px; }  /* vertical + lateral */
.table th{ font-weight:600; }

/* 2.7) Espaços entre cards (CRM e geral) */
.card + .card{ margin-top:12px; }

/* ============================================================
   Fim do bloco CRM consolidado
   ============================================================ */


/* === CRM: igualar espaçamentos ao Financeiro ================== */
/* 1) Não usar gap no contêiner (senão soma com as margens) */
.card form.crm-inline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;                       /* <- era 12px, zera p/ não somar */
}

/* 2) Margens iguais às do Financeiro (rótulo ao lado do campo) */
.card form.crm-inline > label{
  margin:0 8px 8px 0;          /* espaço entre rótulo e campo + quebra elegante */
  min-width:90px;
  line-height:38px;            /* alinha com input 38px */
  font-weight:600;
}

/* 3) Campos com o mesmo “respiro” lateral/vertical do Financeiro */
.card form.crm-inline input,
.card form.crm-inline select,
.card form.crm-inline textarea{
  margin:0 12px 8px 0;         /* exatamente como no Financeiro */
  height:38px; line-height:38px; padding:8px 10px; border-radius:8px;
}

/* 4) Botão na mesma altura dos campos */
.card form.crm-inline .btn{
  height:38px; line-height:38px; padding:0 12px;
}

/* destaque para eventos atrasados */
.atrasado {
  background-color: #fff2f2;      /* fundo rosado suave */
}
.atrasado > td {
  color: #b00020;                 /* texto mais escuro */
  font-weight: 600;
  border-left: 4px solid #b00020; /* marcador visual */
}

.section-header {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent); 
  text-transform: uppercase;
  margin: 0 0 12px;
}

.section-header::after {
  content: "";
  flex: 1;                          /* ocupa o espaço restante */
  height: 2px;                      /* espessura da linha */
  background: var(--line);        /* mesma cor do texto */
  margin-left: 8px;                 /* espaço entre texto e linha */
  border-radius: 2px;
}

.card {
  transition: background-color .2s ease;
}
.card:hover {
  background-color: rgba(37, 99, 235, .04); /* azul bem clarinho */
}



input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); /* azul translúcido */
}

a, .cellbtn, .evtools summary {
  transition: color .15s ease, opacity .15s ease;
}
a:hover { color: var(--today); } /* azul claro */

* {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.scope-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.scope-pills a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--line);
  background: transparent;
  text-decoration: none;
  transition: all .15s ease;
}

.scope-pills a:hover {
  border-color: var(--accent);
}

.scope-pills a.active {
  border: 2px solid var(--accent); /* borda mais grossa */
  color: var(--accent);
  background: transparent;         /* sem preenchimento */
}