/* === TechDesk Dashboard Styling v8 === */
:root {
  --td-bg:#f9fafb;
  --td-primary:#0042c4;
  --td-primary-hover:#0033a6;
  --td-card-bg:#fff;
  --td-border:#e5e7eb;
  --td-shadow:0 4px 14px rgba(0,0,0,0.08);
  --td-radius:14px;
  --td-muted:#6b7280;
}

body { background:var(--td-bg)!important; font-family:'Inter',sans-serif; color:#111827; }

/* Cards */
.card, .td-card {
  background:var(--td-card-bg)!important;
  border:1px solid var(--td-border)!important;
  border-radius:var(--td-radius)!important;
  box-shadow:var(--td-shadow)!important;
  padding:22px!important;
  margin-bottom:20px!important;
  transition:box-shadow .2s ease, transform .1s ease!important;
}
.card:hover { transform:translateY(-2px)!important; box-shadow:0 6px 20px rgba(0,0,0,0.08)!important; }

/* Tables inside dashboard */
.card table, .table, .td-table {
  width:100%!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  border:1px solid var(--td-border)!important;
  border-radius:12px!important;
  overflow:hidden!important;
  background:#fff!important;
}
.card table thead th, .table thead th {
  background:#f3f4f6!important;
  font-weight:600!important;
  padding:14px 16px!important;
  border-bottom:1px solid var(--td-border)!important;
  color:#1e293b!important;
  text-align:left!important;
}
.card table td, .table td {
  padding:14px 16px!important;
  border-bottom:1px solid #f1f5f9!important;
  color:#374151!important;
  font-size:14px!important;
}
.card table tr:hover td, .table tr:hover td { background:#f9fafc!important; }

/* Lists inside cards */
.card .list li {
  padding:8px 0!important;
  border-bottom:1px dashed #e5e7eb!important;
  color:#374151!important;
  font-size:14px!important;
}
.card .list li:last-child { border-bottom:none!important; }

/* Buttons */
.td-btn, .btn, button, .button {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:42px!important;
  padding:0 18px!important;
  border-radius:10px!important;
  border:1px solid transparent!important;
  font-weight:600!important;
  font-size:15px!important;
  cursor:pointer!important;
  transition:background .2s, transform .1s!important;
}
.td-btn--primary, .btn-primary, .button.brand {
  background:var(--td-primary)!important;
  color:#fff!important;
}
.td-btn--primary:hover, .btn-primary:hover, .button.brand:hover { background:var(--td-primary-hover)!important; }
.td-btn--ghost, .btn-secondary, .button {
  background:#fff!important;
  color:#111827!important;
  border:1px solid #e5e7eb!important;
}
.td-btn--ghost:hover, .btn-secondary:hover, .button:hover { background:#f3f4f6!important; }

/* Headings inside cards */
.card h3 {
  font-size:17px!important;
  font-weight:600!important;
  margin-bottom:10px!important;
  color:#111827!important;
}
.card p { color:var(--td-muted)!important; margin-bottom:12px!important; }


/* v10 adjustments */
.card.td-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.08);padding:22px;margin-bottom:20px}
.card.td-card h3{font-weight:600;margin-bottom:10px;color:#111827}
.card.td-card p{color:#6b7280;margin-bottom:12px}
table.td-table, table.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff}
table.td-table thead th, table.table thead th{background:#f3f4f6;font-weight:600;padding:14px 16px;border-bottom:1px solid #e5e7eb;color:#1e293b;text-align:left}
table.td-table tbody td, table.table tbody td{padding:14px 16px;border-bottom:1px solid #f1f5f9;color:#374151;font-size:14px}
table.td-table tbody tr:hover td, table.table tbody tr:hover td{background:#f9fafc}


/* Header alignment fix: ações à direita */
.header{
  display:flex;
  align-items:center;
  gap:1rem;
}
.header .banner{
  margin-left:auto!important;
}
.header .actions{
  margin-left:.5rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}

/* Modal de tarefa - campos inline bonitinhos */
#viewTaskDialog .td-detail-field{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:8px;
}
#viewTaskDialog .td-detail-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
#viewTaskDialog .td-detail-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--td-muted);
}
#viewTaskDialog .td-detail-sub{
  margin-top:2px;
}
#viewTaskDialog .td-detail-chip{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  border:1px solid var(--td-border);
  background:#fff;
  padding:3px 9px;
  font-size:12px;
  color:#111827;
}
#viewTaskDialog .td-input{
  width:100%;
  border-radius:10px;
  border:1px solid var(--td-border);
  padding:6px 8px;
  font-size:13px;
  background:#fff;
  color:#111827;
}
#viewTaskDialog .td-input:focus{
  outline:none;
  border-color:var(--td-primary);
  box-shadow:0 0 0 1px rgba(0,66,196,.12);
}

/* Comentários no modal */
#viewTaskDialog .taskComments{
  list-style:none;
  padding:0;
  margin:0;
}

/* Abas mais agradáveis */
#viewTaskDialog .tabBtn{
  font-size:13px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid transparent;
}
#viewTaskDialog .tabBtn.active{
  background:var(--td-primary);
  color:#fff;
  border-color:var(--td-primary);
}

/* WhatsApp — Segmented control (Contas: API não oficial / API oficial Meta) */
.wa-seg{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wa-seg-btn{appearance:none;border:1px solid rgba(148,163,184,.45);background:rgba(255,255,255,.04);color:inherit;padding:8px 12px;border-radius:999px;font-size:.9rem;cursor:pointer;transition:all .15s ease}
.wa-seg-btn:hover{border-color:rgba(148,163,184,.75);transform:translateY(-1px)}
.wa-seg-btn.is-active{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.65);box-shadow:0 6px 20px rgba(99,102,241,.12)}

/* -----------------------------
   WhatsApp — Tabela de contas mais visual
------------------------------ */
.td-table{width:100%;border-collapse:separate;border-spacing:0 10px}
.td-table thead th{font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:rgba(148,163,184,.85);border:0;padding:10px 10px}
.td-table tbody tr{background:rgba(255,255,255,.06);border:1px solid rgba(148,163,184,.18);box-shadow:0 10px 24px rgba(2,8,23,.10)}
.td-table tbody td{border:0;padding:10px 10px;vertical-align:middle}
.td-table tbody tr td:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px}
.td-table tbody tr td:last-child{border-top-right-radius:14px;border-bottom-right-radius:14px}

.td-badge{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;font-size:12px;border:1px solid rgba(148,163,184,.28);background:rgba(255,255,255,.06)}
.td-dot{width:8px;height:8px;border-radius:999px;background:rgba(148,163,184,.65)}
.td-badge.is-on{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10)}
.td-badge.is-on .td-dot{background:rgba(34,197,94,.95)}
.td-badge.is-off{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}
.td-badge.is-off .td-dot{background:rgba(239,68,68,.95)}

.td-phone-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.04)}
.td-phone-pill b{font-weight:700}

.td-phone-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid rgba(148,163,184,.26);background:rgba(255,255,255,.06);font-size:12px;white-space:nowrap}
.td-subcontrol{opacity:.95}

/* ---------- WhatsApp • UX contas (tabelas + avisos) ---------- */
.td-info-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:12px 14px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.td-info-head{display:flex;gap:12px;align-items:center}
.td-info-logo{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.td-info-title{font-weight:900;letter-spacing:.01em}
.td-info-sub{font-size:.92rem;color:var(--muted);line-height:1.35;margin-top:2px}

.td-helpbox{margin:0 0 12px;padding:12px 14px;border-radius:14px;background:rgba(43,108,255,.08);border:1px solid rgba(43,108,255,.22)}
.td-help-title{font-weight:900;margin-bottom:4px}
.td-help-text{font-size:.92rem;color:rgba(232,238,252,.82);line-height:1.35}

/* Deixa a tabela mais “card-like” */
.td-table{border-radius:16px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.22)}
.td-table thead th{background:rgba(255,255,255,.06)}
.td-table tbody tr:hover{background:rgba(255,255,255,.06)}

.td-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);font-size:.82rem;font-weight:800}
.td-pill.green{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.28)}
.td-pill.red{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.28)}
.td-pill.blue{background:rgba(43,108,255,.14);border-color:rgba(43,108,255,.30)}
.td-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem;opacity:.92}