/* ================================================
   ADMIN DASHBOARD STYLES
   ================================================ */

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

/* Base */
@layer base {
    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Space Grotesk', system-ui, sans-serif;
    }
}

/* Components */
@layer components {
    /* Navigation Items */
    .nav-item {
        @apply flex items-center gap-3 px-4 py-2.5 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800 transition-colors mb-1;
    }
    
    .nav-item.active {
        @apply bg-primary-600 text-white;
    }
    
    /* Form Elements */
    .form-label {
        @apply block text-sm font-medium text-slate-700 mb-2;
    }
    
    .form-input {
        @apply w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all outline-none;
    }
    
    .form-select {
        @apply w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all outline-none bg-white;
    }
    
    .form-textarea {
        @apply w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all outline-none resize-none;
    }
    
    /* Buttons */
    .btn {
        @apply inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl font-medium text-sm transition-all duration-200;
    }
    
    .btn-primary {
        @apply bg-primary-600 text-white hover:bg-primary-700 shadow-sm hover:shadow-md;
    }
    
    .btn-secondary {
        @apply bg-slate-100 text-slate-700 hover:bg-slate-200;
    }
    
    .btn-danger {
        @apply bg-red-600 text-white hover:bg-red-700;
    }
    
    .btn-success {
        @apply bg-green-600 text-white hover:bg-green-700;
    }
    
    .btn-outline {
        @apply border border-slate-200 text-slate-700 hover:bg-slate-50;
    }
    
    /* Cards */
    .card {
        @apply bg-white rounded-2xl border border-slate-100 shadow-sm;
    }
    
    .card-header {
        @apply p-6 border-b border-slate-100;
    }
    
    .card-body {
        @apply p-6;
    }
    
    /* Tables */
    .table-container {
        @apply overflow-x-auto;
    }
    
    .data-table {
        @apply w-full text-sm;
    }
    
    .data-table th {
        @apply px-4 py-3 text-left font-semibold text-slate-700 bg-slate-50 border-b border-slate-200;
    }
    
    .data-table td {
        @apply px-4 py-3 border-b border-slate-100;
    }
    
    .data-table tr:hover td {
        @apply bg-slate-50;
    }
    
    /* Badges */
    .badge {
        @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium;
    }
    
    .badge-success {
        @apply bg-green-100 text-green-700;
    }
    
    .badge-warning {
        @apply bg-amber-100 text-amber-700;
    }
    
    .badge-danger {
        @apply bg-red-100 text-red-700;
    }
    
    .badge-info {
        @apply bg-blue-100 text-blue-700;
    }
    
    /* Alerts */
    .alert {
        @apply p-4 rounded-xl border;
    }
    
    .alert-success {
        @apply bg-green-50 border-green-200 text-green-800;
    }
    
    .alert-danger {
        @apply bg-red-50 border-red-200 text-red-800;
    }
    
    .alert-warning {
        @apply bg-amber-50 border-amber-200 text-amber-800;
    }
    
    .alert-info {
        @apply bg-blue-50 border-blue-200 text-blue-800;
    }
    
    /* Dropzone */
    .dropzone {
        @apply border-2 border-dashed border-slate-300 rounded-xl p-8 text-center cursor-pointer hover:border-primary-500 hover:bg-primary-50/50 transition-all;
    }
    
    .dropzone.dragover {
        @apply border-primary-500 bg-primary-50;
    }
    
    /* File Preview */
    .file-preview {
        @apply relative inline-block;
    }
    
    .file-preview img {
        @apply w-20 h-20 object-cover rounded-lg border border-slate-200;
    }
    
    .file-preview .remove-btn {
        @apply absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center text-xs hover:bg-red-600;
    }
}

/* Utilities */
@layer utilities {
    .scrollbar-thin {
        scrollbar-width: thin;
    }
    
    .scrollbar-thin::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    .scrollbar-thin::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .scrollbar-thin::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
    }
}