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

/* Admin-specific styles */
@layer components {
    .sidebar {
        @apply bg-gray-900 text-white h-full w-full overflow-y-auto;
    }

    .sidebar-nav {
        @apply mt-8 space-y-1;
    }

    .sidebar-nav-item {
        @apply flex items-center px-6 py-3 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white transition-colors duration-150;
    }

    .sidebar-nav-item.active {
        @apply bg-gray-800 text-white border-r-4 border-blue-500;
    }

    .sidebar-nav-icon {
        @apply mr-3 h-5 w-5 flex-shrink-0;
    }

    .main-content {
        @apply flex-1 min-h-screen bg-gray-50;
    }

    .admin-header {
        @apply bg-white shadow-sm border-b border-gray-200 px-6 py-4;
    }

    .admin-header-title {
        @apply text-2xl font-semibold text-gray-900;
    }

    .btn {
        @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-150;
    }

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

    .btn-secondary {
        @apply text-gray-700 bg-white border-gray-300 hover:bg-gray-50 focus:ring-blue-500;
    }

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

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

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

    .btn-info {
        @apply text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
    }

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

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

    /* Action Buttons */
    .action-btn {
        @apply p-2 rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2;
    }

    .action-btn-primary {
        @apply text-blue-600 hover:text-blue-900 hover:bg-blue-50 focus:ring-blue-500;
    }

    .action-btn-secondary {
        @apply text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:ring-gray-500;
    }

    .action-btn-success {
        @apply text-green-600 hover:text-green-900 hover:bg-green-50 focus:ring-green-500;
    }

    .action-btn-danger {
        @apply text-red-600 hover:text-red-900 hover:bg-red-50 focus:ring-red-500;
    }

    .action-btn-warning {
        @apply text-yellow-600 hover:text-yellow-900 hover:bg-yellow-50 focus:ring-yellow-500;
    }

    .action-btn-info {
        @apply text-blue-600 hover:text-blue-900 hover:bg-blue-50 focus:ring-blue-500;
    }

    .form-group {
        @apply mb-4;
    }

    .form-label {
        @apply block text-sm font-medium text-gray-700 mb-2;
    }

    .form-input {
        @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500;
    }

    .form-textarea {
        @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 resize-y;
    }

    .form-select {
        @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500;
    }

    .card {
        @apply bg-white overflow-hidden shadow rounded-lg;
    }

    .card-header {
        @apply px-6 py-4 border-b border-gray-200 bg-gray-50;
    }

    .card-title {
        @apply text-lg font-medium text-gray-900;
    }

    .card-body {
        @apply px-6 py-4;
    }

    .table-container {
        @apply overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg;
    }

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

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

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

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

    .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-info {
        @apply bg-blue-100 text-blue-800;
    }

    .alert {
        @apply rounded-md p-4 mb-4;
    }

    .alert-success {
        @apply bg-green-50 border border-green-200 text-green-800;
    }

    .alert-error {
        @apply bg-red-50 border border-red-200 text-red-800;
    }

    .alert-warning {
        @apply bg-yellow-50 border border-yellow-200 text-yellow-800;
    }

    .alert-info {
        @apply bg-blue-50 border border-blue-200 text-blue-800;
    }

    /* Admin-specific utility classes */
    .admin-gradient {
        @apply bg-gradient-to-br from-gray-900 via-purple-900 to-indigo-900;
    }

    .admin-sidebar-gradient {
        @apply bg-gradient-to-b from-gray-900 via-purple-900 to-indigo-900;
    }

    .admin-card {
        @apply bg-white rounded-xl shadow-lg border border-gray-100;
    }

    .admin-card-header {
        @apply px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-blue-50;
    }

    .admin-card-body {
        @apply px-6 py-4;
    }

    .admin-button {
        @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200;
    }

    .admin-button-primary {
        @apply text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 focus:ring-blue-500;
    }

    .admin-button-secondary {
        @apply text-gray-700 bg-white border-gray-300 hover:bg-gray-50 focus:ring-blue-500;
    }

    .admin-button-success {
        @apply text-white bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 focus:ring-green-500;
    }

    .admin-button-danger {
        @apply text-white bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 focus:ring-red-500;
    }

    /* Ensure proper z-index stacking */
    .admin-sidebar {
        @apply z-50;
    }

    .admin-header {
        @apply z-40;
    }

    .admin-dropdown {
        @apply z-30;
    }

    /* Fix for Alpine.js dropdowns */
    [x-cloak] {
        display: none !important;
    }

    /* Ensure proper font loading */
    .font-sans {
        font-family: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    }

    /* Ensure proper spacing for admin content */
    .admin-content {
        @apply p-6;
    }

    .admin-content-mobile {
        @apply p-4;
    }

    @media (min-width: 768px) {
        .admin-content {
            @apply p-6;
        }
    }

    @media (max-width: 767px) {
        .admin-content {
            @apply p-4;
        }
    }
}