/* ═══ IG Automation — Clean & Minimal Styles ═══ */

/* Pages */
.page {
  display: none;
}

.page.active {
  display: block;
  animation: fadeIn .25s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sidebar Active */
.nav-item.active {
  background: #F1F5F9;
  color: #1E293B;
}

.nav-item.active svg {
  opacity: 1;
  color: #3B82F6;
}

/* Status Labels */
.flow-keyword {
  font-weight: 500;
  color: #475569;
  background: #F1F5F9;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  border: 1px solid #E2E8F0;
}

.badge-active {
  background: #ECFDF5;
  color: #059669;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.badge-inactive {
  background: #F1F5F9;
  color: #64748B;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

/* Event Badges */
.event-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.event-dm_sent {
  background: #ECFDF5;
  color: #059669;
}

.event-dm_failed {
  background: #FEF2F2;
  color: #EF4444;
}

.event-no_match {
  background: #F1F5F9;
  color: #64748B;
}

.event-rate_limited {
  background: #FFFBEB;
  color: #D97706;
}

.event-follow_up {
  background: #EFF6FF;
  color: #1D4ED8;
}

/* Scrollbar (Clean style) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Pagination */
.pagination button {
  padding: 6px 14px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: white;
  color: #64748B;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all .2s;
  margin: 0 4px;
}

.pagination button.active {
  background: #EFF6FF;
  color: #2563EB;
  border-color: #BFDBFE;
  font-weight: 600;
}

.pagination button:hover:not(.active) {
  border-color: #94A3B8;
  color: #1E293B;
}

/* Utilities */
.text-brand-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right, #3B82F6, #6366F1);
}