/* Custom styles for Telegram CRM Dashboard */

/* Custom subtle scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}
::-webkit-scrollbar-thumb {
  background: rgba(71, 85, 105, 0.5);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.6);
}

/* Nav button active states */
.active-nav {
  background: linear-gradient(to right, rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.05)) !important;
  color: #ffffff !important;
  border-left: 3px solid #6366f1;
}

/* Filter pills active state */
.filter-pill {
  cursor: pointer;
  border: 1px solid transparent;
}
.active-pill {
  background: #4f46e5 !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

/* Countdown Urgency Badges */
.countdown-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.countdown-safe {
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.countdown-warning {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.countdown-danger {
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  animation: pulse-danger 2s infinite;
}

@keyframes pulse-danger {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Toast animations */
.toast-enter {
  animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.toast-exit {
  animation: slideOut 0.2s ease-in forwards;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
}

/* Tag Filter Pills */
.tag-pill {
  cursor: pointer;
  border: 1px solid transparent;
}
.active-tag-pill {
  background: #334155 !important;
  color: #ffffff !important;
  font-weight: 600;
  border-color: #64748b !important;
}

/* Activity Filter Pills */
.act-pill {
  cursor: pointer;
  border: 1px solid transparent;
}
.active-act-pill {
  background: #334155 !important;
  color: #ffffff !important;
  font-weight: 600;
  border-color: #64748b !important;
}