/**
 * Sparkles Import/Export Components
 * Extracted from HyvaFastImport for reusable bulk operation interfaces
 * Extends: sparkles-utilities.css, sparkles-animations.css, sparkles-tokens.css
 * All 3 optimization layers applied: keyframes consolidated, patterns extracted, component organization
 */

/* =============================================================================
   IMPORT/EXPORT CONTAINER
   ============================================================================= */

.sparkles-import-container {
    padding: 1.5rem;
    container-type: inline-size;
}

.sparkles-import-header {
    --sparkles-header-gap: 1.5rem;
}

.sparkles-import-header.dark {
    --tw-border-opacity: 1;
    border-color: rgba(55, 65, 81, var(--tw-border-opacity, 1));
}

.sparkles-import-title,
.sparkles-admin-card-title {
    line-height: 1.75rem;
    font-weight: 600;
    color: var(--gray-900);
    display: flex;
    align-items: center;
}

.sparkles-import-title {
    font-size: 1.25rem;
}

.sparkles-import-title.dark {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}

.sparkles-import-title .icon {
    margin-right: .5rem;
    --tw-text-opacity: 1;
    color: rgba(217, 119, 6, var(--tw-text-opacity, 1));
}

/* =============================================================================
   FILE UPLOAD AREA
   ============================================================================= */

.sparkles-upload-area {
    position: relative;
    border-width: 2px;
    border-style: dashed;
    border-color: var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    transition-duration: .2s;
}

.sparkles-upload-area:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 251, 235, var(--tw-bg-opacity, 1));
    --tw-bg-opacity: 0.1;
}

.sparkles-upload-area.active {
    --tw-bg-opacity: 1;
    background-color: rgba(217, 119, 6, var(--tw-bg-opacity, 1));
    --tw-bg-opacity: 0.5;
}

.sparkles-upload-icon {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    color: var(--gray-400);
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    transition-duration: .2s;
    width: 3rem;
    height: 3rem;
}

.sparkles-upload-area:hover .sparkles-upload-icon {
    --tw-text-opacity: 1;
    color: rgba(217, 119, 6, var(--tw-text-opacity, 1));
}

.sparkles-upload-subtext {
    color: var(--gray-500);
    margin-bottom: 1rem;
}

.sparkles-upload-button {
    display: inline-flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    --tw-bg-opacity: 1;
    background-color: rgba(217, 119, 6, var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
    border-radius: var(--radius-btn);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    transition-duration: .2s;
}

.sparkles-file-input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

/* =============================================================================
   PROGRESS TRACKING
   ============================================================================= */

.sparkles-progress-container {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: var(--gray-50);
    border-radius: var(--radius-lg);
}

.sparkles-progress-container.dark {
    --tw-bg-opacity: 1;
    background-color: rgba(55, 65, 81, var(--tw-bg-opacity, 1));
}

.sparkles-progress-header,
.sparkles-rule-list .rule-header {
    margin-bottom: .75rem;
}

.sparkles-progress-title {
    font-weight: 500;
    color: var(--gray-900);
}

.sparkles-progress-title.dark {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}

.sparkles-progress-percentage {
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgba(217, 119, 6, var(--tw-text-opacity, 1));
}

.sparkles-progress-bar,
.sparkles-form-progress {
    height: .5rem;
}

.sparkles-progress-bar {
    margin-bottom: .75rem;
}

.sparkles-progress-bar.dark {
    --tw-bg-opacity: 1;
    background-color: rgba(75, 85, 99, var(--tw-bg-opacity, 1));
}

.sparkles-progress-fill {
    transform-origin: left;
    height: 100%;
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: var(--color-warning-dark) var(--tw-gradient-from-position);
    --tw-gradient-to: var(--color-warning-dark)00 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: var(--color-amber) var(--tw-gradient-to-position);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    transition-duration: .3s;
}

.sparkles-progress-fill.error {
    --tw-gradient-from: var(--color-error) var(--tw-gradient-from-position);
    --tw-gradient-to: var(--color-orange-dark) var(--tw-gradient-to-position);
}

.sparkles-progress-fill.success {
    --tw-gradient-from: var(--color-success-dark) var(--tw-gradient-from-position);
    --tw-gradient-to: var(--color-success) var(--tw-gradient-to-position);
}

.sparkles-progress-fill.animated {
    animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

.sparkles-progress-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
}

.sparkles-progress-stat {
    text-align: center;
}

.sparkles-progress-stat-value {
    display: block;
    font-weight: 600;
    color: var(--gray-900);
}

.sparkles-progress-stat-value.dark {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}

.sparkles-progress-stat-label,
.sparkles-product-brand {
    color: var(--gray-500);
    font-size: .75rem;
    line-height: 1rem;
    text-transform: uppercase;
    letter-spacing: .025em;
}

/* =============================================================================
   BATCH STATUS CARDS
   ============================================================================= */

.sparkles-batch-status {
    margin-top: 1rem;
}

.sparkles-batch-item,
.sparkles-file-item {
    display: flex;
    align-items: center;
    padding: .75rem;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
    border-width: 1px;
    border-color: var(--gray-200);
    border-radius: var(--radius-lg);
}

.sparkles-batch-item {
    justify-content: space-between;
}

.sparkles-batch-item.processing {
    border-color: var(--color-primary);
    --tw-border-opacity: 0.3;
    background-color: var(--color-primary);
    --tw-bg-opacity: 0.1;
}

.sparkles-batch-info {
    display: flex;
    align-items: center;
}

.sparkles-batch-icon,
.sparkles-dropdown-option-icon,
.sparkles-alert-icon svg {
    margin-right: .75rem;
}

.sparkles-batch-icon.success {
    --tw-text-opacity: 1;
    color: rgba(16, 185, 129, var(--tw-text-opacity, 1));
}

.sparkles-batch-icon.error {
    --tw-text-opacity: 1;
    color: rgba(239, 68, 68, var(--tw-text-opacity, 1));
}

.sparkles-batch-icon.processing {
    color: var(--color-primary);
    animation: spin 1s linear infinite;
}

.sparkles-batch-details {
    flex: 1 1 0%;
}

.sparkles-batch-title,
.sparkles-status-card-title,
.sparkles-rule-list .rule-targets .value {
    color: var(--gray-900);
    font-size: .875rem;
    line-height: 1.25rem;
}

.sparkles-batch-title,
.sparkles-status-card-title {
    font-weight: 500;
}

.sparkles-batch-title.dark {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}

.sparkles-batch-actions,
.sparkles-control-group,
.sparkles-error-actions {
    display: flex;
    align-items: center;
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--sparkles-space-x, .5rem) * var(--tw-space-x-reverse));
    margin-left: calc(var(--sparkles-space-x, .5rem) * (1 - var(--tw-space-x-reverse)));
}

.sparkles-control-group,
.sparkles-error-actions {
    --sparkles-space-x: .75rem;
}

/* =============================================================================
   CONTROL BUTTONS
   ============================================================================= */

.sparkles-import-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top-width: 1px;
    border-color: var(--gray-200);
}

.sparkles-import-controls.dark {
    --tw-border-opacity: 1;
    border-color: rgba(55, 65, 81, var(--tw-border-opacity, 1));
}

.sparkles-control-button {
    display: inline-flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    border-radius: var(--radius-btn);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    transition-duration: .2s;
}

.sparkles-control-button.secondary {
    background-color: var(--gray-100);
    color: var(--gray-700);
}

.sparkles-control-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.sparkles-control-button .icon,
.sparkles-rule-manager .add-rule-btn .icon {
    margin-right: .5rem;
    width: 1rem;
    height: 1rem;
}

/* =============================================================================
   ERROR HANDLING
   ============================================================================= */

.sparkles-error-container.dark {
    --tw-bg-opacity: 0.2;
}

.sparkles-error-header,
.sparkles-success-header,
.sparkles-product-rating {
    display: flex;
    align-items: center;
    margin-bottom: .75rem;
}

.sparkles-error-icon,
.sparkles-success-icon {
    margin-right: .5rem;
    width: 1.25rem;
    height: 1.25rem;
    --tw-text-opacity: 1;
    color: var(--sparkles-status-icon-color, rgba(239, 68, 68, var(--tw-text-opacity, 1)));
}

.sparkles-error-title {
    --sparkles-emphasis-weight: 500;
    --sparkles-emphasis-color: rgba(127, 29, 29, var(--tw-text-opacity, 1));
}

.sparkles-error-title.dark {
    --tw-text-opacity: 1;
    color: rgba(248, 113, 113, var(--tw-text-opacity, 1));
}

.sparkles-error-item {
    font-size: .875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgba(185, 28, 28, var(--tw-text-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
    padding: .5rem;
    border-radius: var(--radius-sm);
    border-left-width: 4px;
    --tw-border-opacity: 1;
    border-color: rgba(248, 113, 113, var(--tw-border-opacity, 1));
}

.sparkles-error-item.dark {
    --tw-bg-opacity: 0.3;
}

.sparkles-error-actions {
    margin-top: .75rem;
}

/* =============================================================================
   SUCCESS STATE
   ============================================================================= */

.sparkles-success-container.dark {
    --tw-bg-opacity: 0.2;
}


.sparkles-success-icon {
    --sparkles-status-icon-color: rgba(16, 185, 129, var(--tw-text-opacity, 1));
}

.sparkles-success-title {
    --sparkles-emphasis-weight: 500;
    --sparkles-emphasis-color: rgba(6, 78, 59, var(--tw-text-opacity, 1));
}

.sparkles-success-title.dark {
    --tw-text-opacity: 1;
    color: rgba(52, 211, 153, var(--tw-text-opacity, 1));
}

.sparkles-success-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: .75rem;
}

.sparkles-success-stat {
    text-align: center;
    padding: .5rem;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
    border-radius: var(--radius-sm);
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(167, 243, 208, var(--tw-border-opacity, 1));
}

.sparkles-success-stat.dark {
    --tw-bg-opacity: 0.3;
}

.sparkles-success-stat-value {
    display: block;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.75rem;
    --tw-text-opacity: 1;
    color: rgba(4, 120, 87, var(--tw-text-opacity, 1));
}

.sparkles-success-stat-value.dark {
    --tw-text-opacity: 1;
    color: rgba(52, 211, 153, var(--tw-text-opacity, 1));
}

.sparkles-success-stat-label {
    font-size: .75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgba(5, 150, 105, var(--tw-text-opacity, 1));
    text-transform: uppercase;
    letter-spacing: .025em;
}

.sparkles-success-stat-label.dark {
    --tw-text-opacity: 1;
    color: rgba(16, 185, 129, var(--tw-text-opacity, 1));
}

/* =============================================================================
   RESPONSIVE DESIGN
   ============================================================================= */

@container (max-width: 640px) {
    .sparkles-import-container {
        padding: 1rem;
    }

    .sparkles-upload-area {
        padding: 1.5rem;
    }

    .sparkles-progress-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sparkles-import-controls {
        flex-direction: column;
        --tw-space-y-reverse: 0;
        margin-top: calc(.75rem*(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(.75rem*var(--tw-space-y-reverse));
    }

    .sparkles-control-group {
        width: 100%;
        justify-content: center;
    }
}

/* =============================================================================
   ANIMATIONS
   ============================================================================= */

/* REMOVED: .sparkles-fade-in duplicate - use canonical definition in sparkles-utilities.css */

.sparkles-slide-up {
    animation: slideUp 0.4s ease-out;
    transition-property: transform;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0, 0, .2, 1);
}

/* Note: All keyframes consolidated to sparkles-animations.css - using shared animations */

/* =============================================================================
   LOADING STATES
   ============================================================================= */

.sparkles-loading-overlay {
    --tw-bg-opacity: 0.75;
}

.sparkles-loading-overlay.dark {
    --tw-bg-opacity: 1;
    background-color: rgba(31, 41, 55, var(--tw-bg-opacity, 1));
    --tw-bg-opacity: 0.75;
}

.sparkles-loading-spinner-small {
    animation: spin 1s linear infinite;
    --tw-text-opacity: 1;
    color: rgba(217, 119, 6, var(--tw-text-opacity, 1));
    width: 2rem;
    height: 2rem;
}

.sparkles-loading-text {
    margin-left: .75rem;
    color: var(--gray-600);
    font-weight: 500;
}

.sparkles-loading-text.dark {
    color: var(--gray-300);
}