/* MyInstructorFinder Custom Styles */

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Form styles */
.form-control {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.btn {
    @apply px-6 py-2 rounded-lg font-medium transition duration-200 cursor-pointer inline-block text-center;
}

.btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-800 hover:bg-gray-300;
}

.btn-success {
    @apply bg-green-600 text-white hover:bg-green-700;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700;
}

/* Card styles */
.card {
    @apply bg-white rounded-lg shadow-md p-6;
}

.card-hover {
    @apply hover:shadow-lg transition-shadow duration-200;
}

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

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

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

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

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

/* Alert styles */
.alert {
    @apply p-4 rounded-lg mb-4;
}

.alert-success {
    @apply bg-green-100 border border-green-400 text-green-700;
}

.alert-error {
    @apply bg-red-100 border border-red-400 text-red-700;
}

.alert-warning {
    @apply bg-yellow-100 border border-yellow-400 text-yellow-700;
}

.alert-info {
    @apply bg-blue-100 border border-blue-400 text-blue-700;
}

/* Instructor card */
.instructor-card {
    @apply bg-white rounded-lg shadow-md hover:shadow-lg transition-all duration-200 overflow-hidden;
}

.instructor-card:hover {
    transform: translateY(-2px);
}

/* Search filters */
.filter-chip {
    @apply inline-flex items-center px-4 py-2 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 transition cursor-pointer select-none;
}

.filter-chip.active {
    @apply bg-blue-600 text-white hover:bg-blue-700;
}

/* Message thread */
.message {
    @apply p-4 rounded-lg mb-3;
}

.message-learner {
    @apply bg-blue-50 ml-auto max-w-3xl;
}

.message-instructor {
    @apply bg-gray-50 mr-auto max-w-3xl;
}

.message-system {
    @apply bg-yellow-50 text-center text-sm text-gray-600 italic;
}

/* Loading spinner */
.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Animations */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

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

@keyframes slideIn {
    0% { transform: translateY(-10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Responsive tables */
.table-responsive {
    @apply overflow-x-auto;
}

.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table thead {
    @apply bg-gray-50;
}

.table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

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

/* Custom checkboxes and radios */
.custom-checkbox,
.custom-radio {
    @apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2;
}

.custom-radio {
    @apply rounded-full;
}

/* File upload */
.file-upload {
    @apply relative overflow-hidden inline-block;
}

.file-upload input[type=file] {
    @apply absolute left-0 top-0 opacity-0 cursor-pointer h-full w-full;
}

.file-upload-label {
    @apply px-4 py-2 bg-blue-600 text-white rounded-lg cursor-pointer hover:bg-blue-700 transition;
}