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

:root {
    --primary-500: #007bff;
    --primary-600: #0069d9;
    --secondary-500: #6c757d;
    --success-500: #28a745;
    --danger-500: #dc3545;
    --warning-500: #ffc107;
    
    --bg-color: #f8fafc;
    --card-bg-color: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --border-color: #e2e8f0;
}

html.dark {
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --secondary-500: #9ca3af;
    --success-500: #22c55e;
    --danger-500: #ef4444;
    --warning-500: #f59e0b;

    --bg-color: #0f172a;
    --card-bg-color: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --border-color: #334155;
}

@layer base {
    body {
        @apply bg-[var(--bg-color)] text-[var(--text-primary)] transition-colors duration-300;
    }
}

@layer components {
    .card {
        @apply bg-[var(--card-bg-color)] p-5 md:p-6 rounded-xl shadow-lg border border-[var(--border-color)] transition-colors duration-300;
    }

    .card-action {
        @apply card text-center cursor-pointer hover:shadow-xl hover:-translate-y-1 transition-all duration-300;
    }
    .card-action h3 {
        @apply text-lg font-bold text-[var(--primary-500)] mb-2;
    }
    .card-action p {
        @apply text-sm text-[var(--text-secondary)];
    }

    .form-title {
        @apply text-2xl font-bold text-center mb-6;
    }

    .input-group {
        @apply mb-5;
    }
    .input-group label {
        @apply block text-sm font-medium text-[var(--text-secondary)] mb-1;
    }
    .input-group input, .input-group textarea, .input-group select {
        @apply w-full p-2.5 border border-[var(--border-color)] rounded-lg bg-transparent focus:ring-2 focus:ring-[var(--primary-500)] focus:border-transparent outline-none transition-shadow;
    }

    .btn-primary {
        @apply bg-[var(--primary-500)] text-white font-bold py-2.5 px-4 rounded-lg hover:bg-[var(--primary-600)] transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
    }
    
    .nav-link {
        @apply text-[var(--text-secondary)] hover:text-[var(--primary-500)] font-medium transition-colors;
    }
    .nav-link.active {
        @apply text-[var(--primary-500)] font-bold;
    }

    .bottom-nav-link {
        @apply flex-1 py-2 text-center text-[var(--text-secondary)] hover:text-[var(--primary-500)] transition-colors;
    }
    .bottom-nav-link.active {
        @apply text-[var(--primary-500)];
    }

    .upload-zone {
        @apply mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-[var(--border-color)] border-dashed rounded-md cursor-pointer hover:border-[var(--primary-500)];
    }
    .upload-zone p {
        @apply text-sm text-[var(--text-secondary)];
    }

    .order-status-pill {
        @apply inline-block px-3 py-1 text-xs font-semibold rounded-full text-white;
    }
    .order-status-pill.pending { @apply bg-yellow-500; }
    .order-status-pill.processing { @apply bg-blue-500; }
    .order-status-pill.shipped { @apply bg-indigo-500; }
    .order-status-pill.delivered { @apply bg-green-500; }
    .order-status-pill.returned { @apply bg-red-500; }
    .order-status-pill.cancelled { @apply bg-gray-500; }

    .order-tracker {
        @apply relative ps-8 rtl:pe-8 rtl:ps-0;
    }
    .order-tracker::before {
        @apply content-[''] absolute top-2 bottom-2 start-3 rtl:end-3 rtl:start-auto w-0.5 bg-[var(--border-color)];
    }
    .tracker-step {
        @apply relative mb-6;
    }
    .tracker-dot {
        @apply absolute -start-5 rtl:-end-5 rtl:start-auto -translate-y-1/2 top-1/2 w-8 h-8 rounded-full border-4 border-[var(--bg-color)] flex items-center justify-center;
    }
    .tracker-step.completed .tracker-dot {
        @apply bg-[var(--success-500)] text-white;
    }
    .tracker-step.active .tracker-dot {
        @apply bg-[var(--primary-500)] text-white animate-pulse;
    }
    .tracker-step.inactive .tracker-dot {
        @apply bg-[var(--border-color)];
    }
    .tracker-content {
        @apply pt-1;
    }
    .tracker-content h4 {
        @apply font-bold;
    }
    .tracker-content p {
        @apply text-sm text-[var(--text-secondary)];
    }

    .toast {
        @apply min-w-[300px] max-w-sm p-4 rounded-lg shadow-xl text-white font-medium transform transition-all duration-300;
        animation: toast-in 0.5s ease-out forwards;
    }
    .toast.success { @apply bg-[var(--success-500)]; }
    .toast.error { @apply bg-[var(--danger-500)]; }
    .toast.info { @apply bg-[var(--primary-500)]; }
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}