/**
 * Batch Mix Design Wizard Styles
 *
 * @author Amit Haridas, ConcreteInfo
 */

/* Wizard Overlay */
.wizard-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: var(--spacing-4, 1rem);
    animation: fadeIn 200ms ease;
}

/* Wizard Modal */
.wizard-modal {
    background-color: var(--bg-elevated, #ffffff);
    border-radius: var(--radius-xl, 0.75rem);
    box-shadow: var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wizard-modal--lg {
    max-width: 800px;
}

.dark .wizard-modal {
    background-color: var(--bg-secondary, #1f2937);
}

/* Wizard Header */
.wizard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--spacing-4, 1rem) var(--spacing-5, 1.25rem);
    border-bottom: 1px solid var(--border-subtle, #e5e7eb);
    flex-shrink: 0;
}

.dark .wizard-header {
    border-color: var(--color-gray-700, #374151);
}

.wizard-header__title {
    font-size: var(--font-size-lg, 1rem);
    font-weight: var(--font-weight-bold, 700);
    font-family: var(--font-family-heading);
    color: var(--text-primary, #1f2937);
    margin: 0 0 var(--spacing-1, 0.25rem);
}

.dark .wizard-header__title {
    color: var(--text-primary, #f9fafb);
}

.wizard-header__subtitle {
    font-size: var(--font-size-sm, 0.75rem);
    color: var(--text-secondary, #6b7280);
    margin: 0;
}

.dark .wizard-header__subtitle {
    color: var(--text-secondary, #9ca3af);
}

/* Progress Indicator */
.wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3, 0.75rem) var(--spacing-5, 1.25rem);
    background-color: var(--bg-tertiary, #f3f4f6);
    border-bottom: 1px solid var(--border-subtle, #e5e7eb);
    overflow-x: auto;
    flex-shrink: 0;
}

.dark .wizard-progress {
    background-color: var(--color-gray-800, #1f2937);
    border-color: var(--color-gray-700, #374151);
}

.wizard-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-1-5, 0.375rem);
    padding: 0 var(--spacing-2-5, 0.625rem);
    min-width: 70px;
}

.wizard-progress__indicator {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full, 9999px);
    background-color: var(--bg-elevated, #ffffff);
    border: 2px solid var(--border-default, #d1d5db);
    color: var(--text-tertiary, #9ca3af);
    font-size: var(--font-size-sm, 0.75rem);
    transition: all var(--transition-fast, 150ms);
}

.dark .wizard-progress__indicator {
    background-color: var(--color-gray-700, #374151);
    border-color: var(--color-gray-600, #4b5563);
}

.wizard-progress__step--active .wizard-progress__indicator {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
    color: white;
}

.wizard-progress__step--completed .wizard-progress__indicator {
    background-color: var(--color-green-500, #22c55e);
    border-color: var(--color-green-500, #22c55e);
    color: white;
}

.wizard-progress__label {
    font-size: var(--font-size-xs, 0.6875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-tertiary, #9ca3af);
    text-align: center;
    white-space: nowrap;
}

.wizard-progress__step--active .wizard-progress__label {
    color: var(--color-brand);
    font-weight: var(--font-weight-semibold, 600);
}

.wizard-progress__step--completed .wizard-progress__label {
    color: var(--color-green-500, #22c55e);
}

.wizard-progress__connector {
    width: 32px;
    height: 2px;
    background-color: var(--border-default, #d1d5db);
    flex-shrink: 0;
}

.dark .wizard-progress__connector {
    background-color: var(--color-gray-600, #4b5563);
}

/* Wizard Content */
.wizard-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-5, 1.25rem);
}

.wizard-intro {
    font-size: var(--font-size-sm, 0.75rem);
    color: var(--text-secondary, #6b7280);
    margin: 0 0 var(--spacing-4, 1rem);
}

.dark .wizard-intro {
    color: var(--text-secondary, #9ca3af);
}

/* Wizard Form */
.wizard-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4, 1rem);
}

.wizard-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 0.5rem);
}

.wizard-form-group--inline {
    flex: 1;
}

.wizard-form-label {
    font-size: var(--font-size-sm, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #1f2937);
}

.dark .wizard-form-label {
    color: var(--text-primary, #f9fafb);
}

.wizard-form-label--sm {
    font-size: var(--font-size-xs, 0.6875rem);
}

.wizard-form-row {
    display: flex;
    gap: var(--spacing-4, 1rem);
}

.wizard-form-section {
    padding-top: var(--spacing-4, 1rem);
    border-top: 1px solid var(--border-subtle, #e5e7eb);
    margin-top: var(--spacing-2, 0.5rem);
}

.dark .wizard-form-section {
    border-color: var(--color-gray-700, #374151);
}

.wizard-form-section h4 {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-secondary, #6b7280);
    margin: 0 0 var(--spacing-3, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dark .wizard-form-section h4 {
    color: var(--text-secondary, #9ca3af);
}

.wizard-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3, 0.75rem);
}

.wizard-checkbox-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-primary, #1f2937);
    cursor: pointer;
}

.dark .wizard-checkbox-item {
    color: var(--text-primary, #f9fafb);
}

.wizard-checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-brand);
}

/* Requirements List */
.wizard-requirements-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3, 0.75rem);
    margin-bottom: var(--spacing-4, 1rem);
}

.wizard-requirement-item {
    background-color: var(--bg-tertiary, #f3f4f6);
    border-radius: var(--radius-lg, 0.5rem);
    border: 1px solid var(--border-subtle, #e5e7eb);
    overflow: hidden;
}

.dark .wizard-requirement-item {
    background-color: var(--color-gray-800, #1f2937);
    border-color: var(--color-gray-700, #374151);
}

.wizard-requirement-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
    background-color: var(--bg-secondary, #f9fafb);
    border-bottom: 1px solid var(--border-subtle, #e5e7eb);
}

.dark .wizard-requirement-item__header {
    background-color: var(--color-gray-700, #374151);
    border-color: var(--color-gray-600, #4b5563);
}

.wizard-requirement-item__title {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, #1f2937);
}

.dark .wizard-requirement-item__title {
    color: var(--text-primary, #f9fafb);
}

.wizard-requirement-item__body {
    padding: var(--spacing-3, 0.75rem);
}

/* Review Summary */
.wizard-review-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4, 1rem);
}

@media (max-width: 575.98px) {
    .wizard-review-summary {
        grid-template-columns: 1fr;
    }
}

.wizard-review-card {
    background-color: var(--bg-tertiary, #f3f4f6);
    border-radius: var(--radius-lg, 0.5rem);
    border: 1px solid var(--border-subtle, #e5e7eb);
    padding: var(--spacing-4, 1rem);
}

.dark .wizard-review-card {
    background-color: var(--color-gray-800, #1f2937);
    border-color: var(--color-gray-700, #374151);
}

.wizard-review-card h4 {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-brand);
    margin: 0 0 var(--spacing-3, 0.75rem);
}

.wizard-review-list {
    margin: 0;
    padding: 0;
}

.wizard-review-list dt {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-tertiary, #9ca3af);
    margin-top: var(--spacing-2, 0.5rem);
}

.wizard-review-list dd {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-primary, #1f2937);
    margin: 0;
}

.dark .wizard-review-list dd {
    color: var(--text-primary, #f9fafb);
}

/* Loading State */
.wizard-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12, 3rem);
    text-align: center;
}

.wizard-loading__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-subtle, #e5e7eb);
    border-top-color: var(--color-brand);
    border-radius: var(--radius-full, 9999px);
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-4, 1rem);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.wizard-loading p {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #6b7280);
    margin: 0;
}

/* Success State */
.wizard-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-6, 1.5rem);
}

.wizard-success__icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full, 9999px);
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--color-green-500, #22c55e);
    font-size: var(--font-size-3xl, 2rem);
    margin-bottom: var(--spacing-4, 1rem);
}

.wizard-success h3 {
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-primary, #1f2937);
    margin: 0 0 var(--spacing-2, 0.5rem);
}

.dark .wizard-success h3 {
    color: var(--text-primary, #f9fafb);
}

.wizard-success p {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #6b7280);
    margin: 0 0 var(--spacing-5, 1.25rem);
}

.wizard-success__list {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 0.5rem);
    margin-bottom: var(--spacing-5, 1.25rem);
}

.wizard-success__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
    background-color: var(--bg-tertiary, #f3f4f6);
    border-radius: var(--radius-md, 0.375rem);
}

.dark .wizard-success__item {
    background-color: var(--color-gray-800, #1f2937);
}

.wizard-success__grade {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-brand);
}

.wizard-success__details {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-tertiary, #9ca3af);
}

.wizard-success__actions {
    display: flex;
    gap: var(--spacing-3, 0.75rem);
}

/* Wizard Footer */
.wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3, 0.75rem) var(--spacing-5, 1.25rem);
    border-top: 1px solid var(--border-subtle, #e5e7eb);
    background-color: var(--bg-elevated, #ffffff);
    flex-shrink: 0;
}

.dark .wizard-footer {
    border-color: var(--color-gray-700, #374151);
    background-color: var(--bg-secondary, #1f2937);
}

.wizard-footer__spacer {
    flex: 1;
}

/* Button variants */
.btn--full-width {
    width: 100%;
}

.btn--success {
    background-color: var(--color-green-500, #22c55e);
    border-color: var(--color-green-500, #22c55e);
}

.btn--success:hover {
    background-color: var(--color-green-600, #16a34a);
    border-color: var(--color-green-600, #16a34a);
}

/* Form control sizing */
.form-control--sm {
    padding: var(--spacing-1-5, 0.375rem) var(--spacing-2, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem);
}

/* Utility classes */
.mr-2 {
    margin-right: var(--spacing-2, 0.5rem);
}

.ml-2 {
    margin-left: var(--spacing-2, 0.5rem);
}