:root{--bg:#0b1220;--card:#121a2c;--text:#e9eefc;--muted:#a8b3cf;--pri:#3f8cff;--ok:#28a745;--warn:#ffc107;--bad:#e55353}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}
.container{max-width:1300px;margin:24px auto;padding:0 16px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#0e1730;border-bottom:1px solid #1e2a4a}
.brand{margin: 15px;}
.menu a{margin:0 8px;color:var(--muted)}
.menu a.logout{color:#ff6b6b}
h1{margin:8px 0 16px}
.card{background:var(--card);border:1px solid #223054;border-radius:12px;padding:16px;margin-bottom:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
label{margin-top: 15px;display:flex;flex-direction:column;gap:6px;color:var(--muted)}
input,select,textarea,button{border:1px solid #2a3a63;background:#10192d;color:var(--text);border-radius:8px;padding:10px}
button,.btn{cursor:pointer;margin:10px}
.btn{display:inline-block;padding:8px 12px;border:1px solid #2a3a63;border-radius:8px}
.btn.active{background:var(--pri);border-color:var(--pri)}
.search{display:flex;gap:8px}
.head-flex{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
}

.card .title{font-weight:600;margin-top:6px}
.avatar,.logo{width:60px;height:60px;border-radius:8px;background:#0c1426;background-size:cover;background-position:center}
.client .status-row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.tag{background:#0c1426;border:1px solid #213156;border-radius:999px;padding:2px 8px;color:#cbd6f5}
.tag.t1{border-color:#ff8b8b}
.tag.t2{border-color:#ffd27a}
.tag.t3{border-color:#7ad29d}

.list{border:1px solid #223054;border-radius:12px;overflow:hidden}
.list-head,.list-row{display:grid;grid-template-columns:2fr 3fr 2fr 1fr 1fr 1fr;gap:8px; align-items:center; /* 👈 adiciona isso */}
.list-head{background:#0f1931;color:#a8b3cf;padding:10px;border-bottom:1px solid #223054}
.list-row{padding:10px;border-bottom:1px solid #1a2543}
.list-row:last-child{border-bottom:none}
.subject{cursor:pointer}

.badge{padding:4px 10px;border-radius:999px;border:1px solid #2a3a63;font-size:12px}
.badge-pendente{background:#201227;border-color:#5b234a}
.badge-aguardando{background:#2a1e12;border-color:#8a5f1a}
.badge-concluida{background:#12271c;border-color:#2a6d3e}

.auth{display:grid;place-items:center;height:80vh}
.hint{color:#8492b4;font-size:12px;margin-top:8px}

/* Kanban */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kan-head{font-weight:700;margin-bottom:8px}
.kan-card{background:var(--card);border:1px solid #223054;border-radius:10px;padding:10px;margin-bottom:10px}
.kan-top{display:flex;justify-content:space-between;color:#a8b3cf}
.kan-actions{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.kan-actions button{width:38px}
.urg{color:#ff9c9c}

/* Calendar */
.calendar{border:1px solid #223054;border-radius:12px;overflow:hidden}
.cal-grid{display:grid}
.cal-month{grid-template-columns:repeat(7,1fr)}
.cal-week{grid-template-columns:repeat(7,1fr)}
.cal-day{grid-template-columns:1fr}
.cal-cell{min-height:120px;border-bottom:1px solid #1a2543;border-right:1px solid #1a2543;padding:8px}
.cal-cell:nth-child(7n){border-right:none}
.cal-date{font-size:12px;color:#a8b3cf;margin-bottom:6px}
.cal-item{background:#0c1426;border:1px solid #213156;border-radius:6px;padding:6px;margin-bottom:6px}
.mt{margin-top:16px}
.inline{display:flex;gap:8px;align-items:center}
.chk{display:flex;align-items:center;gap:8px;margin-top:8px}

/* Kanban colunas com fundo */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kan-col{border:1px solid #223054;border-radius:12px;padding:8px;background:rgba(12,20,38,0.6)}
.kan-col.kan-pendente{background:linear-gradient(180deg, rgba(32,18,39,0.35), rgba(12,20,38,0.6))}
.kan-col.kan-agendar{background:linear-gradient(180deg, rgba(18,26,40,0.35), rgba(12,20,38,0.6))}
.kan-col.kan-aguardando{background:linear-gradient(180deg, rgba(42,30,18,0.35), rgba(12,20,38,0.6))}
.kan-col.kan-concluida{background:linear-gradient(180deg, rgba(18,39,28,0.35), rgba(12,20,38,0.6))}

/* Badge extra para 'agendar' */
.badge-agendar{background:#121e2a;border-color:#2f6ea1}

/* Tags nos cards de cliente (inclui Agendar) */
.tag.t4{border-color:#76b2ff}


/* Picker de status */
.status-picker{background:#0f1931;border:1px solid #223054;border-radius:12px;padding:6px;z-index:9999;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.status-list{display:flex;gap:6px}
.status-opt{border:1px solid #2a3a63;background:#10192d;color:#e9eefc;border-radius:999px;padding:6px 10px;font-size:12px}
.status-opt:hover{border-color:#3f8cff}
.status-opt.is-current{background:#16233d;border-color:#3f8cff}

/* Kanban – 4 colunas fixas (25% cada) */
.kanban{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  width:100%;
}

.kan-col{
  border:1px solid #223054;
  border-radius:12px;
  padding:8px;
  background:rgba(12,20,38,0.6);
  min-height:200px;
}

/* Cabeçalho da coluna */
.kan-head{
  position:sticky;
  top:0;
  background:rgba(11,18,32,0.96);
  font-weight:700;
  margin-bottom:8px;
  padding-bottom:4px;
}

/* Coloração leve por status */
.kan-col.kan-pendente{
  background:#00000000;
}
.kan-col.kan-aguardando{
  background:#00000000;
}
.kan-col.kan-agendar{
  background:#00000000;
}
.kan-col.kan-concluida{
  background:#00000000;
}




/* ---- Abas de visualização ---- */
.view-tabs{
  display:flex; gap:10px; margin:8px 0 18px !important;
}
.view-tabs a{
  padding:10px 14px !important;
  border:1px solid #2a3a63;
  border-radius:12px;
  color:#cbd6f5; opacity:.85;
  background:#10192d;
  transition:opacity .15s ease, transform .03s ease, box-shadow .15s ease;
}
.view-tabs a:hover{ opacity:1 }
.view-tabs a.on{
  opacity:1!important;
  background:var(--pri)!important;
  color:#fff;
  border-color:var(--pri);
  box-shadow:0 0 0 2px rgba(63,140,255,.18) inset, 0 6px 18px rgba(0,0,0,.25);
}

/* Chip de meta do mês (verde/amarelo) */
.chip{display:inline-block;border-radius:999px;padding:4px 10px;border:1px solid #2a3a63;background:#10192d;color:#e9eefc;font-size:12px}
.chip.quota-warn{background:#2a1e12;border-color:#8a5f1a;color:#ffd27a}   /* amarelo */
.chip.quota-ok{background:#12271c;border-color:#2a6d3e;color:#9be4b8}     /* verde */

.status-block{margin-top:10px}
.status-caption{font-weight:600;margin-bottom:4px}
.status-caption.muted{color:#a8b3cf;font-weight:500}





/* Badges urgência/captação */
.badge-urg{background:#35131a;border-color:#a33b57;color:#ffb3c2}
.badge-norm{background:#10192d;border-color:#2a3a63;color:#cbd6f5}
.badge-cap{background:#12212f;border-color:#2f6ea1;color:#9ccaff}

/* Avatares/logos pequenos inline */
.with-img{display:flex;align-items:center;gap:8px}
.mini-avatar,.mini-logo{width:40px;height:40px;border-radius:50%;background:#0c1426;background-size:cover;background-position:center;display:inline-block}

/* (se logo quadrado) */
.mini-logo{border-radius:4px}

/* Abas (garantia de estilo) */
.view-tabs{display:flex;gap:10px;margin:8px 0 18px}
.view-tabs .tab{
  display:inline-block;padding:8px 14px;border:1px solid #2a3a63;border-radius:999px;
  color:#cbd6f5;opacity:.85;transition:opacity .15s, transform .04s;background:#10192d
}
.view-tabs .tab:hover{opacity:1}
.view-tabs .tab.on{
  background:var(--pri);border-color:var(--pri);color:#fff;opacity:1;
  box-shadow:0 0 0 2px rgba(63,140,255,.18) inset
}

/* Header sort */
.sortable{cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.sortable .arrows{font-size:10px;opacity:.6}
.sortable.active{color:#fff}


.note-icon{margin-left:6px;font-size:13px;opacity:.75}
.kan-title a{color:inherit;text-decoration:none}
.kan-title a:hover{text-decoration:underline}
.subject a{color:inherit;text-decoration:none}
.subject a:hover{text-decoration:underline}

.socials-wrapper{margin-top:12px}
.social-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:6px}
.btn-secondary{border:1px solid #2a3a63;background:#10192d;color:#cbd6f5;border-radius:8px;padding:6px 10px;font-size:13px}
.btn-secondary:hover{border-color:#3f8cff}
@media(max-width:1300px){
  .social-row{grid-template-columns:1fr 1fr}
}





.container{
  width:100%!important;
  max-width:none!important;      /* ou comente essa linha, se preferir */
  margin:24px auto!important;
  padding:0 24px!important;      /* um respiro nas laterais pra não colar na borda */
}



.list,
.calendar,
.kanban{
  width:100% !important;
}



.list-row{
  cursor:pointer;
}

.kan-card{
  cursor:pointer;
}


.cal-item{
  cursor:pointer;
}


.cal-item .cal-subject{margin-bottom:2px;}
.cal-item .cal-meta{opacity:.8;margin-bottom:2px;}
.cal-item .cal-desc{opacity:.7;}




/* Kanban – ajustar layout interno do card */
.kan-card{
  cursor:pointer;
  background:var(--card);
  border:1px solid #223054;
  border-radius:10px;
  padding:10px;
  margin-bottom:10px;
}

/* Topo: data + tags (captação, urgente, status) */
.kan-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  color:#a8b3cf;
  margin-bottom:4px;
}

.kan-date{
  font-size:12px;
  opacity:.9;
}

.kan-tags{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  justify-content:flex-end;
}

/* Título */
.kan-title{
  font-weight:600;
  margin-bottom:6px;
}

/* Cliente e responsável lado a lado */
.kan-meta-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:4px;
}

.kan-meta-client,
.kan-meta-user{
  flex:1;
  min-width:0;
}

.kan-meta-client span:last-child,
.kan-meta-user span:last-child{
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Ações (setas) embaixo, mais compactas */
.kan-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:8px;
}

.kan-actions button{
  width:38px;
  padding:4px 0;
}







.section-title{
  font-weight:600;
  margin-bottom:10px;
  color:#e9eefc;
}

/* Grupo de barras horizontais */
.chart-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}

.chart-row{
  display:grid;
  grid-template-columns:110px 1fr 40px;
  gap:8px;
  align-items:center;
}

.chart-label{
  font-size:13px;
  color:#a8b3cf;
}

.chart-bar{
  position:relative;
  height:10px;
  border-radius:999px;
  background:#10192d;
  overflow:hidden;
  border:1px solid #223054;
}

.chart-bar-fill{
  height:100%;
  border-radius:999px;
}

/* Cores por status (reaproveitando paleta) */
.chart-bar-fill.s-pendente{background:#ff8b8b;}
.chart-bar-fill.s-aguardando{background:#ffd27a;}
.chart-bar-fill.s-agendar{background:#76b2ff;}
.chart-bar-fill.s-concluida{background:#7ad29d;}

.chart-value{
  font-size:13px;
  text-align:right;
}

.chart-summary{
  margin-top:10px;
  font-size:13px;
  color:#cbd6f5;
}

/* Top clientes */
.top-clients{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.top-row{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.top-main{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:13px;
}

.top-name{
  color:#e9eefc;
}
.top-count{
  color:#a8b3cf;
}

.top-bar{
  position:relative;
  height:8px;
  border-radius:999px;
  background:#10192d;
  overflow:hidden;
  border:1px solid #223054;
}

.top-bar-fill{
  height:100%;
  background:#3f8cff;
  border-radius:999px;
}




















.menu a.active {
  color: #3BA9FF !important;
  font-weight: 600;
}

.menu a.active:hover {
  color: #3BA9FF !important;
  font-weight: 600;
}

.menu a:hover {
  color: #ffffff80 !important;
}



.filters-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* Toggle Tudo / Minhas */
.toggle-group{
  display:inline-flex;
  align-items:center;
  background:#10192d;
  border-radius:999px;
  padding:3px;
  border:1px solid #2a3a63;
  gap:2px;
}

.toggle-btn{
  display:inline-block;
  padding:6px 16px;
  border-radius:999px;
  font-size:13px;
  color:#cbd6f5;
  text-decoration:none;
  opacity:.75;
  transition:background .15s ease, color .15s ease, opacity .15s ease, transform .04s ease;
}

.toggle-btn:hover{
  opacity:1;
}

.toggle-btn.on{
  background:#3f8cff;          /* azul celeste */
  color:#fff;
  opacity:1;
  box-shadow:0 0 0 2px rgba(63,140,255,.18) inset;
}

























/* Busca + botão "Novo cliente" lado a lado */
.search-with-btn{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.search-with-btn .search{
  margin:0;
}

.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:flex-start;    /* abre de cima pra baixo */
  justify-content:center;
  padding:40px 16px;         /* respiro nas bordas sem criar overflow */
  z-index:999;
  overflow-y:auto;           /* se o conteúdo for grande, só rola em Y */
}


.modal{
  background:var(--card);
  border-radius:12px;
  border:1px solid #223054;
  padding:16px;
  max-width:900px;
  width:100%;
  max-height:90vh;
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}

.modal-head h2{
  margin:0;
  font-size:18px;
}

.modal-close{
  border:none;
  background:transparent;
  color:#cbd6f5;
  font-size:18px;
  cursor:pointer;
}

.modal-body{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.modal-footer{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}









html, body{
  overflow-x: hidden; /* evita barra lateral horizontal em qualquer tela */
}








/* Linha compacta com bolinhas de status (mês e geral) */
.dots-row{
  display:flex;
  gap:6px;
  margin-top:4px;
}

.tag-dot{
  min-width: 32px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s ease;
  text-align: center;
}

.tag-dot.expanded {
  min-width: unset;
  padding: 0 10px;
  white-space: nowrap;
}

/* Botão toggle de legenda */
.btn-legend-toggle{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background:#10192d;
  border:1px solid #2a3a63;
  color:#cbd6f5;
  cursor:pointer;
}
.btn-legend-toggle.on{
  background:#3f8cff;
  border-color:#3f8cff;
  color:#fff;
}

/* Texto que aparece dentro do card ao clicar na bolinha */
.status-hint{
  margin-top:4px;
  font-size:11px;
  color:#cbd6f5;
  min-height:14px;   /* evita pulo de layout */
}



textarea[name="note"] {
  width: 100%;
  min-height: 50px;
  resize: vertical; /* permite aumentar manualmente */
  font-size: 14px;
  padding: 12px;
  line-height: 1.4;
}




.card.client .logo {
    width: 70px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.login-form {
    width: 450px;
}



















/* =========================
   Relatório de e-mails (KingHost)
   ========================== */

.kh-email-banner{
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  border: 1px solid #223054;
  background:#10192d;
  color:#cbd6f5;

  display: inline flex;
  align-items: center;       /* centraliza tudo na vertical */
  flex-direction: row;       /* agora é inline */
  flex-wrap: wrap;           /* evita overflow e quebra suave se precisar */
  gap: 6px;                  /* substitui espaçamento perdido */
}


.kh-email-banner strong{
  font-weight:600;
}

.kh-email-banner__hint{
  font-size:12px;
  color:#a8b3cf;
}

/* variações */
.kh-email-banner--critical{
  background:#35131a;
  border-color:#a33b57;
  color:#ffb3c2;
}
.kh-email-banner--ok{
  background:#12271c;
  border-color:#2a6d3e;
  color:#9be4b8;
}

/* tabela */
.kh-email-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.kh-email-table thead{
  background:#0f1931;
}

.kh-email-table th,
.kh-email-table td{
  padding:8px 10px;
  border-bottom:1px solid #1a2543;
}

.kh-email-table th{
  text-align:left;
  color:#a8b3cf;
  font-weight:500;
}

.kh-email-table td{
  color:#e9eefc;
}

.kh-email-table tr:hover{
  background:rgba(255,255,255,0.02);
}

.kh-email-table .right{
  text-align:right;
}

/* badges da tabela */
.badge-email{
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  border:1px solid #2a3a63;
}

.badge-email--critical{
  background:#35131a;
  border-color:#a33b57;
  color:#ffb3c2;
}

.badge-email--warn{
  background:#2a1e12;
  border-color:#8a5f1a;
  color:#ffd27a;
}

.badge-email--ok{
  background:#12271c;
  border-color:#2a6d3e;
  color:#9be4b8;
}

.badge-email--alias{
  background:#10192d;
  border-color:#2a3a63;
  color:#cbd6f5;
}


/* =========================
   Popup global de e-mails
   ========================== */

/* Popup de aviso de e-mail (KingHost) */
.kh-email-popup{
  position:fixed;
  right:24px;
  bottom:24px;
  max-width:360px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid #3b3445;
  background:rgba(3, 6, 16, 0.96);
  box-shadow:0 16px 40px rgba(0,0,0,.75);
  color:#ffffff;
  font-size:13px;
  line-height:1.5;
  display:flex;
  align-items:flex-start;

  opacity:0;
  pointer-events:none;
  transform:translateY(14px);
  transition:opacity .28s ease, transform .28s ease;
  z-index:9999;
}

.kh-email-popup--visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* Conteúdo em coluna */
.kh-email-popup__content{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.kh-email-popup__title{
  margin:0;
  font-weight:600;
  color:#ffffff;
}

.kh-email-popup__text{
  margin:0;
  color:#e4e9ff;
}

/* Botão azul "Ver detalhes" */
.kh-email-popup__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:6px;
  padding:6px 14px;
  border-radius:999px;
  background:#3f8cff;
  color:#ffffff !important;
  font-size:12px;
  font-weight:500;
  text-decoration:none;
  box-shadow:0 0 0 1px rgba(63,140,255,.25);
}

.kh-email-popup__link:hover{
  text-decoration:none;
  box-shadow:0 0 0 1px rgba(63,140,255,.45);
}

/* Botão X */
.kh-email-popup__close{
  position:absolute;
  top:6px;
  right:8px;
  border:none;
  background:transparent;
  color:#ffffffb3;
  font-size:16px;
  cursor:pointer;
  padding:0;
  line-height:1;
}
.kh-email-popup__close:hover{
  color:#ffffff;
}













/* Popup de aviso de e-mail (KingHost) */
.kh-email-popup{
  position:fixed;
  right:24px;
  bottom:24px;
  max-width:360px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid #3b3445;
  background:rgba(3, 6, 16, 0.96);
  box-shadow:0 16px 40px rgba(0,0,0,.75);
  color:#ffffff;
  font-size:13px;
  line-height:1.5;
  display:flex;
  align-items:flex-start;

  opacity:0;
  pointer-events:none;
  transform:translateY(14px);
  transition:opacity .28s ease, transform .28s ease;
  z-index:9999;
}

.kh-email-popup--visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* Conteúdo em coluna */
.kh-email-popup__content{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.kh-email-popup__title{
  margin:0;
  font-weight:600;
  color:#ffffff;
}

.kh-email-popup__text{
  margin:0;
  color:#e4e9ff;
}

/* Botão azul "Ver detalhes" */
.kh-email-popup__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:6px;
  padding:6px 14px;
  border-radius:999px;
  background:#3f8cff;
  color:#ffffff !important;
  font-size:12px;
  font-weight:500;
  text-decoration:none;
  box-shadow:0 0 0 1px rgba(63,140,255,.25);
}

.kh-email-popup__link:hover{
  text-decoration:none;
  box-shadow:0 0 0 1px rgba(63,140,255,.45);
}

/* Botão X */
.kh-email-popup__close{
  position:absolute;
  top:6px;
  right:8px;
  border:none;
  background:transparent;
  color:#ffffffb3;
  font-size:16px;
  cursor:pointer;
  padding:0;
  line-height:1;
}
.kh-email-popup__close:hover{
  color:#ffffff;
}