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

/* ── CoreUI-inspired Color Palette ── */
:root {
  --foreground-rgb: 0, 0, 0;
  --background-rgb: 248, 249, 250;
  --primary: 13, 110, 253; /* CoreUI blue */
  --primary-dark: 10, 88, 202;
  --secondary: 108, 117, 125; /* gray */
  --success: 25, 135, 84;
  --warning: 255, 193, 7;
  --danger: 220, 53, 69;
  --info: 13, 202, 240;
  --sidebar-bg: #212529;
  --sidebar-hover: rgba(255, 255, 255, 0.1);
}

html, body {
  color: #212529;
  background: #f8f9fa;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Ensure all common text elements are black */
p, span, div, h1, h2, h3, h4, h5, h6, label, li, td, th, a {
  color: inherit;
}

/* CoreUI-inspired button styles */
@layer components {
  .btn-primary {
    @apply bg-blue-600 text-white font-semibold px-4 py-2 rounded-lg shadow-sm hover:bg-blue-700 hover:shadow transition-all duration-200;
  }
  
  .btn-secondary {
    @apply bg-gray-200 text-gray-800 font-semibold px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-300 transition-all duration-200;
  }
  
  .btn-success {
    @apply bg-success text-white font-semibold px-4 py-2 rounded-lg shadow-sm hover:bg-green-600 transition-all duration-200;
  }
  
  .btn-danger {
    @apply bg-danger text-white font-semibold px-4 py-2 rounded-lg shadow-sm hover:bg-red-600 transition-all duration-200;
  }
  
  .btn-outline-primary {
    @apply border-2 border-blue-600 text-blue-600 font-semibold px-4 py-2 rounded-lg hover:bg-blue-600 hover:text-white transition-all duration-200;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-4;
  }
  
  .card-header {
    @apply bg-white border-b border-gray-200 px-4 py-3 rounded-t-lg;
  }
  
  .card-body {
    @apply p-4;
  }
  
  .card-footer {
    @apply bg-gray-50 border-t border-gray-200 px-4 py-3 rounded-b-lg;
  }
}

/* Override Tailwind's default gray text colors for readability */
@layer base {
  body {
    @apply text-black;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply text-black font-bold;
  }
  label {
    @apply text-black font-semibold;
  }
  p {
    @apply text-black;
  }
  input, select, textarea {
    @apply text-black;
  }
  td {
    @apply text-black;
  }
}

/* Table improvements */
table {
  @apply w-full;
}

thead {
  @apply bg-gradient-to-r from-gray-50 to-gray-100;
}

/* CoreUI-inspired input styles */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
select,
textarea {
  @apply border border-gray-300 rounded-lg px-3 py-2 text-sm transition-all duration-200;
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500;
  @apply hover:border-gray-400;
  @apply bg-white;
}

/* Focus ring */
input:focus, select:focus, textarea:focus, button:focus {
  outline: none;
}

/* CoreUI-inspired scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: #adb5bd;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #6c757d;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Badge styles - CoreUI inspired */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded text-xs font-semibold;
}

.badge-primary {
  @apply bg-blue-100 text-blue-800;
}

.badge-success {
  @apply bg-green-100 text-green-800;
}

.badge-warning {
  @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
  @apply bg-red-100 text-red-800;
}

.badge-secondary {
  @apply bg-gray-100 text-gray-800;
}

.badge-info {
  @apply bg-cyan-100 text-cyan-800;
}