/**
 * Smart Cycle Discounts - Main Admin Styles (Optimized)
 * WordPress 6.4+ Design System Implementation
 * 
 * Design Principles:
 * - YAGNI: Only essential styles, no decorative elements
 * - KISS: Simple, maintainable CSS using WordPress standards
 * - DRY: Reusable utility classes and CSS custom properties
 */

/* ==========================================================================
   Imports - Centralized Design System
   ========================================================================== */

/* Shared styles are now loaded as separate files via WordPress enqueue system
   This ensures proper loading order and avoids @import path resolution issues */

/* ==========================================================================
   Base Styles
   ========================================================================== */

/* SVG icon base styles in shared/_utilities.css */


/* ==========================================================================
   Additional Component Styles
   ========================================================================== */

/* Card styles defined in _components.css */

/* Extra form styles - Dropdown arrow uses CSS mask for theme color support */
.wsscd-select {
    -webkit-mask-image: none;
    mask-image: none;
    background-repeat: no-repeat;
    background-position: right 5px top 50%;
    background-size: 16px 16px;
}

.wsscd-select::after {
    content: '';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6l5 5 5-5 2 1-7 7-7-7 2-1z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6l5 5 5-5 2 1-7 7-7-7 2-1z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: var(--wsscd-color-text-muted);
    pointer-events: none;
}

.wsscd-field-help {
    font-style: italic;
}


/* Toggle Switch styles moved to shared/_forms.css to avoid duplication */

/* ==========================================================================
   Table Extensions
   ========================================================================== */


/* ==========================================================================
   Notices & Notifications
   ==========================================================================
   - WP admin `.notice` base layout: shared/_components.css
   - Toast notification system (`.wsscd-notification`): admin/notifications.css
   ========================================================================== */


/* Form Field Validation States - Flat Design (border-only) */
.wsscd-wizard-step input,
.wsscd-wizard-step textarea,
.wsscd-wizard-step select {
    transition: border-color var(--wsscd-transition-fast) ease-in-out;
}

/* Error states handled by validation.css */

.wsscd-wizard-step input.warning,
.wsscd-wizard-step textarea.warning {
    border-color: var(--wsscd-color-warning);
}

.wsscd-wizard-step input.warning:focus,
.wsscd-wizard-step textarea.warning:focus {
    border-color: var(--wsscd-color-warning);
    outline: none;
}

.wsscd-wizard-step input.success,
.wsscd-wizard-step textarea.success {
    border-color: var(--wsscd-color-success);
}

.wsscd-wizard-step input.success:focus,
.wsscd-wizard-step textarea.success:focus {
    border-color: var(--wsscd-color-success);
    outline: none;
}

/* Validation Messages */
.error-message,
.warning-message {
    display: block;
    font-size: var(--wsscd-font-size-base);
    margin-top: var(--wsscd-spacing-xs);
    line-height: var(--wsscd-line-height-base);
    font-weight: var(--wsscd-font-weight-normal);
}

.error-message {
    color: var(--wsscd-color-danger);
}

.warning-message {
    color: var(--wsscd-color-warning-dark); /* Using darker variant for better readability */
}

/* Validation message animation */
.error-message,
.warning-message {
	animation: wsscd-fade-in var(--wsscd-transition-base) ease-out;
}

/* Note: @keyframes wsscd-fade-in defined in shared/_utilities.css */

/* ==========================================================================
   Wizard Styles
   ========================================================================== */

/* Wizard styles moved to wizard-specific CSS files */

/* ==========================================================================
   Discount Configuration
   ========================================================================== */

.wsscd-discount-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--wsscd-spacing-base);
    margin: var(--wsscd-spacing-lg) 0;
}

.wsscd-discount-type-card {
    position: relative;
    border: var(--wsscd-border-width-thick) solid var(--wsscd-color-border-light);
    border-radius: var(--wsscd-radius-lg);
    padding: var(--wsscd-spacing-lg);
    text-align: center;
    cursor: pointer;
    transition: all var(--wsscd-transition-fast);
}

.wsscd-discount-type-card:hover {
    border-color: var(--wsscd-color-primary);
    box-shadow: var(--wsscd-shadow-md);
}

.wsscd-discount-type-card.selected {
    border-color: var(--wsscd-color-primary);
    background: var(--wsscd-color-primary-bg);
}


/* ==========================================================================
   Product Selection
   ========================================================================== */

.wsscd-product-search {
    position: relative;
    margin-bottom: var(--wsscd-spacing-lg);
}

.wsscd-product-search-input {
    padding-left: var(--wsscd-spacing-xxxl);
}

.wsscd-product-search-icon {
    position: absolute;
    left: var(--wsscd-spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--wsscd-color-text-muted);
}

.wsscd-product-list {
    max-height: 400px;
    overflow-y: auto;
    border: var(--wsscd-border-width) solid var(--wsscd-color-border);
    border-radius: var(--wsscd-radius-md);
}

.wsscd-product-item {
    display: flex;
    align-items: center;
    padding: var(--wsscd-spacing-md);
    border-bottom: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
    cursor: pointer;
    transition: background var(--wsscd-transition-fast);
}

.wsscd-product-item:hover {
    background: var(--wsscd-color-surface);
}

.wsscd-product-item.selected {
    background: var(--wsscd-color-primary-bg);
}

.wsscd-product-checkbox {
    margin-right: var(--wsscd-spacing-md);
}

.wsscd-product-info {
    flex: 1;
}

.wsscd-product-name {
    font-weight: var(--wsscd-font-weight-medium);
    margin-bottom: var(--wsscd-spacing-xs);
}

.wsscd-product-meta {
    font-size: var(--wsscd-font-size-small);
    color: var(--wsscd-color-text-muted);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media screen and (max-width: 782px) {
    .wsscd-wizard-content {
        padding: var(--wsscd-spacing-lg);
    }
    
    .wsscd-discount-type-grid {
        grid-template-columns: 1fr;
    }
    
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .wsscd-button,
    .wsscd-notification {
        display: none !important;
    }
    
    .wsscd-wizard-step {
        display: block !important;
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.wsscd-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--wsscd-color-background-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--wsscd-z-modal);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */


/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .wsscd-card,
    .wsscd-button {
        border-width: var(--wsscd-border-width-thick);
    }
}

/* RTL Support */
[dir="rtl"] .wsscd-product-checkbox {
    margin-right: 0;
    margin-left: var(--wsscd-spacing-md);
}

[dir="rtl"] .wsscd-notification {
    right: auto;
    left: 20px;
}

[dir="rtl"] .wsscd-product-search-icon {
    left: auto;
    right: var(--wsscd-spacing-md);
}

[dir="rtl"] .wsscd-product-search-input {
    padding-left: var(--wsscd-spacing-md);
    padding-right: var(--wsscd-spacing-xxxl);
}