DJ-Management-Tool/client/src/index.css

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

:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(20, 14.3%, 4.1%);
  --muted: hsl(60, 4.8%, 95.9%);
  --muted-foreground: hsl(25, 5.3%, 44.7%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(20, 14.3%, 4.1%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(20, 14.3%, 4.1%);
  --border: hsl(20, 5.9%, 90%);
  --input: hsl(20, 5.9%, 90%);
  --primary: hsl(207, 90%, 54%);
  --primary-foreground: hsl(211, 100%, 99%);
  --secondary: hsl(60, 4.8%, 95.9%);
  --secondary-foreground: hsl(24, 9.8%, 10%);
  --accent: hsl(60, 4.8%, 95.9%);
  --accent-foreground: hsl(24, 9.8%, 10%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(60, 9.1%, 97.8%);
  --ring: hsl(20, 14.3%, 4.1%);
  --radius: 0.5rem;

  /* Custom colors for the DJ management system */
  --primary-50: hsl(207, 100%, 97%);
  --primary-100: hsl(207, 95%, 92%);
  --primary-500: hsl(207, 90%, 54%);
  --primary-600: hsl(207, 90%, 54%);
  --primary-700: hsl(207, 90%, 45%);
  --primary-900: hsl(207, 90%, 25%);

  --slate-50: hsl(210, 40%, 98%);
  --slate-100: hsl(210, 40%, 96%);
  --slate-200: hsl(210, 16%, 93%);
  --slate-300: hsl(210, 14%, 83%);
  --slate-400: hsl(215, 16%, 47%);
  --slate-500: hsl(215, 16%, 47%);
  --slate-600: hsl(215, 19%, 35%);
  --slate-700: hsl(215, 25%, 27%);
  --slate-800: hsl(217, 33%, 17%);
  --slate-900: hsl(222, 47%, 11%);

  --blue-100: hsl(219, 100%, 95%);
  --blue-600: hsl(219, 86%, 59%);
  --green-100: hsl(149, 80%, 90%);
  --green-600: hsl(149, 80%, 40%);
  --yellow-100: hsl(49, 100%, 90%);
  --yellow-600: hsl(49, 100%, 50%);
  --purple-100: hsl(270, 100%, 95%);
  --purple-600: hsl(270, 95%, 60%);
  --red-100: hsl(0, 100%, 95%);
  --red-600: hsl(0, 84%, 60%);
}

.dark {
  --background: hsl(240, 10%, 3.9%);
  --foreground: hsl(0, 0%, 98%);
  --muted: hsl(240, 3.7%, 15.9%);
  --muted-foreground: hsl(240, 5%, 64.9%);
  --popover: hsl(240, 10%, 3.9%);
  --popover-foreground: hsl(0, 0%, 98%);
  --card: hsl(240, 10%, 3.9%);
  --card-foreground: hsl(0, 0%, 98%);
  --border: hsl(240, 3.7%, 15.9%);
  --input: hsl(240, 3.7%, 15.9%);
  --primary: hsl(207, 90%, 54%);
  --primary-foreground: hsl(211, 100%, 99%);
  --secondary: hsl(240, 3.7%, 15.9%);
  --secondary-foreground: hsl(0, 0%, 98%);
  --accent: hsl(240, 3.7%, 15.9%);
  --accent-foreground: hsl(0, 0%, 98%);
  --destructive: hsl(0, 62.8%, 30.6%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --ring: hsl(240, 4.9%, 83.9%);
  --radius: 0.5rem;
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

/* Custom utilities for the DJ management system */
.sidebar-transition {
  transition: transform 0.3s ease-in-out;
}

.notification-badge {
  animation: pulse 2s infinite;
}

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

/* Calendar specific styles */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

/* Custom color utilities */
.bg-primary-50 { background-color: var(--primary-50); }
.bg-primary-100 { background-color: var(--primary-100); }
.bg-primary-600 { background-color: var(--primary-600); }
.bg-primary-700 { background-color: var(--primary-700); }

.text-primary-600 { color: var(--primary-600); }
.text-primary-700 { color: var(--primary-700); }

.hover\:bg-primary-700:hover { background-color: var(--primary-700); }
.hover\:bg-slate-200:hover { background-color: var(--slate-200); }

.bg-slate-50 { background-color: var(--slate-50); }
.bg-slate-100 { background-color: var(--slate-100); }
.bg-slate-200 { background-color: var(--slate-200); }
.bg-slate-800 { background-color: var(--slate-800); }

.text-slate-300 { color: var(--slate-300); }
.text-slate-400 { color: var(--slate-400); }
.text-slate-500 { color: var(--slate-500); }
.text-slate-600 { color: var(--slate-600); }
.text-slate-700 { color: var(--slate-700); }
.text-slate-800 { color: var(--slate-800); }

.border-slate-200 { border-color: var(--slate-200); }
.border-slate-300 { border-color: var(--slate-300); }

.ring-primary-500 { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); }
.focus\:ring-primary-500:focus { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2); }

.bg-blue-100 { background-color: var(--blue-100); }
.text-blue-600 { color: var(--blue-600); }

.bg-green-100 { background-color: var(--green-100); }
.text-green-600 { color: var(--green-600); }

.bg-yellow-100 { background-color: var(--yellow-100); }
.text-yellow-600 { color: var(--yellow-600); }

.bg-purple-100 { background-color: var(--purple-100); }
.text-purple-600 { color: var(--purple-600); }

.bg-red-100 { background-color: var(--red-100); }
.text-red-600 { color: var(--red-600); }

/* Form and input improvements */
.form-field {
  @apply space-y-2;
}

.form-label {
  @apply text-sm font-medium text-slate-700;
}

.form-input {
  @apply w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-input:disabled {
  @apply bg-slate-50 text-slate-500;
}

/* Button improvements */
.btn-primary {
  @apply bg-primary-600 hover:bg-primary-700 text-white;
}

.btn-secondary {
  @apply bg-slate-100 hover:bg-slate-200 text-slate-700;
}

/* Table improvements */
.table-row {
  @apply hover:bg-slate-50 transition-colors;
}

.table-cell {
  @apply px-6 py-4 whitespace-nowrap text-sm text-slate-900;
}

/* Modal improvements */
.modal-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 z-50;
}

.modal-content {
  @apply bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-screen overflow-y-auto;
}

/* Loading animations */
.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive utilities */
@media (max-width: 768px) {
  .sidebar-mobile {
    transform: translateX(-100%);
  }
  
  .sidebar-mobile.open {
    transform: translateX(0);
  }
}