/**
 * Design System - Reusable Component Classes
 * Django best practice: Centralized styling
 */

/* ==========================================================================
   Button Components
   ========================================================================== */

.btn-primary {
    @apply w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-semibold
           hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500
           focus:ring-offset-2 transition-colors duration-200;
}

.btn-secondary {
    @apply w-full bg-gray-600 text-white py-3 px-6 rounded-lg font-semibold
           hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500
           focus:ring-offset-2 transition-colors duration-200;
}

.btn-success {
    @apply w-full bg-green-600 text-white py-3 px-6 rounded-lg font-semibold
           hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500
           focus:ring-offset-2 transition-colors duration-200;
}

.btn-danger {
    @apply w-full bg-red-600 text-white py-3 px-6 rounded-lg font-semibold
           hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500
           focus:ring-offset-2 transition-colors duration-200;
}

.btn-warning {
    @apply w-full bg-yellow-600 text-white py-3 px-6 rounded-lg font-semibold
           hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500
           focus:ring-offset-2 transition-colors duration-200;
}

/* Button sizes */
.btn-sm {
    @apply py-2 px-4 text-sm;
}

.btn-lg {
    @apply py-4 px-8 text-lg;
}

/* Outline button variants */
.btn-outline-primary {
    @apply w-full border-2 border-blue-600 text-blue-600 py-3 px-6 rounded-lg font-semibold
           hover:bg-blue-600 hover:text-white focus:outline-none focus:ring-2
           focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200;
}

.btn-outline-secondary {
    @apply w-full border-2 border-gray-600 text-gray-600 py-3 px-6 rounded-lg font-semibold
           hover:bg-gray-600 hover:text-white focus:outline-none focus:ring-2
           focus:ring-gray-500 focus:ring-offset-2 transition-all duration-200;
}

/* ==========================================================================
   Card Components
   ========================================================================== */

.card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6
           hover:shadow-md transition-shadow duration-200;
}

.card-header {
    @apply border-b border-gray-200 pb-4 mb-4;
}

.card-body {
    @apply space-y-4;
}

.card-footer {
    @apply border-t border-gray-200 pt-4 mt-4;
}

/* Card variants */
.card-primary {
    @apply border-blue-200 bg-blue-50;
}

.card-success {
    @apply border-green-200 bg-green-50;
}

.card-warning {
    @apply border-yellow-200 bg-yellow-50;
}

.card-danger {
    @apply border-red-200 bg-red-50;
}

/* ==========================================================================
   Form Components
   ========================================================================== */

.form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg
           focus:ring-2 focus:ring-blue-500 focus:border-blue-500
           transition-colors duration-200;
}

.form-input-error {
    @apply w-full px-4 py-2 border-2 border-red-500 rounded-lg
           focus:ring-2 focus:ring-red-500 focus:border-red-500;
}

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

.form-error {
    @apply text-sm text-red-600 mt-1;
}

.form-help {
    @apply text-sm text-gray-500 mt-1;
}

/* ==========================================================================
   Badge Components
   ========================================================================== */

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

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

.badge-secondary {
    @apply bg-gray-100 text-gray-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-info {
    @apply bg-cyan-100 text-cyan-800;
}

/* ==========================================================================
   Alert Components
   ========================================================================== */

.alert {
    @apply p-4 rounded-lg border;
}

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

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

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

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

/* ==========================================================================
   Table Components
   ========================================================================== */

.table {
    @apply w-full text-sm text-left text-gray-500;
}

.table thead {
    @apply text-xs text-gray-700 uppercase bg-gray-50;
}

.table th {
    @apply px-6 py-3;
}

.table td {
    @apply px-6 py-4;
}

.table tbody tr {
    @apply bg-white border-b hover:bg-gray-50 transition-colors;
}

/* ==========================================================================
   Modal Components
   ========================================================================== */

.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-40
           flex items-center justify-center;
}

.modal-content {
    @apply bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4
           overflow-hidden z-50;
}

.modal-header {
    @apply px-6 py-4 border-b border-gray-200 flex items-center justify-between;
}

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

.modal-footer {
    @apply px-6 py-4 border-t border-gray-200 flex items-center justify-end gap-3;
}

/* ==========================================================================
   Product Card (E-commerce specific)
   ========================================================================== */

.product-card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200
           overflow-hidden hover:shadow-lg transition-all duration-300
           hover:scale-105;
}

.product-image {
    @apply w-full h-48 object-cover;
}

.product-info {
    @apply p-4 space-y-2;
}

.product-title {
    @apply font-semibold text-lg text-gray-900 line-clamp-2;
}

.product-description {
    @apply text-sm text-gray-600 line-clamp-2;
}

.product-price {
    @apply text-xl font-bold text-blue-600;
}

/* ==========================================================================
   Order Components
   ========================================================================== */

.order-status {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
}

.order-status-pending {
    @apply bg-yellow-100 text-yellow-800;
}

.order-status-completed {
    @apply bg-green-100 text-green-800;
}

.order-status-cancelled {
    @apply bg-red-100 text-red-800;
}

.order-status-processing {
    @apply bg-blue-100 text-blue-800;
}

/* ==========================================================================
   License Key Display
   ========================================================================== */

.license-key {
    @apply font-mono text-lg font-bold text-gray-900
           bg-gray-100 px-4 py-3 rounded-lg border border-gray-300
           tracking-wider select-all;
}

.license-key-masked {
    @apply font-mono text-lg font-bold text-gray-500
           bg-gray-50 px-4 py-3 rounded-lg border border-gray-200;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r
           from-blue-600 to-purple-600;
}

.shadow-glow {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.hover-lift {
    @apply transition-transform duration-200 hover:-translate-y-1;
}

/* Loading spinner */
.spinner {
    @apply inline-block w-6 h-6 border-4 border-gray-300
           border-t-blue-600 rounded-full animate-spin;
}

/* Skeleton loading */
.skeleton {
    @apply animate-pulse bg-gray-200 rounded;
}

/* Divider */
.divider {
    @apply border-t border-gray-200 my-4;
}

/* Container */
.container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* ==========================================================================
   Responsive Utilities
   ========================================================================== */

@media (max-width: 640px) {
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger,
    .btn-warning {
        @apply text-sm py-2 px-4;
    }

    .product-card {
        @apply hover:scale-100;
    }
}