/* =====================================================================
   BB Link · Estilos globais
   ===================================================================== */

*{box-sizing:border-box}
body{margin:0;background:#f3f5f9;color:#17283c;font:14px/1.5 system-ui,sans-serif}

/* =====================================================================
   Login overlay
   ===================================================================== */
.login-overlay {
  position: fixed;
  inset: 0;
  background: #0d1a26;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.login-card {
  background: #12273b;
  border: 1px solid #1e3a52;
  border-radius: 14px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.login-brand {
  font-size: 26px;
  font-weight: 850;
  color: #fff;
  margin-bottom: 24px;
  letter-spacing: -1px;
}

.login-brand span { color: #79d7c8; }

.login-card h2 {
  color: #fff;
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: -.3px;
}

.login-card p {
  color: #8ba0b5;
  font-size: 12px;
  margin: 0 0 22px;
}

.login-card label {
  display: block;
  color: #adc0d2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 12px;
}

.login-card input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #24425c;
  border-radius: 7px;
  background: #0d1a2a;
  color: #fff;
  font: inherit;
  margin-top: 4px;
}

.login-card input:focus {
  outline: 2px solid #79d7c8;
  outline-offset: 1px;
}

.login-card button {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: #0a84ff;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin-top: 8px;
  transition: background .15s;
}

.login-card button:hover:not(:disabled) { background: #409cff; }
.login-card button:disabled { opacity: .6; cursor: default; }

.login-error {
  background: #5a2b2b;
  color: #ffd6d6;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12px;
  margin: 12px 0 0 0 !important;
}

.logout-btn {
  margin-top: 12px;
  width: 100%;
  padding: 8px;
  border: 1px solid #2a4058;
  background: transparent;
  color: #adc0d2;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.logout-btn:hover { background: #28455e; color: #fff; }

/* =====================================================================
   Sidebar
   ===================================================================== */
.sidebar{position:fixed;inset:0 auto 0 0;width:236px;background:#12273b;color:#fff;padding:34px 22px;display:flex;flex-direction:column}
.brand{font-size:30px;font-weight:850;letter-spacing:-1px}
.brand span{color:#79d7c8}
.brand small{display:block;font-size:9px;letter-spacing:2px;color:#adc0d2;margin-top:4px}
nav{display:grid;gap:8px;margin-top:48px}
.nav{background:transparent;text-align:left;color:#c7d4e2;border-radius:9px;padding:12px;border:0;font:inherit;cursor:pointer}
.nav.active{background:#28455e;color:white}
.sidebar-note{margin-top:auto;font-size:12px;color:#b4c5d5}
.sidebar-note p{font-size:11px;margin-top:22px}
#mode-badge{display:inline-block;background:#28455e;color:#79d7c8;font-size:10px;padding:3px 8px;border-radius:5px;font-weight:600;letter-spacing:.5px}

/* =====================================================================
   Main + Header
   ===================================================================== */
main{margin-left:236px;padding:36px 38px;max-width:1680px}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px;gap:20px;flex-wrap:wrap}
header h1{font-size:32px;line-height:1.2;letter-spacing:-1px;margin:7px 0 10px}
header p{color:#64758a;margin:8px 0 0}
h2{font-size:19px;line-height:1.4;margin:0 0 10px}
h3{font-size:14px;margin-top:25px}
p{color:#64758a;margin:8px 0 16px}
.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:750;color:#46706d;text-transform:uppercase}
.mode{background:#fff0c8;color:#815708;padding:8px 12px;border-radius:6px;font-size:12px;font-weight:700;white-space:nowrap}

/* =====================================================================
   Header direito
   ===================================================================== */
.header-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.session-badge{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e2e7ee;border-radius:9px;padding:8px 12px;font-size:12px;min-width:220px}
.session-badge .dot{width:10px;height:10px;border-radius:50%;background:#adb5bd;flex-shrink:0}
.session-badge strong{display:block;font-size:12px;color:#111214}
.session-badge small{display:block;font-size:11px;color:#74859a}
.session-on .dot{background:#16704b;box-shadow:0 0 0 3px #d5efe1}
.session-on strong{color:#16704b}
.session-off .dot{background:#a83f35;box-shadow:0 0 0 3px #f8d7d4;animation:pulse 1.5s infinite}
.session-off strong{color:#a83f35}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.icon-btn{background:transparent;border:0;color:#74859a;font-size:16px;cursor:pointer;padding:0 4px}
.icon-btn:hover{color:#17675e}

/* =====================================================================
   Toolbar + métricas
   ===================================================================== */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px;flex-wrap:wrap}
.toolbar h2{margin:0}
.toolbar label{display:flex;gap:10px;align-items:center;font-size:12px;font-weight:600;color:#566a7d}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.metrics.metrics-5{grid-template-columns:repeat(5,1fr)}
.metrics article,.panel{background:white;border:1px solid #e2e7ee;border-radius:12px;padding:22px}
.metrics span{color:#566a7d;font-size:12px}
.metrics strong{display:block;font-size:35px;line-height:1.3;margin:8px 0}
.metrics small{color:#74859a;font-size:11px}
.caption{font-size:11px;line-height:1.6}

/* =====================================================================
   Workspace
   ===================================================================== */
.workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:20px;margin-top:24px}
.table-scroll{overflow:auto}
table{border-collapse:collapse;width:100%;white-space:nowrap;text-align:left;font-size:12px}
th{padding:12px 9px;border-bottom:1px solid #dce3ed;color:#74859a;font-weight:600}
td{padding:14px 9px;border-bottom:1px solid #edf0f5}
td small{display:block;color:#74859a}
.selected-row{background:#f1f8f7}

/* =====================================================================
   Badges — estados
   ===================================================================== */
.badge{display:inline-block;border-radius:5px;padding:4px 7px;background:#eef2f7;color:#536880;font-size:11px;font-weight:600}
.badge.DONE{background:#e1f4eb;color:#16704b}
.badge.FAILED,.badge.INTERRUPTED{background:#fce9e8;color:#a83f35}
.badge.TOKEN,.badge.LOGIN,.badge.REVIEW,.badge.AGUARDANDO_SESSAO,.badge.NEEDS_TOKEN,.badge.ASSIGNED{background:#fff1d6;color:#926110}
.badge.PARTIAL{background:#fff1d6;color:#926110}
.badge.QUEUED{background:#eef2f7;color:#536880}
.badge.PROCESSING{background:#e3f0fc;color:#346aff}
.badge.RUNNING{background:#e3f0fc;color:#346aff}
.badge.TOKEN_READY{background:#e1f4eb;color:#16704b}

/* =====================================================================
   Badges — categorias de erro
   ===================================================================== */
.badge.cat-NEGOCIO  { background:#fff1d6; color:#926110; }
.badge.cat-INFRA    { background:#e3f0fc; color:#1c5fb8; }
.badge.cat-OPERACAO { background:#f3e8ff; color:#6b21a8; }
.badge.cat-SISTEMA  { background:#fce9e8; color:#a83f35; }
.badge.cat-JA_POSSUI_CONTA { background:#fff1d6; color:#926110; }
.badge.cat-SUCESSO  { background:#e1f4eb; color:#16704b; }

/* =====================================================================
   Badges — origem do job
   ===================================================================== */
.badge.src-UI       { background:#eef2f7; color:#536880; }
.badge.src-MANUAL   { background:#eef2f7; color:#536880; }
.badge.src-API      { background:#e3f0fc; color:#346aff; }
.badge.src-EXTERNAL { background:#e3f0fc; color:#346aff; }
.badge.src-IMPORT   { background:#e1f4eb; color:#16704b; }
.badge.src-WHATSAPP { background:#d7f3ec; color:#0a6b5e; }

/* =====================================================================
   Botões + inputs
   ===================================================================== */
button,input,select,textarea{font:inherit}
button{cursor:pointer;background:#17675e;color:#fff;border:0;border-radius:7px;padding:11px 16px;font-weight:650;transition:background .15s}
button:hover:not(:disabled){background:#145349}
button:disabled{opacity:.45;cursor:default}
.secondary{background:#edf2f6;color:#395168}
.secondary:hover:not(:disabled){background:#dfe6ee}
.small{padding:8px 10px;font-size:12px}
.danger{color:#994339}
.danger:hover:not(:disabled){background:#fce9e8}
.table-button{padding:7px 9px;font-size:11px}
.table-button.danger{color:#a83f35;background:#fce9e8}
.table-button.danger:hover:not(:disabled){background:#f5d5d2}

label{display:grid;gap:6px;font-size:12px;font-weight:600;color:#33475b}
input,select{padding:10px 12px;border:1px solid #cdd7e1;border-radius:7px;background:white;color:#21354a;min-width:0}
input:focus,select:focus{outline:2px solid #85beb7;outline-offset:1px}
input[readonly]{background:#f3f6f9;color:#74859a}
form{display:grid;gap:17px;margin:18px 0}
form small{font-weight:400;color:#7c8999}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-panel{max-width:780px}
fieldset{border:1px solid #e2e7ee;border-radius:8px;padding:14px 18px;display:grid;gap:10px}
fieldset legend{font-size:12px;font-weight:600;color:#566a7d;padding:0 8px}

.checkbox{display:flex;align-items:center;gap:10px;font-weight:500;cursor:pointer;color:#33475b}
.checkbox input[type="checkbox"]{width:auto;min-width:0;padding:0;margin:0;cursor:pointer}
.row-actions{display:flex;gap:10px;flex-wrap:wrap}

a.button, a.secondary {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
a.button {
  background: #17675e;
  color: #fff;
  border-radius: 7px;
  padding: 11px 16px;
  font-weight: 650;
}
a.button:hover { background: #145349; }
a.secondary {
  background: #edf2f6;
  color: #395168;
  border-radius: 7px;
  padding: 11px 16px;
  font-weight: 650;
}
a.secondary:hover { background: #dfe6ee; }

/* =====================================================================
   Alerts
   ===================================================================== */
.alert{background:#edf5f4;color:#275f59;padding:12px 15px;border-radius:8px}
.alert.error{background:#fff0ee;color:#a53c35}
.attention{background:#fff5dc;border:1px solid #ecdbad;border-radius:10px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:23px}
.attention p{margin:3px 0;font-size:12px}
.attention button{background:#936314;white-space:nowrap}
.attention button:hover:not(:disabled){background:#7a5210}

/* =====================================================================
   Detalhe + timeline
   ===================================================================== */
#result button{margin-top:9px}
#result input{width:100%}
.mono,code,pre{font-family:ui-monospace,monospace;font-size:11px;overflow-wrap:anywhere}
.mono{color:#74859a}
code{background:#f3f6f9;padding:2px 5px;border-radius:4px}
pre{white-space:pre-wrap;background:#f3f6f9;padding:15px;border-radius:6px}
.timeline{padding-left:18px;font-size:12px}
.timeline li{padding:0 0 17px 8px;border-left:1px solid #e4eaf0;list-style:disc}
.timeline small{display:block;color:#8895a3}
.timeline p{margin:4px 0 0}

.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:12px}
.pagination button{padding:7px 10px}
.empty{padding:30px 0;text-align:center;color:#8a98a9}

#detailCode {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}
#detailCode .cat-titulo {
  font-weight: 700;
  color: #111214;
  font-size: 13px;
}
#detailCode .cat-codigo {
  background: transparent;
  padding: 0;
  color: #74859a;
  font-size: 10px;
  font-family: ui-monospace, monospace;
}

.erro-desc {
  font-weight: 600;
  color: #21354a;
  margin: 10px 0 8px;
  font-size: 13px;
  line-height: 1.5;
}
.erro-detalhe {
  background: #f3f6f9;
  border-radius: 6px;
  padding: 10px 12px;
  color: #566a7d;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, monospace;
}
.erro-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.erro-tag.retry   { background:#e1f4eb; color:#16704b; }
.erro-tag.noretry { background:#fce9e8; color:#a83f35; }

/* =====================================================================
   Fila
   ===================================================================== */
.queue-panel{margin-top:20px}
.queue-list{padding:0;margin:0;list-style:none;max-height:230px;overflow:auto}
.queue-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #edf0f5;font-size:12px}

.queue-panel::after {
  content: "Jobs de lotes importados aparecem apenas em Importar → abrir execução.";
  display: block;
  margin-top: 12px;
  font-size: 11px;
  color: #8a98a9;
  text-align: center;
}

#queuePausedBanner { animation: fadeIn .3s ease-in; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
   Bulk actions
   ===================================================================== */
.check-col { width: 32px; }
.check-col input { cursor: pointer; }
#rows input[type="checkbox"] { cursor: pointer; }

.bulk-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #eef5f4;
  border: 1px solid #c9e3de;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #275f59;
}
.bulk-bar .row-actions { gap: 6px; }

/* =====================================================================
   Accounts / Recipients
   ===================================================================== */
.account-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #edf0f5}
.account-row.active{background:#f1f8f7;margin:0 -12px;padding:12px}
.account-row.inactive{opacity:.6}
.account-row strong{display:block;font-size:14px;color:#111214}
.account-row small{display:block;color:#74859a;font-size:11px}
.account-row > div:last-child{display:flex;gap:6px}

/* =====================================================================
   Agents — cards + saúde
   ===================================================================== */
.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.agent-card{background:#fff;border:1px solid #e2e7ee;border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px}
.agent-card .agent-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.agent-card h3{margin:0;font-size:16px;color:#111214}
.agent-card .agent-loc{font-size:11px;color:#74859a;margin-top:2px}

.agent-card .agent-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:12px;color:#64758a}
.agent-card .agent-meta b{color:#111214;font-weight:600;display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}

.agent-card .agent-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:auto;padding-top:8px;border-top:1px solid #edf0f5}

.agent-status{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap}
.agent-status .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

.agent-status.on   { background:#e1f4eb; color:#16704b; }
.agent-status.on   .dot { background:#16704b; }
.agent-status.warn { background:#fff1d6; color:#926110; }
.agent-status.warn .dot { background:#e3a702; }
.agent-status.bad  { background:#ffe4cc; color:#8a4200; }
.agent-status.bad  .dot { background:#e07800; }
.agent-status.off  { background:#fce9e8; color:#a83f35; }
.agent-status.off  .dot { background:#a83f35; }
.agent-status.idle { background:#e3f0fc; color:#1c5fb8; }
.agent-status.idle .dot { background:#1c5fb8; }

.agent-health-reason{
  font-size:11px;
  color:#74859a;
  margin-top:3px;
  font-style:italic;
}

.agent-stats{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  padding:10px 12px;
  background:#f9fbfd;
  border-radius:8px;
  margin:10px 0;
  font-size:11px;
  color:#566a7d;
}
.agent-stats .stat{text-align:center}
.agent-stats .stat b{
  display:block;
  color:#74859a;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.4px;
  margin-bottom:3px;
  font-weight:600;
}
.agent-stats .stat span{
  display:block;
  color:#111214;
  font-weight:700;
  font-size:13px;
}

.agent-batch-warn {
  background: #fff1d6;
  border-left: 3px solid #e3a702;
  color: #815708;
  font-size: 11px;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 8px 0 4px;
  line-height: 1.4;
}

.agents-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e2e7ee;
  border-radius: 10px;
  font-size: 12px;
}
.agents-summary .sum-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f3f6f9;
  color: #566a7d;
}
.agents-summary .sum-item b { font-size: 14px; color: #111214; }
.agents-summary .sum-item.healthy  { background:#e1f4eb; color:#16704b; }
.agents-summary .sum-item.attention{ background:#fff1d6; color:#926110; }
.agents-summary .sum-item.degraded { background:#ffe4cc; color:#8a4200; }
.agents-summary .sum-item.offline  { background:#fce9e8; color:#a83f35; }
.agents-summary .sum-item.idle     { background:#e3f0fc; color:#1c5fb8; }

.agent-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e2e7ee;border-radius:9px;padding:6px 10px;font-size:12px}
.agent-pill .dot{width:8px;height:8px;border-radius:50%;background:#adb5bd}
.agent-pill.on .dot{background:#16704b}
.agent-pill.off .dot{background:#a83f35}

/* =====================================================================
   API key box
   ===================================================================== */
.api-key-box{background:#fff5dc;border:1px solid #ecdbad;border-radius:10px;padding:16px;margin:12px 0}
.api-key-box strong{color:#815708;font-size:14px}
.api-key-box code{display:block;background:#fff;border:1px dashed #cdd7e1;border-radius:6px;padding:10px;margin:8px 0;font-size:12px;word-break:break-all;font-family:ui-monospace,monospace;color:#111214}
.api-key-box .warn{color:#a83f35;font-size:11px;font-weight:600;margin:6px 0}

/* =====================================================================
   Modais
   ===================================================================== */
.modal{position:fixed;inset:0;background:rgba(18,39,59,.65);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal-content{background:#fff;border-radius:12px;padding:28px 32px;max-width:520px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:90vh;overflow-y:auto}
.modal-content h2{margin:0 0 8px;font-size:22px;color:#111214}
.modal-content p{color:#64758a;font-size:13px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px;flex-wrap:wrap}

/* =====================================================================
   Batches / Importação
   ===================================================================== */
.batch-card {
  background: #fff;
  border: 1px solid #e2e7ee;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 12px;
}
.batch-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.batch-head h3 { margin: 0; font-size: 16px; color: #111214; }
.batch-head small { color: #74859a; font-size: 11px; }

.batch-metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
}
.batch-metrics > div {
  background: #f3f6f9;
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
  color: #111214;
  font-weight: 700;
}
.batch-metrics b {
  display: block;
  color: #566a7d;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
  font-weight: 600;
}

.batch-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 11px;
  color: #74859a;
}
.batch-progress .bar {
  flex: 1;
  height: 8px;
  background: #eef2f7;
  border-radius: 6px;
  overflow: hidden;
}
.batch-progress .bar > span {
  display: block;
  height: 100%;
  background: #17675e;
  transition: width .3s;
}

.batch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

details summary { font-weight: 600; color: #33475b; cursor: pointer; padding: 4px 0; }

#impResult table { width: 100%; border-collapse: collapse; font-size: 11px; }
#impResult th, #impResult td { padding: 6px 8px; border-bottom: 1px solid #edf0f5; text-align: left; }
#impResult th { background: #f3f6f9; color: #566a7d; }

#batchDetailTitle { flex: 1; margin: 0 12px; font-size: 18px; }

.batch-filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #f3f6f9;
  border-radius: 8px;
  align-items: center;
}
.batch-filter-bar label { font-size: 11px; font-weight: 600; color: #566a7d; margin-right: 4px; }
.batch-filter-bar button {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 6px;
  background: #fff;
  color: #33475b;
  border: 1px solid #dce3ed;
  font-weight: 600;
}
.batch-filter-bar button.active { background: #17675e; color: #fff; border-color: #17675e; }

.batch-summary {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.batch-summary > div {
  background: #f3f6f9;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
}
.batch-summary b {
  display: block;
  color: #566a7d;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
  font-weight: 600;
}
.batch-summary span {
  display: block;
  color: #111214;
  font-weight: 700;
  font-size: 18px;
}

.jobs-of-batch-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.jobs-of-batch-table th,
.jobs-of-batch-table td { padding: 8px 10px; border-bottom: 1px solid #edf0f5; text-align: left; }
.jobs-of-batch-table th {
  background: #f3f6f9;
  color: #566a7d;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
}
.jobs-of-batch-table code { font-size: 11px; }
.jobs-of-batch-table a { color: #17675e; text-decoration: underline; }

/* =====================================================================
   Modal — iniciar execução
   ===================================================================== */
#startBatchName {
  font-weight: 700;
  color: #111214;
  font-size: 14px;
  margin: 4px 0 16px;
}

#startBatchAgents {
  display: grid;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}
#startBatchAgents label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #f9fbfd;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 500;
  color: #33475b;
}
#startBatchAgents label:hover { background: #eef5f4; }
#startBatchAgents input[type="checkbox"] { margin: 0; width: auto; min-width: 0; padding: 0; }
#startBatchAgents .agent-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  margin-left: auto;
}
#startBatchAgents .agent-badge.ok   { background: #e1f4eb; color: #16704b; }
#startBatchAgents .agent-badge.warn { background: #fff1d6; color: #926110; }
#startBatchAgents .agent-badge.off  { background: #fce9e8; color: #a83f35; }

/* =====================================================================
   WhatsApp
   ===================================================================== */
.wa-status-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #f3f6f9;
  border: 1px solid #e2e7ee;
  border-radius: 10px;
}
.wa-status-box .wa-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #adb5bd; flex-shrink: 0;
}
.wa-status-box.wa-on .wa-dot { background: #16704b; box-shadow: 0 0 0 4px #d5efe1; }
.wa-status-box.wa-off .wa-dot { background: #a83f35; box-shadow: 0 0 0 4px #f8d7d4; }
.wa-status-box strong { display: block; font-size: 14px; color: #111214; }
.wa-status-box small { display: block; font-size: 11px; color: #74859a; margin-top: 2px; }

.wa-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.wa-filter {
  padding: 5px 12px;
  font-size: 11px;
  border-radius: 6px;
  background: #fff;
  color: #566a7d;
  border: 1px solid #dce3ed;
  font-weight: 600;
}
.wa-filter.active { background: #17675e; color: #fff; border-color: #17675e; }

.input-with-eye { position: relative; display: flex; }
.input-with-eye input { flex: 1; padding-right: 40px; }
.input-with-eye .eye-btn {
  position: absolute;
  right: 4px; top: 50%; transform: translateY(-50%);
  background: transparent; color: #74859a;
  padding: 6px 10px; font-size: 14px;
  border-radius: 6px;
}
.input-with-eye .eye-btn:hover { background: #eef2f6; color: #17675e; }

.wa-agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.wa-agent-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f9fbfd;
  border: 1px solid #e2e7ee;
  border-radius: 8px;
}
.wa-agent-mini strong { display: block; font-size: 13px; color: #111214; }
.wa-agent-mini small { display: block; font-size: 11px; color: #74859a; }

/* =====================================================================
   Rodapé
   ===================================================================== */
footer{font-size:11px;color:#8997a6;margin-top:35px;text-align:center}

/* =====================================================================
   Utilidades
   ===================================================================== */
[hidden]{display:none!important}

/* =====================================================================
   Responsivo
   ===================================================================== */
@media(max-width:1150px){
  .sidebar{width:200px}
  main{margin-left:200px;padding:25px}
  .workspace{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metrics.metrics-5{grid-template-columns:repeat(3,1fr)}
  .agent-grid{grid-template-columns:1fr}
  .batch-metrics{grid-template-columns:repeat(3,1fr)}
  .batch-summary{grid-template-columns:repeat(3,1fr)}
  .agent-stats{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:650px){
  .sidebar{position:static;width:auto;padding:16px}
  .brand{font-size:23px}
  .brand small,.sidebar-note{display:none}
  nav{margin-top:15px;display:flex;gap:4px;flex-wrap:wrap}
  .nav{font-size:11px;padding:8px}
  main{margin:0;padding:18px}
  header{align-items:flex-start;gap:10px}
  header h1{font-size:26px}
  .metrics{gap:8px}
  .metrics article{padding:15px}
  .panel{padding:17px}
  .two{grid-template-columns:1fr}
  .attention{align-items:flex-start;flex-direction:column}
  .mode{font-size:10px}
  .session-badge{min-width:auto;width:100%}
  .header-right{width:100%}
  .modal-content{padding:20px}
  .batch-metrics{grid-template-columns:repeat(2,1fr)}
  .batch-summary{grid-template-columns:repeat(2,1fr)}
  .agent-stats{grid-template-columns:repeat(2,1fr)}
  .agents-summary{gap:6px;padding:8px}
  .agents-summary .sum-item{font-size:11px;padding:3px 7px}
  .bulk-bar{flex-direction:column;gap:8px;align-items:flex-start}
  .metrics.metrics-5{grid-template-columns:repeat(2,1fr)}
}