/* ===== Sevenrep CRM — UI Refresh + Dark Mode ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* —— Tema (claro) ——————————————————————————————— */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#1f2328;
  --muted:#6a7380;
  --ring:#e5e7eb;
  --ring-strong:#d1d5db;
  --shadow:0 8px 24px rgba(0,0,0,.06);

  --primary:#2563eb;
  --primary-600:#1d4ed8;
  --success:#16a34a;
  --warn:#f59e0b;
  --danger:#dc2626;

  --s-novo:#94a3b8;         /* slate */
  --s-contato:#0ea5e9;      /* sky   */
  --s-qualificado:#8b5cf6;  /* violet*/
  --s-ganho:#22c55e;        /* green */
  --s-perdido:#ef4444;      /* red   */
}

/* —— Tema (escuro) via data-theme=dark ————————————— */
:root[data-theme="dark"]{
  --bg:#0b1221;
  --card:#0f172a;
  --text:#e8ecf3;
  --muted:#9aa6b2;
  --ring:#1f2a44;
  --ring-strong:#2b3a5f;
  --shadow:0 10px 24px rgba(0,0,0,.45);

  --primary:#60a5fa;
  --primary-600:#3b82f6;

  --s-novo:#64748b;
  --s-contato:#38bdf8;
  --s-qualificado:#a78bfa;
  --s-ganho:#22c55e;
  --s-perdido:#f87171;
}

/* —— Preferência do sistema como padrão ———————— */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ color-scheme: dark; }
  :root:not([data-theme]){ color-scheme: dark; }
}

/* —— Base ———————————————————————————————— */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:14px/1.45 Poppins, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.container{max-width:1200px;margin:0 auto;padding:1rem}
.narrow{max-width:760px}

/* Links & botões */
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-600)}
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid var(--ring);background:var(--card);color:var(--text);
  padding:.55rem .9rem;border-radius:.7rem;cursor:pointer;box-shadow:var(--shadow);
  transition:.18s ease;
}
.btn.tiny{padding:.3rem .55rem;font-size:.85rem}
button:hover,.btn:hover{transform:translateY(-1px)}
button:active,.btn:active{transform:translateY(0) scale(.98)}
.btn.primary{background:var(--primary);color:#fff;border-color:transparent}
.btn.primary:hover{background:var(--primary-600)}
.btn.ghost{background:transparent}

/* Topbar */
.topbar{
  position:sticky;top:.5rem;z-index:30;
  display:flex;gap:.75rem;justify-content:space-between;align-items:center;
  background:var(--card);border:1px solid var(--ring);border-radius:1rem;
  padding:.8rem 1rem;margin:1rem 0;box-shadow:var(--shadow);
}
.topbar .brand{font-weight:700;letter-spacing:.2px}
.topbar nav{display:flex;gap:.6rem;align-items:center}
.topbar .theme-toggle{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.35rem .6rem;border-radius:.7rem;border:1px solid var(--ring);
  background:var(--card);cursor:pointer
}

/* Cards & alerts */
.card{
  background:var(--card);border:1px solid var(--ring);border-radius:1rem;
  padding:1rem;margin:.6rem 0;box-shadow:var(--shadow);
}
.alert{
  background:#fff8e1;border:1px solid #ffe9a8;color:#7a5d00;
  border-radius:.7rem;padding:.75rem;margin:1rem 0
}
:root[data-theme="dark"] .alert{
  background:#3a2f13;border-color:#9a7f2a;color:#f7e8b1;
}
.muted{color:var(--muted)}

/* Toolbar */
.toolbar{display:flex;gap:.6rem;align-items:center;margin:1rem 0}
.toolbar input[type=search]{flex:1}

/* Kanban */
.kanban{display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem}
.col{
  display:flex;flex-direction:column;min-height:72vh;
  background:var(--card);border:1px solid var(--ring);border-radius:1rem;padding:.6rem;
  box-shadow:var(--shadow)
}
.col h3{display:flex;align-items:center;gap:.5rem;margin:.2rem .3rem .6rem;font-size:1rem}
.badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:600;padding:.12rem .45rem;border-radius:999px;font-size:.78rem;color:#fff
}
.total{margin-left:auto;font-weight:600;color:var(--muted);font-size:.86rem}

/* Cores por status */
.col[data-status="Novo"] .badge{background:var(--s-novo)}
.col[data-status="Contato"] .badge{background:var(--s-contato)}
.col[data-status="Qualificado"] .badge{background:var(--s-qualificado)}
.col[data-status="Ganho"] .badge{background:var(--s-ganho)}
.col[data-status="Perdido"] .badge{background:var(--s-perdido)}

/* Área de itens */
.items{flex:1;display:flex;flex-direction:column;gap:.6rem;min-height:60vh}
.items.drag-over{outline:2px dashed var(--primary);outline-offset:4px;border-radius:.8rem}

/* Cartão de lead */
.lead{
  cursor:grab;background:var(--card);
  border:1px solid var(--ring);border-left:6px solid transparent;border-radius:.9rem;
  padding:.75rem .8rem;box-shadow:var(--shadow);transition:.18s ease
}
.lead:hover{transform:translateY(-2px)}
.lead .name{margin:.1rem 0 .2rem;font-size:1rem;font-weight:600}
.lead .meta{font-size:.85rem;color:var(--muted)}
.lead .btn{margin-top:.5rem}

/* Acento por status */
.col[data-status="Novo"] .lead{border-left-color:var(--s-novo)}
.col[data-status="Contato"] .lead{border-left-color:var(--s-contato)}
.col[data-status="Qualificado"] .lead{border-left-color:var(--s-qualificado)}
.col[data-status="Ganho"] .lead{border-left-color:var(--s-ganho)}
.col[data-status="Perdido"] .lead{border-left-color:var(--s-perdido)}

.lead.ghost{opacity:.6}

/* Dialog (cadastro) */
dialog{border:none;border-radius:1rem;padding:1rem 1.1rem;box-shadow:0 32px 64px rgba(0,0,0,.22);max-width:720px;width:100%}
dialog::backdrop{background:rgba(0,0,0,.35)}
label{display:block;margin:.5rem 0 .25rem}
.input-help{font-size:.8rem;color:var(--muted);margin-top:.25rem}
input,select,textarea{
  width:100%;padding:.7rem;border:1px solid var(--ring);border-radius:.6rem;background:#fff
}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{
  background:#0b1327;color:var(--text);border-color:var(--ring-strong)
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:2px}
menu{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem}
.form-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.8rem .9rem;
}
.form-grid .full{grid-column:1/-1}

/* Página de edição */
.page-title{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:.3rem 0 1rem}
.page-actions-sticky{
  position:sticky;bottom:.5rem;display:flex;gap:.6rem;justify-content:flex-end;
  background:transparent;padding:.25rem 0;margin-top:.75rem
}

/* Responsivo */
@media (max-width:1180px){.kanban{grid-template-columns:repeat(3,1fr)}}
@media (max-width:840px){.kanban{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.kanban{grid-template-columns:1fr}}
@media (max-width:720px){.form-grid{grid-template-columns:1fr}}

/* Ícone único de tema (monocromático) */
.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:.5rem;border:1px solid var(--ring);
  background:transparent;color:var(--text);text-decoration:none;line-height:1;font-size:1rem;cursor:pointer;
}
.iconbtn:hover{transform:translateY(-1px)}

/* Lead "quente" (valor alto) */
.lead.hot{ border-left-width:8px; box-shadow:0 8px 24px rgba(0,0,0,.09); }

/* Ping de inatividade: se quiser destacar mais, pode colorir o bullet */
.lead .meta a{ text-decoration: none; }

/* —— Auth / Tabelas / Ajustes de consistência —— */
body.container.auth { max-width: 720px; }
.center { display:flex; align-items:center; justify-content:center; min-height: calc(100vh - 80px); }
.auth-card h1 { margin:0 0 .75rem; font-size:1.4rem; }

.table-wrap{ overflow:auto; }
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ padding:.6rem .7rem; border-bottom:1px solid var(--ring); text-align:left; }
.table th{ font-weight:600; }

.inline select, .inline input[type="password"]{ height:2.25rem; }
.btn.tiny{ padding:.25rem .5rem; font-size:.8rem; line-height:1; }

.topbar .brand{ font-weight:700; }

/* garante inputs full em forms */
.form-grid input[type="email"],
.form-grid input[type="password"],
.form-grid input[type="text"],
.form-grid input[type="number"],
.form-grid textarea,
.form-grid select{ width:100%; }

.badge-soft{
  display:inline-block;
  padding:.1rem .35rem;
  font-size:.72rem;
  border:1px solid var(--ring);
  border-radius:.35rem;
  background:var(--card);
  color:var(--muted);
  vertical-align:middle;
}

.meta .sep { opacity: .45; margin: 0 .35rem; }
.iconbtn.csv-icon { text-decoration: none; font-size: 0.95rem; }

.card.lead.dragging { opacity:.55; }
.items.dropping { background: rgba(0,0,0,.05); outline: 2px dashed var(--primary-400); }
.meta .sep { opacity:.45; margin: 0 .35rem; }
.iconbtn.csv-icon { text-decoration: none; font-size: .95rem; }