/* Admin Panel Dedicated Stylesheet - The Creative Cruise */

:root {
  --admin-brand: #1c75bc;
  --admin-brand-hover: #16609c;
  --admin-dark-bg: #07090e;
  --admin-dark-card: #0c101a;
  --admin-border: rgba(255, 255, 255, 0.1);
}

body {
  background-color: var(--admin-dark-bg);
  color: #f8fafc;
  font-family: 'Plus Jakarta Sans', sans-serif;
  overflow-x: hidden;
}

/* Glassmorphism Card */
.glass-panel {
  background: rgba(12, 16, 26, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

.glass-panel-hover:hover {
  border-color: rgba(28, 117, 188, 0.35);
  box-shadow: 0 20px 45px -10px rgba(28, 117, 188, 0.15);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #07090e;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Tab button active state */
.tab-btn.active {
  background: #1c75bc;
  color: #ffffff;
  border-color: #1c75bc;
  box-shadow: 0 4px 15px rgba(28, 117, 188, 0.4);
}

/* Filter pill active state */
.filter-pill.active {
  background: rgba(28, 117, 188, 0.25);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.5);
}

/* Animation utilities */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Screenshot image preview hover zoom */
.screenshot-thumbnail {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.screenshot-thumbnail:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px -5px rgba(28, 117, 188, 0.4);
}