:root{
  --surface:#faf8ff;
  --surface-low:#f2f3ff;
  --surface-mid:#ecedfa;
  --card:#ffffff;
  --text:#191b24;
  --muted:#424656;
  --outline:#c2c6d8;
  --primary:#0050cb;
  --primary-600:#003fa4;
  --shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
  --shadow-hover: 0 10px 26px rgba(17, 24, 39, 0.09);

  --danger:#7F1D1D;     /* BANIDO */
  --warning:#C2410C;    /* RESTRITO / pendente */
  --warn-soft:#FFEDD5;
  --info:#1D4ED8;       /* em verificação */
  --success:#166534;    /* resolvido / enviado */
  --success-soft:#DCFCE7;
  --danger-soft:#FEE2E2;
  --info-soft:#DBEAFE;
  --yellow:#A16207;     /* SEM_NUMERO_CONECTADO / pulado */
  --yellow-soft:#FEF9C3;

  --radius-xl:24px;
  --radius-lg:16px;
  --radius-md:12px;
}

/* Ícones SVG (mapa PHP: _icons.php → window.PAINEL_ICONS) */
svg.ico{
  display:block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.nav-item__icon svg.ico{ width: 20px; height: 20px; }
.icon-btn svg.ico{ width: 20px; height: 20px; }
.btn svg.ico{ width: 18px; height: 18px; flex-shrink: 0; }
.badge svg.ico{ width: 16px; height: 16px; }
.alert-item__dot svg.ico{ width: 15px; height: 15px; }
.wpp-icon svg.ico{ width: 20px; height: 20px; }
.channel__icon svg.ico{ width: 16px; height: 16px; }
.chev svg.ico{ width: 18px; height: 18px; transition: transform 0.2s ease; }
.accordion.is-open .chev svg{ transform: rotate(180deg); }
.status-pill .ico-pill svg{ width: 12px; height: 12px; display: block; }
.status-pill .ico-pill{ display: inline-flex; align-items: center; justify-content: center; }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: linear-gradient(180deg, #f7f5ff 0%, var(--surface) 35%, var(--surface) 100%);
}

.app{
  display:grid;
  /* minmax(0,1fr) evita que a coluna principal herde min-content largo da tabela e estoure a viewport */
  grid-template-columns: 260px minmax(0, 1fr);
  min-height:100vh;
  max-width: 100%;
}

.sidebar{
  background: #fff;
  border-right: 1px solid rgba(194,198,216,0.55);
  padding: 22px 16px;
  display:flex;
  flex-direction:column;
  gap: 18px;
  position:sticky;
  top:0;
  height:100vh;
}
.sidebar__brand{
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  padding: 6px 10px;
}
.sidebar__nav{ display:flex; flex-direction:column; gap:8px; padding: 6px; }
.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: var(--muted);
  border: 1px solid transparent;
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nav-item__icon{
  width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.92;
}
.nav-item:hover{
  background: rgba(0,80,203,0.06);
  border-color: rgba(0,80,203,0.12);
}
.nav-item.is-active{
  background: rgba(0,80,203,0.10);
  border-color: rgba(0,80,203,0.16);
  color: var(--primary-600);
}
.sidebar__user{ margin-top:auto; padding: 6px; }
.user-chip{
  display:flex; gap:10px; align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface-low);
  border: 1px solid rgba(194,198,216,0.5);
}
.user-chip__avatar{
  width:34px; height:34px; border-radius: 999px;
  background: rgba(0,80,203,0.14);
  display:grid; place-items:center;
  font-weight:600; color: var(--primary-600);
}
.user-chip__name{ font-weight:600; font-size: 13px; line-height: 16px; }
.user-chip__email{ font-size: 12px; color: var(--muted); }
.user-chip__logout{
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-600);
  text-decoration: none;
}
.user-chip__logout:hover{ text-decoration: underline; }

/* Página de login (sem layout do app) */
.login-page{
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, #f7f5ff 0%, var(--surface) 35%, var(--surface) 100%);
}
.login-shell{ width: min(420px, 100%); }
.login-card{
  background: var(--card);
  border: 1px solid rgba(194, 198, 216, 0.55);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 28px 26px 22px;
}
.login-brand{
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--primary-600);
  margin-bottom: 6px;
}
.login-title{
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.login-hint{
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 12px;
}
.login-hint--warn{
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(0, 80, 203, 0.08);
  border: 1px solid rgba(0, 80, 203, 0.18);
  color: var(--text);
}
.login-error{
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
}
.login-form{ display: flex; flex-direction: column; gap: 6px; }
.login-label{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 8px;
}
.login-label:first-of-type{ margin-top: 0; }
.login-input{ width: 100%; }
.login-submit{ margin-top: 16px; width: 100%; justify-content: center; }
.login-toolbar{
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(194, 198, 216, 0.45);
}
html[data-theme="dark"] .login-page{
  background: linear-gradient(165deg, #0b0d12 0%, var(--surface) 42%, #141820 100%);
}
html[data-theme="dark"] .login-card{
  background: var(--card);
  border-color: var(--outline);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .login-hint{ color: var(--muted); }
html[data-theme="dark"] .login-hint--warn{
  background: rgba(110, 168, 255, 0.12);
  border-color: rgba(110, 168, 255, 0.28);
  color: var(--text);
}
html[data-theme="dark"] .login-toolbar{
  border-top-color: var(--outline);
}

.main{
  display:flex;
  flex-direction:column;
  min-width: 0;
  max-width: 100%;
}
.topbar{
  min-height: 76px;
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:flex-end;
  gap: 12px 16px;
  padding: 10px 28px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(194,198,216,0.55);
}
.topbar__right{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content: flex-end;
  gap: 10px 14px;
  flex-shrink: 0;
}
.icon-btn{
  border:none; background: transparent;
  width:38px; height:38px;
  border-radius: 999px;
  cursor:pointer;
  transition: background .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
a.icon-btn{
  text-decoration: none;
  color: inherit;
}
.icon-btn:hover{ background: rgba(0,0,0,0.04); }
.icon-btn--notif{
  position: relative;
}
.topbar-notif-badge{
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  letter-spacing: -0.03em;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92);
  pointer-events: none;
}
.topbar-notif-badge--compact{
  font-size: 8px;
  padding: 0 3px;
  letter-spacing: -0.04em;
}
.icon-btn--themeToggle{
  position: relative;
}
.theme-toggle__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html[data-theme="dark"] .theme-toggle__icon--moon{
  display: none;
}
html:not([data-theme="dark"]) .theme-toggle__icon--sun{
  display: none;
}
.topbar__divider{ width:1px; height:26px; background: rgba(194,198,216,0.9); flex-shrink: 0; }
.topbar__title{
  font-weight: 600;
  color: var(--muted);
  max-width: min(320px, 100%);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content{
  padding: 32px;
  min-width: 0;
  max-width: 100%;
}

.page-head{
  display:flex;
  flex-wrap: wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.page-head > div:first-child{
  flex: 1 1 220px;
  min-width: 0;
}
.page-subtitle{
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}
.page-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  flex-shrink: 0;
}
.export-csv-wrap{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.export-csv-field{
  margin: 0;
  min-width: min(100%, 200px);
  max-width: 100%;
}

.page-title{
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 4px 0 18px 0;
}

.filters-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 1200px){
  .filters-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.filter-card{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(194,198,216,0.55);
  border-radius: var(--radius-xl);
  padding: 14px;
  box-shadow: 0 1px 0 rgba(17,24,39,0.02);
}
.filter-card__label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.control--soft{
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
}
.pill-group{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.pill{
  border: 1px solid rgba(194,198,216,0.85);
  background: rgba(255,255,255,0.85);
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 600;
  font-size: 12px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pill:hover{
  border-color: rgba(0,80,203,0.22);
  box-shadow: 0 8px 18px rgba(17,24,39,0.06);
}
.pill.is-active{
  background: rgba(0,80,203,0.12);
  border-color: rgba(0,80,203,0.22);
  color: var(--primary-600);
}
.check-row{ display:flex; gap: 14px; align-items:center; flex-wrap:wrap; }
.check{ display:flex; gap: 10px; align-items:center; font-weight: 600; color: var(--muted); }
.check input{ width: 16px; height: 16px; accent-color: var(--primary); }
.period{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.alerts-card{
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.80);
}
.alerts-card__header{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:space-between;
  padding: 16px 18px;
  gap: 12px;
  min-width: 0;
}
.alerts-user{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
}
.avatar{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(0,80,203,0.10);
  color: var(--primary-600);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.user-title{
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.user-sub{ color: var(--muted); font-size: 12px; margin-top: 3px; }
.alerts-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items:center;
  justify-content: flex-end;
  min-width: 0;
}
.meta-col{
  display:flex;
  flex-direction:column;
  gap: 6px;
  align-items:flex-start;
}
.meta-col__label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(66,70,86,0.85);
}
.meta-col__value{ display:flex; gap: 10px; align-items:center; }
.badge--count{
  background: var(--danger-soft);
  color: var(--danger);
}
.badge--avisos-limpo{
  background: var(--surface-mid);
  color: var(--muted);
  font-weight: 600;
}
.chev{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(194,198,216,0.7);
  background: rgba(255,255,255,0.7);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
}

.alerts-card__body{
  padding: 0 18px 18px 18px;
  display:none;
}
.accordion.is-open .alerts-card__body{ display:block; }

.wpp-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 6px;
}
.wpp-box{
  border-radius: 20px;
  border: 1px solid rgba(194,198,216,0.55);
  background: rgba(255,255,255,0.78);
  padding: 14px;
  min-height: 180px;
}
.wpp-head{
  display:flex;
  flex-wrap: wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.alert-bulk-bar{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin: 0 0 8px 0;
  padding: 6px 0;
  border-bottom: 1px solid rgba(194,198,216,0.35);
}
.alert-bulk-bar__lab{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.alert-bulk-bar__lab input{
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}
.wpp-left{
  display:flex;
  gap: 12px;
  align-items:center;
  min-width: 0;
}
.wpp-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(0,0,0,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
}
.wpp-title{ font-weight: 700; }
.wpp-tag{ font-size: 12px; color: var(--muted); margin-top: 3px; }
.status-chip{
  border: 1px solid rgba(194,198,216,0.8);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.85);
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
  max-width: 100%;
}
.status-chip--pendente{ background: rgba(0,80,203,0.12); border-color: rgba(0,80,203,0.18); color: var(--primary-600); }
.status-chip--emverificacao{ background: rgba(29,78,216,0.12); border-color: rgba(29,78,216,0.18); color: var(--info); }
.status-chip--resolvido{ background: rgba(22,101,52,0.10); border-color: rgba(22,101,52,0.18); color: var(--success); }

.alert-item{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap: 10px;
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid rgba(194,198,216,0.40);
  margin-top: 10px;
}
.alert-item__chk{
  flex-shrink: 0;
  padding-top: 2px;
  cursor: pointer;
  line-height: 0;
}
.alert-item__chk input{
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}
.alert-item__chk-spacer{
  width: 18px;
  flex-shrink: 0;
}
.alert-item__main{
  flex: 1;
  min-width: 0;
}
.alert-item--BANIDO{ background: rgba(186,26,26,0.08); }
.alert-item--RESTRITO{ background: rgba(194,65,12,0.08); }
.alert-item--SEM_NUMERO_CONECTADO{ background: rgba(161,98,7,0.10); }
.alert-item__left{ display:flex; gap: 10px; align-items:flex-start; }
.alert-item__dot{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.55);
}
.alert-item__title{ font-weight: 800; font-size: 12px; letter-spacing: 0.04em; }
.alert-item__desc{ color: var(--muted); font-size: 12px; margin-top: 3px; }
.alert-item__aside{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  max-width: min(100%, 14rem);
}
.status-chip--inline{
  padding: 6px 10px;
  font-size: 11px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.alert-item__time{ color: rgba(66,70,86,0.85); font-size: 12px; white-space:nowrap; }
.alert-item__del{
  width: 30px;
  height: 30px;
  padding: 0;
  flex-shrink: 0;
}
.alert-item__del svg.ico{ width: 14px; height: 14px; }

.alerts-footer{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 6px 0 6px;
  min-width: 0;
}
.link{
  color: var(--muted);
  font-weight: 700;
  text-decoration:none;
}
.link:hover{ text-decoration:underline; }
.link--with-icon{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.link--with-icon svg.ico{ width: 16px; height: 16px; flex-shrink: 0; }
.btn-dark{
  border:none;
  border-radius: 12px;
  padding: 10px 14px;
  background: #121826;
  color:#fff;
  font-weight: 800;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(18,24,38,0.22);
}
.btn-dark:hover{ filter: brightness(1.05); }

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.card{
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  border: 1px solid rgba(194,198,216,0.55);
}
.card--hover:hover{
  box-shadow: var(--shadow-hover);
  border-color: rgba(0,80,203,0.18);
}
.card__header{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:space-between;
  padding: 18px 18px;
  gap: 10px;
  min-width: 0;
}
.card__header > .card__title{
  min-width: 0;
}
.card__title{
  font-weight: 600;
  letter-spacing: -0.01em;
}
.card__meta{ color: var(--muted); font-size: 13px; }
.card__body{ padding: 0 18px 18px 18px; }

.filters{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  padding: 14px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(194,198,216,0.55);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 0 rgba(17,24,39,0.02);
  margin-bottom: 16px;
  min-width: 0;
  max-width: 100%;
}
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex: 1 1 160px;
  min-width: min(100%, 180px);
  max-width: 100%;
}
.field label{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: uppercase;
}
.control{
  background:#fff;
  border: 1px solid rgba(194,198,216,0.75);
  border-radius: 14px;
  padding: 10px 12px;
  outline:none;
}
.control:focus{
  border-color: rgba(0,80,203,0.45);
  box-shadow: 0 0 0 3px rgba(0,80,203,0.14);
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(194,198,216,0.8);
  background:#fff;
  cursor:pointer;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.btn:hover{
  box-shadow: 0 8px 18px rgba(17,24,39,0.08);
  transform: translateY(-1px);
  border-color: rgba(0,80,203,0.22);
}
.btn--primary{
  background: var(--primary);
  color:#fff;
  border-color: transparent;
}
.btn--primary:hover{
  box-shadow: 0 10px 26px rgba(0,80,203,0.22);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,0.05);
}
.badge--pendente{ background: var(--warn-soft); color: var(--warning); }
.badge--emverificacao{ background: var(--info-soft); color: var(--info); }
.badge--resolvido{ background: var(--success-soft); color: var(--success); }

.event-badge{
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.05);
  color: var(--muted);
}
.event-badge--BANIDO{ background: var(--danger-soft); color: var(--danger); }
.event-badge--RESTRITO{ background: var(--warn-soft); color: var(--warning); }
.event-badge--SEM_NUMERO_CONECTADO{ background: var(--yellow-soft); color: var(--yellow); }

.accordion{
  overflow:hidden;
}
.accordion__toggle{
  width:100%;
  background: transparent;
  border:none;
  cursor:pointer;
  text-align:left;
  padding:0;
}
.accordion__content{
  display:none;
  padding: 0 18px 18px 18px;
}
.accordion.is-open .accordion__content{ display:block; }

.subcards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.subcard{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(194,198,216,0.55);
  background: rgba(255,255,255,0.72);
  padding: 14px;
}
.subcard__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.subcard__title{ font-weight: 600; }
.subcard__small{ font-size: 12px; color: var(--muted); margin-top: 4px; }

.list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.event{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(242,243,255,0.65);
  border: 1px solid rgba(194,198,216,0.45);
}
.event__main{ flex:1; }
.event__msg{ font-size: 13px; line-height: 18px; }
.event__meta{ font-size: 12px; color: var(--muted); margin-top: 4px; }

.tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 6px 0 16px 0;
}
.tab{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(194,198,216,0.8);
  background: rgba(255,255,255,0.7);
  cursor:pointer;
  font-weight: 600;
  color: var(--muted);
}
.tab.is-active{
  background: rgba(0,80,203,0.10);
  border-color: rgba(0,80,203,0.18);
  color: var(--primary-600);
}

.tabs-underline{
  display:flex;
  gap: 22px;
  align-items:center;
  margin: 4px 0 12px 0;
}
.tab-u{
  border:none;
  background: transparent;
  padding: 10px 2px;
  cursor:pointer;
  color: rgba(66,70,86,0.85);
  font-weight: 700;
  position:relative;
}
.tab-u.is-active{
  color: var(--primary-600);
}
.tab-u.is-active::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:3px;
  border-radius: 999px;
  background: var(--primary);
}

.subtabs{
  display:flex;
  gap: 10px;
  align-items:center;
  margin: 6px 0 10px 0;
}
.subtab{
  border: 1px solid rgba(194,198,216,0.85);
  background: rgba(255,255,255,0.82);
  color: rgba(66,70,86,0.85);
  padding: 8px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 800;
  font-size: 12px;
}
.subtab.is-active{
  background: rgba(0,80,203,0.12);
  border-color: rgba(0,80,203,0.22);
  color: var(--primary-600);
}

.multi{
  position:relative;
  max-width: 100%;
}
.multi__btn{
  width: 100%;
  max-width: 100%;
  text-align:left;
  cursor:pointer;
}
.multi__menu{
  position:absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: min(360px, 100%);
  max-width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(194,198,216,0.75);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(17,24,39,0.14);
  padding: 10px;
}
.multi__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.multi__title{
  font-weight: 900;
  color: rgba(25,27,36,0.92);
}
.multi__list{
  max-height: 260px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap: 8px;
  padding: 4px;
}
.multi__item{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(194,198,216,0.45);
  background: rgba(242,243,255,0.42);
}
.multi__item input{ width: 16px; height: 16px; accent-color: var(--primary); }
.multi__num{ font-weight: 900; }
.multi__hint{ font-size: 12px; color: rgba(66,70,86,0.78); }

.dash-toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(194, 198, 216, 0.55);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.02);
}
.dash-toolbar__label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.dash-toolbar__presets{
  flex: 1 1 280px;
  min-width: 0;
}
.dash-presets.pill-group{
  margin: 0;
}
.dash-toolbar__custom{
  flex: 0 1 auto;
  min-width: min(100%, 420px);
}
/** Período personalizado do dashboard: uma linha (datas + botão), sem altura extra. */
.dash-custom-period{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.dash-custom-period__field{
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 140px;
  min-width: min(100%, 150px);
  max-width: 100%;
}
.dash-custom-period__btn{
  flex: 0 0 auto;
}

.msg-filters, .msg-search{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  align-items:flex-end;
  padding: 0;
  margin: 8px 0;
  min-width: 0;
  max-width: 100%;
}
.msg-field{
  flex: 1 1 160px;
  min-width: min(100%, 190px);
  max-width: 100%;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.msg-search .msg-field--grow{
  flex: 2 1 260px;
  min-width: min(100%, 240px);
}
.msg-field__label{
  font-size: 12px;
  font-weight: 700;
  color: rgba(66,70,86,0.85);
  letter-spacing: 0.02em;
}
.msg-field--btn{
  flex: 0 0 auto;
  min-width: unset;
  max-width: 100%;
  align-items: center;
}
.msg-field--btn .btn{
  width: auto;
  max-width: 100%;
}

.msg-table{
  background: rgba(255,255,255,0.80);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(194,198,216,0.55);
  box-shadow: var(--shadow);
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
.msg-table table{ min-width: 880px; }
.msg-table thead th{ background: rgba(250,248,255,0.65); }
.msg-table .msg-motivo{
  white-space: pre-line;
  max-width: 22rem;
  vertical-align: top;
}
.cell-phone{
  white-space: nowrap;
  line-height: 18px;
  min-width: 150px;
}
.client{
  display:flex;
  align-items:center;
  gap: 12px;
}
.client__link{
  cursor:pointer;
  text-decoration:none;
  color: inherit;
}
.client__link:hover .client__name{ text-decoration: underline; }
.client__meta{
  color: rgba(66,70,86,0.78);
  font-size: 12px;
  margin-top: 3px;
}
.client__preview{
  max-width: min(320px, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.conn-type{
  font-size: 14px;
  font-weight: 800;
  color: rgba(70,72,212,0.95);
  letter-spacing: -0.01em;
}
.client__avatar{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: -0.01em;
  border: 1px solid rgba(0,0,0,0.05);
}
.client__name{
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.conn-top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 6px;
}
.conn-number{
  font-weight: 900;
  color: rgba(25,27,36,0.95);
}
.status-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 12px;
}
.dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.85;
}
.status-pill--enviado{ background: rgba(22,101,52,0.12); color: var(--success); }
.status-pill--falhou{ background: rgba(186,26,26,0.10); color: var(--danger); }
.status-pill--pulado{ background: rgba(161,98,7,0.12); color: var(--yellow); }

.channel{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  color: #16a34a;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 12px;
}
.channel__icon{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(22,163,74,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16a34a;
}

.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index: 50;
  box-sizing: border-box;
}
.modal.is-open{
  display:block;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(17,24,39,0.45);
  backdrop-filter: blur(6px);
}
.modal__panel{
  position:relative;
  /* 100% do viewport via fixed ancestor, sem 100vw (evita barra de rolagem horizontal) */
  width: min(920px, calc(100% - 24px));
  max-width: 100%;
  max-height: calc(100vh - 24px);
  overflow:auto;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(194,198,216,0.7);
  border-radius: 22px;
  box-shadow: 0 22px 64px rgba(17,24,39,0.25);
  margin: 12px auto;
  box-sizing: border-box;
}
.modal__panel--wide{
  width: min(1040px, calc(100% - 24px));
}
.hist-eventos-table tbody td{
  font-size: 12px;
  vertical-align: top;
  word-break: break-word;
}
.internal-notes{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(194, 198, 216, 0.55);
  background: rgba(242, 243, 255, 0.45);
}
.internal-notes__title{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(66, 70, 86, 0.75);
  margin-bottom: 8px;
}
.internal-notes__body{
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(25, 27, 36, 0.92);
  font-family: inherit;
}
html[data-theme="dark"] .internal-notes{
  background: var(--surface-low);
  border-color: var(--outline);
}
html[data-theme="dark"] .internal-notes__title{
  color: var(--muted);
}
html[data-theme="dark"] .internal-notes__body{
  color: var(--text);
}
.modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(194,198,216,0.55);
}
.modal__title{ font-weight: 900; letter-spacing: -0.01em; }
.modal__sub{ color: rgba(66,70,86,0.82); font-size: 12px; margin-top: 3px; }
.modal__body{ padding: 16px 18px 18px 18px; display:flex; flex-direction:column; gap: 14px; }
.modal__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.kv{
  background: rgba(242,243,255,0.55);
  border: 1px solid rgba(194,198,216,0.45);
  border-radius: 16px;
  padding: 10px 12px;
}
.kv__k{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(66,70,86,0.72);
}
.kv__v{ margin-top: 6px; font-weight: 700; color: rgba(25,27,36,0.95); word-break: break-word; }
.kv__v--multiline{ white-space: pre-line; }
.modal__section{
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(194,198,216,0.45);
  border-radius: 18px;
  padding: 12px;
}
.modal__label{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(66,70,86,0.72);
}
.modal__message{
  margin-top: 8px;
  white-space: pre-wrap;
  line-height: 20px;
  color: rgba(25,27,36,0.96);
}

.pager{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 4px;
  color: rgba(66,70,86,0.85);
  font-size: 12px;
  min-width: 0;
  max-width: 100%;
}
.pager__buttons{
  display:flex;
  align-items:center;
  gap: 8px;
}
.page-btn{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(194,198,216,0.75);
  background: rgba(255,255,255,0.85);
  cursor:pointer;
  font-weight: 800;
  color: rgba(66,70,86,0.9);
}
.page-btn.is-active{
  background: rgba(0,80,203,0.12);
  border-color: rgba(0,80,203,0.20);
  color: var(--primary-600);
}
.page-btn--icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.page-btn--icon svg.ico{ width: 16px; height: 16px; }
.pager__ellipsis{
  padding: 0 6px;
  color: rgba(66, 70, 86, 0.55);
  font-weight: 700;
}

.table-wrap{
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  border: 1px solid rgba(194,198,216,0.55);
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}
.table-wrap table,
.hist-eventos-table{
  min-width: 720px;
}
table{
  width:100%;
  border-collapse:separate;
  border-spacing: 0;
}
thead th{
  text-align:left;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(194,198,216,0.55);
  background: rgba(250,248,255,0.7);
}
tbody td{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(194,198,216,0.35);
  vertical-align:top;
  font-size: 13px;
}
tbody tr:hover{ background: rgba(0,0,0,0.02); }
.nowrap{ white-space:nowrap; }

.cfg-banner{
  margin: 0 0 14px 0;
  padding: 12px 14px;
  border-radius: var(--radius-lg, 14px);
  background: rgba(0,80,203,0.08);
  border: 1px solid rgba(0,80,203,0.2);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(25,27,36,0.92);
}
.cfg-banner--muted{
  background: rgba(242,243,255,0.65);
  border-color: rgba(194,198,216,0.55);
}
.cfg-field__hint{
  font-size: 12px;
  font-weight: 500;
  color: rgba(66,70,86,0.78);
  line-height: 1.4;
}
.cfg-status{
  margin: 0 0 12px 0;
  font-size: 13px;
  color: rgba(66,70,86,0.92);
  min-height: 1.25em;
}
.cfg-status:empty{
  min-height: 0;
  margin-bottom: 0;
}
/* Toasts — confirmação flutuante (ex.: página Configurações) */
.debt-toast-root{
  position: fixed;
  top: max(16px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  z-index: 10060;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: min(420px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  pointer-events: none;
  box-sizing: border-box;
}
.debt-toast-root .debt-toast{
  align-self: flex-end;
}
.debt-toast{
  pointer-events: auto;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(194, 198, 216, 0.65);
  background: #fff;
  color: rgba(25, 27, 36, 0.95);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.debt-toast--show{
  opacity: 1;
  transform: translateY(0);
}
.debt-toast--hide{
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.debt-toast--success{
  border-color: rgba(22, 163, 74, 0.35);
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  color: rgba(20, 83, 45, 0.95);
}
.debt-toast--error{
  border-color: rgba(220, 38, 38, 0.35);
  background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
  color: rgba(127, 29, 29, 0.95);
}
html[data-theme="dark"] .debt-toast{
  background: var(--card);
  color: var(--text);
  border-color: var(--outline);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .debt-toast--success{
  border-color: rgba(74, 222, 128, 0.35);
  background: linear-gradient(135deg, rgba(20, 83, 45, 0.35) 0%, rgba(6, 78, 59, 0.25) 100%);
  color: rgba(187, 247, 208, 0.98);
}
html[data-theme="dark"] .debt-toast--error{
  border-color: rgba(248, 113, 113, 0.4);
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.35) 0%, rgba(69, 10, 10, 0.22) 100%);
  color: rgba(254, 202, 202, 0.98);
}
.cfg-loading{
  font-size: 13px;
  color: rgba(66,70,86,0.75);
  margin-bottom: 10px;
}
.cfg-form{
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
}
.cfg-form__actions--footer{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(194, 198, 216, 0.55);
}
html[data-theme="dark"] .cfg-form__actions--footer{
  border-top-color: var(--outline);
}
.cfg-card .cfg-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px 18px;
}
.cfg-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cfg-field--wide{ grid-column: span 2; }
.cfg-field--full{ grid-column: 1 / -1; }
.cfg-field__l{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(66,70,86,0.72);
}
.cfg-checks, .cfg-check{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  font-size: 13px;
  color: rgba(25,27,36,0.92);
}
.cfg-check input{ margin-right: 6px; }
.cfg-span-full{ grid-column: 1 / -1; }
.cfg-subtitle{
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(66,70,86,0.65);
  margin-top: 4px;
}

/* Tooltip HTML — gráfico Disparos por dia/hora (Chart.js external) */
#chartPorDia{
  position: relative;
  overflow: visible;
}
.debt-chart-tooltip-html{
  position: absolute;
  z-index: 30;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 8px));
  min-width: 168px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(22, 24, 32, 0.96);
  color: #f2f4f9;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  font-family: inherit;
  line-height: 1.25;
}
.debt-chart-tooltip-html__title{
  font-size: 13px;
  font-weight: 600;
  color: #f8fafc;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}
.debt-chart-tooltip-html__row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  margin: 0 0 4px 0;
}
.debt-chart-tooltip-html__row:last-of-type{
  margin-bottom: 0;
}
.debt-chart-tooltip-html__lbl::after{
  content: ":";
}
.debt-chart-tooltip-html__val{
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
/* Semântica alinhada aos KPIs: Total (azul), Enviados (verde), Pulados (alerta), Não enviados (vermelho) */
.debt-chart-tooltip-html__row--total{
  color: #60a5fa;
}
.debt-chart-tooltip-html__row--enviados{
  color: #22c55e;
}
.debt-chart-tooltip-html__row--pulados{
  color: #f59e0b;
}
.debt-chart-tooltip-html__row--nao-enviados{
  color: #ef4444;
}
/* Tooltip ancorado no ponto com position:fixed no JS — abaixo do ponto se não couber acima */
.debt-chart-tooltip-html.debt-chart-tooltip-html--flip-below{
  transform: translate(-50%, 12px);
}

@media (max-width: 980px){
  .app{ grid-template-columns: 78px minmax(0, 1fr); }
  .sidebar__brand, .nav-item span:last-child, .user-chip__meta{ display:none; }
  .nav-item{ justify-content:center; }
  .subcards{ grid-template-columns: 1fr; }
  .content{ padding: 18px; }
  .filters-grid{ grid-template-columns: 1fr; }
  .wpp-grid{ grid-template-columns: 1fr; }
  .tabs-underline{ gap: 14px; flex-wrap:wrap; }
  .modal__grid{ grid-template-columns: 1fr; }
  .topbar{ padding-left: 16px; padding-right: 16px; }
}

/* Dashboard: KPIs e gráficos não estouram em viewports estreitas */
.dash-kpi-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
  min-width: 0;
}
.dash-charts-row{
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
  min-width: 0;
}
@media (max-width: 1100px){
  .dash-kpi-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .dash-kpi-row{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  .dash-charts-row{ grid-template-columns: 1fr; }
}

/* Gráficos: barra de rolagem local se o canvas externo ultrapassar o card */
.dash-chart-host{
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* ========== Tema escuro (html[data-theme="dark"]) ========== */
html[data-theme="dark"]{
  color-scheme: dark;
  --surface: #101218;
  --surface-low: #161922;
  --surface-mid: #1b2030;
  --card: #1a1d28;
  --text: #e8eaf2;
  /* Secundário: contraste legível em #1a1d28 (gráficos Canvas usam tons equivalentes no JS). */
  --muted: #bcc6d6;
  --outline: #343a4f;
  --primary: #6ea8ff;
  --primary-600: #b3d0ff;
  --shadow: 0 8px 26px rgba(0, 0, 0, 0.42);
  --shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.55);
  --danger: #fca5a5;
  --warning: #fdba74;
  --warn-soft: rgba(253, 186, 116, 0.14);
  --info: #93c5fd;
  --info-soft: rgba(147, 197, 253, 0.14);
  --success: #86efac;
  --success-soft: rgba(134, 239, 172, 0.12);
  --danger-soft: rgba(252, 165, 165, 0.12);
  --yellow: #fde047;
  --yellow-soft: rgba(253, 224, 71, 0.12);
}

html[data-theme="dark"] body{
  background: linear-gradient(165deg, #0b0d12 0%, var(--surface) 42%, #141820 100%);
  color: var(--text);
}

html[data-theme="dark"] .sidebar{
  background: var(--card);
  border-right-color: var(--outline);
}
html[data-theme="dark"] .sidebar__brand{ color: var(--text); }
html[data-theme="dark"] .nav-item{
  color: var(--muted);
}
html[data-theme="dark"] .nav-item:hover{
  background: rgba(110, 168, 255, 0.12);
  border-color: rgba(110, 168, 255, 0.22);
}
html[data-theme="dark"] .nav-item.is-active{
  background: rgba(110, 168, 255, 0.18);
  border-color: rgba(110, 168, 255, 0.28);
  color: var(--primary-600);
}
html[data-theme="dark"] .user-chip{
  background: var(--surface-low);
  border-color: var(--outline);
}
html[data-theme="dark"] .user-chip__avatar{
  background: rgba(110, 168, 255, 0.2);
  color: var(--primary-600);
}

html[data-theme="dark"] .topbar{
  background: rgba(26, 29, 40, 0.88);
  border-bottom-color: var(--outline);
}
html[data-theme="dark"] .topbar__divider{
  background: var(--outline);
}
html[data-theme="dark"] .icon-btn:hover{
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .topbar-notif-badge{
  box-shadow: 0 0 0 2px rgba(26, 29, 40, 0.96);
  background: #ef4444;
}

html[data-theme="dark"] .card{
  background: var(--card);
  border-color: var(--outline);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .card--hover:hover{
  border-color: rgba(110, 168, 255, 0.35);
  box-shadow: var(--shadow-hover);
}
html[data-theme="dark"] .card__meta,
html[data-theme="dark"] .page-subtitle{
  color: var(--muted);
}
html[data-theme="dark"] .page-title{
  color: var(--text);
}

html[data-theme="dark"] .filter-card,
html[data-theme="dark"] .dash-toolbar{
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--outline);
  box-shadow: none;
}
html[data-theme="dark"] .filters,
html[data-theme="dark"] .filters-grid .filter-card{
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .control{
  background: var(--surface-low);
  border-color: var(--outline);
  color: var(--text);
}
html[data-theme="dark"] .control--soft{
  background: var(--surface-low);
}
html[data-theme="dark"] .control:focus{
  border-color: rgba(110, 168, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(110, 168, 255, 0.18);
}

html[data-theme="dark"] .pill{
  background: var(--surface-low);
  border-color: var(--outline);
  color: var(--muted);
}
html[data-theme="dark"] .pill:hover{
  border-color: rgba(110, 168, 255, 0.35);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .pill.is-active{
  background: rgba(110, 168, 255, 0.2);
  border-color: rgba(110, 168, 255, 0.4);
  color: var(--primary-600);
}

html[data-theme="dark"] .btn{
  background: var(--surface-low);
  border-color: var(--outline);
  color: var(--text);
}
html[data-theme="dark"] .btn:hover{
  border-color: rgba(110, 168, 255, 0.35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .btn--primary{
  background: var(--primary);
  color: #0c1220;
  border-color: transparent;
}
html[data-theme="dark"] .btn--primary:hover{
  filter: brightness(1.08);
  box-shadow: 0 10px 28px rgba(110, 168, 255, 0.25);
}

html[data-theme="dark"] .tab,
html[data-theme="dark"] .tab-u{
  background: var(--surface-low);
  border-color: var(--outline);
  color: var(--muted);
}
html[data-theme="dark"] .tab.is-active,
html[data-theme="dark"] .tab-u.is-active{
  background: rgba(110, 168, 255, 0.18);
  border-color: rgba(110, 168, 255, 0.35);
  color: var(--primary-600);
}
html[data-theme="dark"] .subtab{
  color: var(--muted);
}
html[data-theme="dark"] .subtab.is-active{
  color: var(--primary-600);
}

html[data-theme="dark"] .msg-table{
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--outline);
}
html[data-theme="dark"] .msg-table thead th{
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}
html[data-theme="dark"] .msg-table td{
  color: var(--text);
  border-color: var(--outline);
}
html[data-theme="dark"] .client__meta,
html[data-theme="dark"] .client__preview{
  color: var(--muted);
}
html[data-theme="dark"] .conn-number{
  color: var(--text);
}

html[data-theme="dark"] .modal__panel{
  background: var(--card);
  border-color: var(--outline);
}
html[data-theme="dark"] .modal__head{
  border-bottom-color: var(--outline);
}
html[data-theme="dark"] .modal__title{
  color: var(--text);
}
html[data-theme="dark"] .modal__sub{
  color: var(--muted);
}
html[data-theme="dark"] .modal__head .icon-btn{
  color: var(--muted);
}
html[data-theme="dark"] .kv{
  background: var(--surface-low);
  border-color: var(--outline);
}
html[data-theme="dark"] .kv__k{
  color: var(--muted);
}
html[data-theme="dark"] .kv__v{
  color: var(--text);
}
html[data-theme="dark"] .modal__section{
  background: var(--surface-mid);
  border-color: var(--outline);
}
html[data-theme="dark"] .modal__label{
  color: var(--muted);
}
html[data-theme="dark"] .modal__message{
  color: var(--text);
}

html[data-theme="dark"] .multi__menu{
  background: var(--card);
  border-color: var(--outline);
}
html[data-theme="dark"] .multi__item{
  background: var(--surface-low);
  border-color: var(--outline);
}

html[data-theme="dark"] .wpp-box,
html[data-theme="dark"] .alert-item{
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--outline);
}
html[data-theme="dark"] .alert-bulk-bar{
  border-bottom-color: var(--outline);
}
html[data-theme="dark"] .alert-item__dot{
  background: var(--surface-mid);
  border-color: var(--outline);
}
html[data-theme="dark"] .chev{
  background: var(--surface-low);
  border-color: var(--outline);
}

html[data-theme="dark"] .event{
  background: var(--surface-low);
  border-color: var(--outline);
}
html[data-theme="dark"] .event__meta{
  color: var(--muted);
}

html[data-theme="dark"] .pager{
  color: var(--muted);
}
html[data-theme="dark"] .page-btn{
  background: var(--surface-low);
  border-color: var(--outline);
  color: var(--muted);
}
html[data-theme="dark"] .page-btn.is-active{
  background: rgba(110, 168, 255, 0.22);
  border-color: rgba(110, 168, 255, 0.4);
  color: var(--primary-600);
}

html[data-theme="dark"] #chartPorDia{
  background: rgba(110, 168, 255, 0.1) !important;
}
html[data-theme="dark"] #chartStatus{
  background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .cfg-form .cfg-card,
html[data-theme="dark"] .cfg-card{
  background: var(--card);
  border-color: var(--outline);
}
html[data-theme="dark"] .cfg-field__l,
html[data-theme="dark"] .cfg-subtitle{
  color: var(--muted);
}
html[data-theme="dark"] .cfg-checks,
html[data-theme="dark"] .cfg-check{
  color: var(--text);
}
html[data-theme="dark"] .cfg-banner{
  background: rgba(110, 168, 255, 0.12);
  border-color: var(--outline);
  color: var(--text);
}
html[data-theme="dark"] .cfg-banner--muted{
  background: var(--surface-low);
  color: var(--muted);
}
html[data-theme="dark"] .cfg-status{
  color: rgba(232, 234, 242, 0.92);
}
html[data-theme="dark"] .cfg-field__hint,
html[data-theme="dark"] .cfg-loading{
  color: var(--muted);
}
html[data-theme="dark"] .alert-item__time{
  color: var(--muted);
}
html[data-theme="dark"] .pager__ellipsis{
  color: rgba(188, 198, 214, 0.75);
}
html[data-theme="dark"] .control::placeholder{
  color: rgba(200, 210, 228, 0.72);
}
html[data-theme="dark"] .control::-webkit-input-placeholder{
  color: rgba(200, 210, 228, 0.72);
}

html[data-theme="dark"] .link{
  color: var(--primary-600);
}
html[data-theme="dark"] .btn-dark{
  background: #e8eaf2;
  color: #0c1220;
}
html[data-theme="dark"] .btn-dark:hover{
  filter: brightness(1.06);
}

html[data-theme="dark"] .event-badge{
  color: var(--muted);
  border-color: var(--outline);
}

html[data-theme="dark"] .table-wrap{
  background: var(--card);
  border-color: var(--outline);
}
/* Cabeçalhos de tabela no tema escuro (histórico de eventos / listagens): contraste legível */
html[data-theme="dark"] thead th{
  background: rgba(255, 255, 255, 0.07);
  color: rgba(232, 234, 242, 0.96);
  border-bottom-color: var(--outline);
}
html[data-theme="dark"] tbody td{
  color: var(--text);
  border-bottom-color: var(--outline);
}
html[data-theme="dark"] .hist-eventos-table tbody td{
  color: rgba(232, 234, 242, 0.94);
}

html[data-theme="dark"] .alerts-card{
  background: var(--card);
  border: 1px solid var(--outline);
}
html[data-theme="dark"] .avatar{
  background: rgba(110, 168, 255, 0.18);
  color: var(--primary-600);
}
html[data-theme="dark"] .meta-col__label{
  color: var(--muted);
}
html[data-theme="dark"] .subcard{
  background: var(--surface-low);
  border-color: var(--outline);
}
html[data-theme="dark"] .status-chip{
  background: var(--surface-low);
  border-color: var(--outline);
  color: var(--muted);
}
html[data-theme="dark"] .status-chip--pendente{
  background: rgba(110, 168, 255, 0.16);
  border-color: rgba(110, 168, 255, 0.28);
  color: var(--primary-600);
}
html[data-theme="dark"] .status-chip--emverificacao{
  background: rgba(147, 197, 253, 0.14);
  border-color: rgba(147, 197, 253, 0.28);
  color: var(--info);
}
html[data-theme="dark"] .status-chip--resolvido{
  background: rgba(134, 239, 172, 0.12);
  border-color: rgba(134, 239, 172, 0.22);
  color: var(--success);
}
html[data-theme="dark"] .wpp-icon{
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .multi__title{
  color: var(--text);
}
html[data-theme="dark"] .multi__hint{
  color: var(--muted);
}
html[data-theme="dark"] .tab-u{
  color: var(--muted);
}
html[data-theme="dark"] .subtab{
  background: var(--surface-low);
  border-color: var(--outline);
  color: var(--muted);
}
html[data-theme="dark"] .subtab.is-active{
  background: rgba(110, 168, 255, 0.18);
  border-color: rgba(110, 168, 255, 0.32);
  color: var(--primary-600);
}
html[data-theme="dark"] .msg-field__label{
  color: var(--muted);
}
html[data-theme="dark"] .msg-table thead th{
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .client__avatar{
  border-color: var(--outline);
}
html[data-theme="dark"] .badge{
  border-color: var(--outline);
}
html[data-theme="dark"] .badge--avisos-limpo{
  background: var(--surface-low);
  color: var(--muted);
}
html[data-theme="dark"] .topbar__title{
  color: var(--muted);
}
html[data-theme="dark"] .modal__backdrop{
  background: rgba(0, 0, 0, 0.62);
}
html[data-theme="dark"] .accordion__content{
  color: var(--text);
}