/**
 * WPIS Icons CSS
 *
 * Unified SVG icon system for WP Invoice System.
 * All icons use currentColor for easy theming.
 *
 * @package WP_Invoice_System
 * @since 1.0.0
 */

/* ============================================
   BASE ICON STYLES
   ============================================ */
.wpis-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ============================================
   ICON SIZES
   ============================================ */
.wpis-icon--xs {
    width: 0.75em;
    height: 0.75em;
}

.wpis-icon--sm {
    width: 1em;
    height: 1em;
}

.wpis-icon--md {
    width: 1.25em;
    height: 1.25em;
}

.wpis-icon--lg {
    width: 1.5em;
    height: 1.5em;
}

.wpis-icon--xl {
    width: 2em;
    height: 2em;
}

.wpis-icon--2xl {
    width: 3em;
    height: 3em;
}

/* ============================================
   ICON COLORS (STATUS)
   ============================================ */
.wpis-icon--locked {
    color: var(--wpis-color-muted, #6b7280);
}

.wpis-icon--upgrade,
.wpis-icon--crown {
    color: var(--wpis-primary-color, #1256c4);
}

.wpis-icon--success {
    color: var(--wpis-color-success, #10b981);
}

.wpis-icon--error {
    color: var(--wpis-color-error, #ef4444);
}

.wpis-icon--warning {
    color: var(--wpis-color-warning, #f59e0b);
}

.wpis-icon--info {
    color: var(--wpis-color-info, #3b82f6);
}

.wpis-icon--confirm {
    color: var(--wpis-primary-color, #1256c4);
}

/* ============================================
   BADGES WITH ICONS
   ============================================ */
.wpis-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.25em 0.6em;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 0.375em;
    white-space: nowrap;
}

.wpis-badge__text {
    display: inline-block;
}

/* Locked badge */
.wpis-badge--locked {
    background-color: var(--wpis-badge-locked-bg, #f3f4f6);
    color: var(--wpis-badge-locked-color, #6b7280);
    border: 1px solid var(--wpis-badge-locked-border, #e5e7eb);
}

.wpis-badge--locked .wpis-icon {
    color: inherit;
}

/* Premium badge */
.wpis-badge--premium {
    background-color: var(--wpis-badge-premium-bg, #eef2ff);
    color: var(--wpis-badge-premium-color, #4f46e5);
    border: 1px solid var(--wpis-badge-premium-border, #c7d2fe);
}

.wpis-badge--premium .wpis-icon {
    color: #f59e0b;
}

/* Free badge (for customer list) */
.wpis-badge--free {
    background-color: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

/* ============================================
   STATUS MODAL ICONS
   ============================================ */
.wpis-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
}

.wpis-status-icon .wpis-icon {
    width: 2rem;
    height: 2rem;
}

.wpis-status-icon--success {
    background-color: #ecfdf5;
    color: #10b981;
}

.wpis-status-icon--error {
    background-color: #fef2f2;
    color: #ef4444;
}

.wpis-status-icon--warning {
    background-color: #fffbeb;
    color: #f59e0b;
}

.wpis-status-icon--info {
    background-color: #eff6ff;
    color: #3b82f6;
}

.wpis-status-icon--confirm {
    background-color: #eef2ff;
    color: var(--wpis-primary-color, #1256c4);
}

/* ============================================
   LOCKED INDICATOR (for inputs/fields)
   ============================================ */
.wpis-locked-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    color: var(--wpis-color-muted, #6b7280);
    font-size: 0.875rem;
}

.wpis-locked-indicator .wpis-icon {
    width: 0.875em;
    height: 0.875em;
}

/* ============================================
   PREMIUM FEATURE LOCK OVERLAY
   ============================================ */
.wpis-premium-lock {
    position: relative;
}

.wpis-premium-lock::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
}

.wpis-premium-lock__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: var(--wpis-color-muted, #6b7280);
}

/* ============================================
   INLINE LOCK SUFFIX (for payment status, etc.)
   ============================================ */
.wpis-lock-suffix {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25em;
    color: var(--wpis-color-muted, #6b7280);
}

.wpis-lock-suffix .wpis-icon {
    width: 0.875em;
    height: 0.875em;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.wpis-icon-inline {
    display: inline;
    vertical-align: -0.125em;
}

.wpis-icon-block {
    display: block;
    margin: 0 auto;
}

/* ============================================
   CUSTOMER AUTOCOMPLETE - LOCKED ITEMS
   ============================================ */
.customer-suggestion--locked {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    opacity: 0.6;
    cursor: not-allowed !important;
    background-color: #f9fafb !important;
    color: #9ca3af !important;
}

.customer-suggestion--locked:hover {
    background-color: #f3f4f6 !important;
    color: #9ca3af !important;
}

.customer-suggestion__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-suggestion__lock {
    display: flex;
    align-items: center;
    margin-left: 0.5rem;
    color: var(--wpis-color-muted, #6b7280);
}

.customer-suggestion__lock .wpis-icon {
    width: 0.875rem;
    height: 0.875rem;
}

/* ============================================
   CSS VARIABLES FOR COLORS
   ============================================ */
:root {
    --wpis-color-muted: #6b7280;
    --wpis-color-success: #10b981;
    --wpis-color-error: #ef4444;
    --wpis-color-warning: #f59e0b;
    --wpis-color-info: #3b82f6;
    
    --wpis-badge-locked-bg: #f3f4f6;
    --wpis-badge-locked-color: #6b7280;
    --wpis-badge-locked-border: #e5e7eb;
    
    --wpis-badge-premium-bg: #eef2ff;
    --wpis-badge-premium-color: #4f46e5;
    --wpis-badge-premium-border: #c7d2fe;
}