/**
 * StreamFlow Modern - Custom Styles
 * Version: 3.0.0
 */

/* Font Loading Optimization */
@font-face {
  font-family: 'tabler-icons';
  font-display: swap;
}

.ti {
  font-family: 'tabler-icons', sans-serif;
  font-display: swap;
}

/* Base Styles */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #1f1f1f;
}

::-webkit-scrollbar-thumb {
  background: #3d3d3d;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6e6e6e;
}

/* Navigation Links */
.nav-link {
  @apply flex items-center gap-3 px-4 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-dark-700/50 transition-all duration-200 relative;
}

.nav-link.active {
  @apply text-white bg-gradient-to-r from-primary-500/20 to-primary-600/20 shadow-lg shadow-primary-500/10;
}

.nav-link.active::before {
  content: '';
  @apply absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-gradient-to-b from-primary-400 to-primary-600 rounded-r-full;
}

.nav-link i {
  @apply flex-shrink-0;
}

/* Mobile Navigation */
.mobile-nav-item {
  @apply flex flex-col items-center justify-center py-2 text-gray-400 hover:text-white transition-all relative;
  min-width: 64px;
}

.mobile-nav-item.active {
  @apply text-primary-400;
}

.mobile-nav-item.active::before {
  content: '';
  @apply absolute top-0 left-1/2 -translate-x-1/2 w-12 h-1 bg-gradient-to-r from-primary-400 to-primary-600 rounded-b-full;
}

/* Cards */
.card {
  @apply bg-dark-800/50 backdrop-blur-sm border border-dark-700 rounded-2xl p-6 hover:shadow-xl hover:shadow-primary-500/5 transition-all duration-300;
}

.card-header {
  @apply flex items-center justify-between mb-4 pb-4 border-b border-dark-700;
}

.card-title {
  @apply text-lg font-semibold text-white flex items-center gap-2;
}

.card-body {
  @apply space-y-4;
}

/* Buttons */
.btn {
  @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-primary {
  @apply bg-gradient-to-r from-primary-500 to-primary-600 text-white hover:from-primary-600 hover:to-primary-700 shadow-lg shadow-primary-500/30 hover:shadow-primary-500/50 hover:-translate-y-0.5;
}

.btn-secondary {
  @apply bg-dark-700 text-white hover:bg-dark-600;
}

.btn-success {
  @apply bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 shadow-lg shadow-green-500/30;
}

.btn-danger {
  @apply bg-gradient-to-r from-red-500 to-red-600 text-white hover:from-red-600 hover:to-red-700 shadow-lg shadow-red-500/30;
}

.btn-ghost {
  @apply text-gray-400 hover:text-white hover:bg-dark-700/50;
}

.btn-sm {
  @apply px-3 py-1.5 text-sm;
}

.btn-lg {
  @apply px-6 py-3 text-lg;
}

/* Forms */
.form-group {
  @apply space-y-2;
}

.form-label {
  @apply block text-sm font-medium text-gray-300;
}

.form-input {
  @apply w-full px-4 py-3 bg-dark-800 border border-dark-600 rounded-lg text-white placeholder-gray-500 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none transition-all;
}

.form-input:focus {
  @apply shadow-lg shadow-primary-500/10;
}

.form-select {
  @apply form-input appearance-none bg-no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236e6e6e'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.form-checkbox {
  @apply w-5 h-5 bg-dark-800 border-dark-600 rounded text-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:ring-offset-0;
}

.form-error {
  @apply text-sm text-red-400 mt-1;
}

/* Badges */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold;
}

.badge-primary {
  @apply bg-primary-500/20 text-primary-400 ring-1 ring-primary-500/30;
}

.badge-success {
  @apply bg-green-500/20 text-green-400 ring-1 ring-green-500/30;
}

.badge-warning {
  @apply bg-yellow-500/20 text-yellow-400 ring-1 ring-yellow-500/30;
}

.badge-danger {
  @apply bg-red-500/20 text-red-400 ring-1 ring-red-500/30;
}

.badge-gray {
  @apply bg-gray-500/20 text-gray-400 ring-1 ring-gray-500/30;
}

/* Pulse Animation for Live Indicators */
@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.7;
  }
  100% {
    transform: scale(0.95);
    opacity: 1;
  }
}

.pulse-ring {
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Live Indicator */
.live-indicator {
  @apply inline-flex items-center gap-2 px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-sm font-semibold;
}

.live-indicator::before {
  content: '';
  @apply w-2 h-2 bg-red-500 rounded-full animate-pulse;
}

/* Video Thumbnail */
.video-thumbnail {
  @apply relative aspect-video rounded-lg overflow-hidden bg-dark-700 group cursor-pointer;
}

.video-thumbnail img {
  @apply w-full h-full object-cover transition-transform duration-300 group-hover:scale-105;
}

.video-thumbnail-overlay {
  @apply absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center;
}

.video-thumbnail-play {
  @apply w-16 h-16 bg-white/90 rounded-full flex items-center justify-center transform scale-0 group-hover:scale-100 transition-transform duration-300;
}

.video-thumbnail-play i {
  @apply text-dark-900 text-2xl ml-1;
}

/* Empty State */
.empty-state {
  @apply flex flex-col items-center justify-center py-16 text-center;
}

.empty-state i {
  @apply text-6xl text-gray-600 mb-4;
}

.empty-state h3 {
  @apply text-xl font-semibold text-gray-300 mb-2;
}

.empty-state p {
  @apply text-gray-500 mb-6;
}

/* Modal */
.modal-overlay {
  @apply fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50;
}

.modal-container {
  @apply bg-dark-800 rounded-2xl shadow-2xl border border-dark-700 w-full max-w-2xl max-h-[90vh] overflow-y-auto;
}

.modal-header {
  @apply flex items-center justify-between p-6 border-b border-dark-700;
}

.modal-title {
  @apply text-xl font-semibold text-white;
}

.modal-body {
  @apply p-6 space-y-6;
}

.modal-footer {
  @apply flex items-center justify-end gap-3 p-6 border-t border-dark-700;
}

/* Tooltip */
.tooltip {
  @apply relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  @apply absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-dark-900 text-white text-sm rounded-lg whitespace-nowrap opacity-0 pointer-events-none transition-opacity;
}

.tooltip:hover::after {
  @apply opacity-100;
}

/* Loading Spinner */
.spinner {
  @apply inline-block w-6 h-6 border-4 border-gray-600 border-t-primary-500 rounded-full animate-spin;
}

/* Transition Utilities */
.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gradient Text */
.gradient-text {
  @apply bg-gradient-to-r from-primary-400 to-primary-600 bg-clip-text text-transparent;
}

/* Glass Effect */
.glass {
  @apply bg-white/5 backdrop-blur-lg border border-white/10;
}

/* Responsive Grid */
.grid-responsive {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4;
}

/* Auth Pages Specific */
.auth-container {
  @apply min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-dark-900 via-dark-800 to-dark-900;
}

.auth-card {
  @apply w-full max-w-md bg-dark-800/50 backdrop-blur-xl border border-dark-700 rounded-2xl p-8 shadow-2xl;
}

.auth-logo {
  @apply w-16 h-16 mx-auto mb-6 bg-gradient-to-br from-primary-500 to-primary-700 rounded-2xl flex items-center justify-center shadow-lg shadow-primary-500/50;
}

/* Animations */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.shimmer {
  animation: shimmer 2s infinite;
  background: linear-gradient(to right, #1f1f1f 4%, #2d2d2d 25%, #1f1f1f 36%);
  background-size: 1000px 100%;
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
}