/* ── KPIs ── */
    .kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 14px;
    }

/* skeleton para KPIs */
    .skel {
      background: linear-gradient(90deg, #e8e6e1 25%, #f0ede8 50%, #e8e6e1 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
      border-radius: 6px;
      height: 1em;
    }

/* ── Estado de loading / erro / vazio ── */
    .state-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 64px 24px;
      color: var(--muted);
      text-align: center;
    }

/* ── Tabela ── */
    .table-card {
      overflow: auto;
    }

.table-card table {
      width: 100%;
      border-collapse: collapse;
      min-width: 1600px;
    }

.table-card th,
    .table-card td {
      padding: 16px;
      border-bottom: 1px solid var(--divider);
      vertical-align: top;
      text-align: left;
      font-size: 14px;
    }

.name {
      font-weight: 800;
      font-size: 14px;
    }

.meta,
    .subt {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-top: 4px;
    }

/* badge de venda */
    .sale {
      display: inline-flex;
      flex-direction: column;
      gap: 3px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid transparent;
      min-width: 128px;
    }

.recent {
      background: rgba(67, 122, 34, .08);
      color: var(--success);
      border-color: rgba(67, 122, 34, .16);
    }

.attention {
      background: rgba(209, 153, 0, .10);
      color: #9b6c00;
      border-color: rgba(209, 153, 0, .18);
    }

.warn {
      background: rgba(218, 113, 1, .10);
      color: #a85600;
      border-color: rgba(218, 113, 1, .18);
    }

.critical {
      background: rgba(161, 53, 68, .10);
      color: var(--error);
      border-color: rgba(161, 53, 68, .18);
    }

.no-sale {
      background: rgba(111, 108, 101, .08);
      color: var(--muted);
      border-color: rgba(111, 108, 101, .18);
    }

/* criativos */
    .creative {
      display: grid;
      gap: 6px;
      min-width: 200px;
    }

.tag {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(1, 105, 111, .10);
      color: var(--primary);
      margin-left: 4px;
    }

.ad-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--text);
    }

/* Status dot agora é um ícone colorido por status */
    .ad-status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }

.dot-active {
      background: var(--success);
    }

.dot-paused {
      background: #e5a800;
    }

/* amarelo */
    .dot-other {
      background: var(--error);
    }

/* vermelho para demais status */

    /* Texto do criativo muda de cor conforme status */
    .ad-item.status-paused {
      color: #9b6c00;
    }

.ad-item.status-other {
      color: var(--error);
    }

.ad-item.status-active {
      color: var(--text);
    }

.decision {
      max-width: 280px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface);
      font-size: 13px;
    }

.decision strong {
      display: block;
      margin-bottom: 2px;
    }

.dash-val {
      color: var(--muted);
      font-style: italic;
    }

/* ── Webhook config ── */
    .webhook-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      padding: 14px 16px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }

/* ── Date range picker ── */
    .date-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      padding: 12px 16px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      flex-wrap: wrap;
    }

@media (max-width: 980px) {
      .kpis {
        grid-template-columns: repeat(2, 1fr);
      }
    }