/* Custom overrides and animations for Creative Dashboard */

:root {
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --bg-card: #0f3460;
  --text-primary: #eaeaea;
  --text-secondary: #a0a0a0;
  --accent-green: #10b981;
  --accent-red: #ef4444;
  --accent-yellow: #f59e0b;
  --accent-blue: #3b82f6;
  --accent-purple: #8b5cf6;
  --border-color: #374151;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

/* Card hover effect */
.creative-card {
  transition: all 0.3s ease;
}
.creative-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Approve button animation */
@keyframes approveFlash {
  0% { background-color: var(--accent-green); }
  50% { background-color: #34d399; box-shadow: 0 0 30px rgba(16, 185, 129, 0.6); }
  100% { background-color: var(--accent-green); }
}

.approving {
  animation: approveFlash 0.5s ease-out;
}

/* Deny button animation */
@keyframes denyShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.denying {
  animation: denyShake 0.3s ease-out;
}

/* Confetti animation */
@keyframes confetti {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  animation: confetti 1s ease-out forwards;
  z-index: 9999;
}

/* Status badge colors */
.status-pending {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.status-approved {
  background: linear-gradient(135deg, #10b981, #059669);
}
.status-denied {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.status-revision {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

/* Platform badge colors */
.platform-instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.platform-youtube_shorts {
  background: #ff0000;
}
.platform-pinterest {
  background: #e60023;
}
.platform-facebook {
  background: #1877f2;
}
.platform-twitter {
  background: #000000;
}

/* Site badge colors */
.site-petdeals-club {
  background-color: #10b981;
}
.site-tooldiscount-club {
  background-color: #f59e0b;
}
.site-bestprotein-club {
  background-color: #ef4444;
}
.site-njpools-club {
  background-color: #3b82f6;
}
.site-gummy-mom {
  background-color: #ec4899;
}
.site-longevitystack-club {
  background-color: #8b5cf6;
}
.site-wowauto-app {
  background-color: #f97316;
}
.site-njlawn-club {
  background-color: #22c55e;
}

/* Modal backdrop */
.modal-backdrop {
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.7);
}

/* Smooth transitions */
* {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Focus styles for accessibility */
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

/* Pulse animation for pending items */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.pulse-pending {
  animation: pulse 2s ease-in-out infinite;
}

/* Stats card gradient */
.stats-card {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 1px solid var(--border-color);
}

/* Media placeholder */
.media-placeholder {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-card) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Expandable comment section */
.comment-section {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.comment-section.expanded {
  max-height: 500px;
}

/* Feedback insight card */
.feedback-insight {
  border-left: 4px solid var(--accent-purple);
}