NeveTimePanel/frontend/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* MCSManager Style Global Styles */
@layer base {
  * {
    @apply border-dark-700;
  }
  
  body {
    @apply bg-dark-900 text-gray-100 antialiased;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-dark-850;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-dark-600 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-dark-500;
  }
}

@layer components {
  /* Card styles */
  .card {
    @apply bg-dark-800 rounded-lg border border-dark-700 shadow-lg;
  }

  .card-hover {
    @apply card transition-all duration-200 hover:border-primary-500 hover:shadow-glow;
  }

  /* Button styles */
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 
           focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-900;
  }

  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 
           focus:ring-primary-500 shadow-md hover:shadow-glow;
  }

  .btn-secondary {
    @apply btn bg-dark-700 text-gray-200 hover:bg-dark-600 
           focus:ring-dark-500 border border-dark-600;
  }

  .btn-success {
    @apply btn bg-green-600 text-white hover:bg-green-700 
           focus:ring-green-500 shadow-md;
  }

  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700 
           focus:ring-red-500 shadow-md;
  }

  .btn-warning {
    @apply btn bg-yellow-600 text-white hover:bg-yellow-700 
           focus:ring-yellow-500 shadow-md;
  }

  .btn-icon {
    @apply p-2 rounded-lg transition-all duration-200 
           hover:bg-dark-700 focus:outline-none focus:ring-2 
           focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-dark-900;
  }

  /* Input styles */
  .input {
    @apply w-full px-4 py-2 bg-dark-850 border border-dark-700 rounded-lg 
           text-gray-100 placeholder-gray-500 
           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent
           transition-all duration-200;
  }

  .input:focus {
    @apply shadow-glow;
  }

  /* Badge styles */
  .badge {
    @apply px-2 py-1 text-xs font-semibold rounded-full;
  }

  .badge-success {
    @apply badge bg-green-600/20 text-green-400 border border-green-600/30;
  }

  .badge-danger {
    @apply badge bg-red-600/20 text-red-400 border border-red-600/30;
  }

  .badge-warning {
    @apply badge bg-yellow-600/20 text-yellow-400 border border-yellow-600/30;
  }

  .badge-info {
    @apply badge bg-blue-600/20 text-blue-400 border border-blue-600/30;
  }

  /* Sidebar styles */
  .sidebar-item {
    @apply flex items-center gap-3 px-4 py-3 rounded-lg 
           text-gray-300 hover:text-white hover:bg-dark-700 
           transition-all duration-200 cursor-pointer;
  }

  .sidebar-item-active {
    @apply sidebar-item bg-primary-600/20 text-primary-400 
           border-l-4 border-primary-500 hover:bg-primary-600/30;
  }

  /* Tab styles */
  .tab {
    @apply px-4 py-2 font-medium text-gray-400 hover:text-gray-200 
           border-b-2 border-transparent hover:border-dark-600 
           transition-all duration-200 cursor-pointer;
  }

  .tab-active {
    @apply tab text-primary-400 border-primary-500 hover:border-primary-500;
  }

  /* Stats card */
  .stat-card {
    @apply card p-4 flex items-center gap-4;
  }

  .stat-icon {
    @apply p-3 rounded-lg bg-primary-600/20 text-primary-400;
  }

  /* Server card */
  .server-card {
    @apply card-hover p-6 cursor-pointer;
  }

  .server-card-selected {
    @apply server-card border-primary-500 bg-primary-600/10 shadow-glow;
  }

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

  .modal-content {
    @apply card p-6 max-w-5xl w-full max-h-[90vh] overflow-y-auto;
  }

  /* Console terminal */
  .console-terminal {
    @apply bg-dark-950 rounded-lg p-4 font-mono text-sm 
           text-green-400 overflow-auto border border-dark-700;
  }

  /* Loading spinner */
  .spinner {
    @apply animate-spin rounded-full border-2 border-gray-600 
           border-t-primary-500;
  }

  /* Tooltip */
  .tooltip {
    @apply absolute z-50 px-2 py-1 text-xs font-medium text-white 
           bg-dark-700 rounded shadow-lg pointer-events-none;
  }
}

/* Animations */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-slide-in {
  animation: slideIn 0.3s ease-out;
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Glow effect for active elements */
.glow-effect {
  position: relative;
}

.glow-effect::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(45deg, #0ea5e9, #3b82f6, #8b5cf6);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
}

.glow-effect:hover::before {
  opacity: 0.5;
}