/*
==================================================
SYSTÈME DE BADGES UNIFIÉ - KOLDKAZE
==================================================
Composant centralisé pour tous les badges du site
Basé sur les spécifications de la V1 finalisée
==================================================
*/

/* CLASSE DE BASE POUR TOUS LES BADGES */
.kz-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    border-radius: 16px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    cursor: default !important;
    transition: all 0.2s ease !important;
    
    /* Reset pour éviter les conflits */
    margin: 0 !important;
    border: none !important;
    text-decoration: none !important;
    background: none !important;
    color: inherit !important;
}

/* BADGES DE STATUT - SYSTÈME UNIFIÉ SELON CHARTE */
.kz-badge.status-production { 
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 70%) !important; 
    color: white !important; 
    border: 1px solid #3b82f6 !important;
}
.kz-badge.status-pending { 
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 70%) !important; 
    color: white !important; 
    border: 1px solid #f59e0b !important;
}
.kz-badge.status-completed { 
    background: linear-gradient(135deg, #34d399 0%, #10b981 70%) !important; 
    color: white !important; 
    border: 1px solid #10b981 !important;
}
.kz-badge.status-cancelled { 
    background: linear-gradient(135deg, #f87171 0%, #ef4444 70%) !important; 
    color: white !important; 
    border: 1px solid #ef4444 !important;
}
.kz-badge.status-processing { 
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 70%) !important; 
    color: white !important; 
    border: 1px solid #6366f1 !important;
}
.kz-badge.status-paused { 
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 70%) !important; 
    color: white !important; 
    border: 1px solid #8b5cf6 !important;
}

/* BADGES TJM */
.kz-badge.tjm {
    border-radius: 15px !important;
    text-transform: capitalize !important;
}

.kz-badge.tjm-active {
    background: #e7f3ff !important;
    color: #3b82f6 !important;
    border: 1px solid #b3d9ff !important;
}

.kz-badge.tjm-pause {
    background: #fff3cd !important;
    color: #856404 !important;
    border: 1px solid #ffeaa7 !important;
}

.kz-badge.tjm-completed {
    background: #d1eddd !important;
    color: #155724 !important;
    border: 1px solid #c3e6cb !important;
}

/* BADGES UTILISATEUR */
.kz-badge.user {
    border-radius: 12px !important;
    gap: 4px !important;
    padding: 4px 8px !important;
}

.kz-badge.user-vendor {
    background: #f3e8ff !important;
    color: #7c3aed !important;
    border: 1px solid #d8b4fe !important;
}

.kz-badge.user-customer {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
}

.kz-badge.user-admin {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}

/* BADGES PRIORITÉ */
.kz-badge.priority {
    border-radius: 8px !important;
    gap: 4px !important;
    padding: 4px 10px !important;
}

.kz-badge.priority-high {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

.kz-badge.priority-medium {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

.kz-badge.priority-low {
    background: #f0fdf4 !important;
    color: #16a34a !important;
}

/* BADGES NOTIFICATION */
.kz-badge.notification {
    min-width: 24px !important;
    padding: 2px 6px !important;
    border-radius: 12px !important;
    background: #ef4444 !important;
    color: white !important;
    justify-content: center !important;
    font-weight: 700 !important;
    gap: 0 !important;
}

/* BADGES CATÉGORIE */
.kz-badge.category {
    border-radius: 6px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 4px 8px !important;
    gap: 0 !important;
}

/* EMOJIS DANS LES BADGES */
.kz-badge .emoji {
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* HOVER EFFECTS */
.kz-badge:hover {
    transform: translateY(-1px) !important;
}

/* COMPATIBILITÉ AVEC L'ANCIEN SYSTÈME - APPLIQUE LES NOUVEAUX STYLES */

.order-status.order-status-en-prod {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 70%) !important;
    color: white !important;
}

.order-status.order-status-pending {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 70%) !important;
    color: white !important;
}

.order-status.order-status-completed {
    background: linear-gradient(135deg, #34d399 0%, #10b981 70%) !important;
    color: white !important;
}

.order-status.order-status-cancelled {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 70%) !important;
    color: white !important;
}

.order-status.order-status-processing {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 70%) !important;
    color: white !important;
}

.order-status.order-status-on-hold {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 70%) !important;
    color: white !important;
}

/* SURCHARGE POUR LES ANCIENS BADGES */
.order-status,
mark.order-status,
span.order-status,
.wcfm-status-badge,
.product-status,
.current-status-badge.customer-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    border-radius: 16px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    cursor: default !important;
    transition: all 0.2s ease !important;
    
    /* Reset des propriétés conflictuelles */
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    
    /* Reset spécifique pour <mark> */
    background-color: transparent !important;
    text-decoration: none !important;
    font-style: normal !important;
    font-variant: normal !important;
    
    /* Couleurs par défaut - style neutre Koldkaze */
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

/* BADGES DE STATUT AVEC ANCIENNES CLASSES */
.order-status-en-prod,
span.order-status-en-prod,
mark.order-status-en-prod {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 70%) !important;
    color: white !important;
}

.order-status-pending,
span.order-status-pending,
mark.order-status-pending {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 70%) !important;
    color: white !important;
}

.order-status-completed,
span.order-status-completed,
mark.order-status-completed {
    background: linear-gradient(135deg, #34d399 0%, #10b981 70%) !important;
    color: white !important;
}

.order-status-cancelled,
span.order-status-cancelled,
mark.order-status-cancelled {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 70%) !important;
    color: white !important;
}

.order-status-processing,
span.order-status-processing,
mark.order-status-processing {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 70%) !important;
    color: white !important;
}

.order-status-on-hold,
span.order-status-on-hold,
mark.order-status-on-hold {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 70%) !important;
    color: white !important;
}

/* Badge pour "Attente paiement" */
.order-status-attente-paiement,
mark.order-status-attente-paiement,
span.order-status-attente-paiement,
.order-status-pending-payment,
mark.order-status-pending-payment,
span.order-status-pending-payment {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 70%) !important;
    color: white !important;
    border: 1px solid #f59e0b !important;
}

/* SPÉCIFICITÉ MAXIMALE POUR WCFM */
body .wcfm-container .order-status,
body .wcfm-content .order-status,
body #wcfm-main-contentainer .order-status,
html body .wcfm-container .order-status,
html body .wcfm-content .order-status,
html body #wcfm-main-contentainer .order-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    border-radius: 16px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    height: 24px !important;
    box-sizing: border-box !important;
}

/* SPÉCIFICITÉ MAXIMALE POUR CUSTOMER INTERFACE */
html body .customer-timeline-container .order-status,
html body .customer-timeline-container mark.order-status,
html body .customer-timeline-container span.order-status,
html body .timeline-context-customer .order-status,
html body .timeline-context-customer mark.order-status,
html body .timeline-context-customer span.order-status,
html body mark.order-status,
html body span.order-status,
/* STRUCTURE WOOCOMMERCE AVEC SPAN INTERNE */
html body mark.order-status span,
html body .order-status span,
html body .customer-timeline-container mark.order-status span,
html body .customer-timeline-container .order-status span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    border-radius: 16px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    cursor: default !important;
    transition: all 0.2s ease !important;
    
    /* Reset spécifique pour <mark> */
    background-color: transparent !important;
    text-decoration: none !important;
    font-style: normal !important;
    font-variant: normal !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    
    /* Couleurs par défaut - style neutre Koldkaze */
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

/* Pour les <mark> avec <span> interne - on style le parent */
html body mark.order-status:has(span),
html body .order-status:has(span) {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    font-style: normal !important;
}

/* RÈGLES WOOCOMMERCE STANDARDS - MAXIMUM PRIORITY */
html body .woocommerce mark.order-status,
html body .woocommerce-MyAccount-content mark.order-status,
html body .woocommerce mark.order-status span,
html body .woocommerce-MyAccount-content mark.order-status span,
html body [class*="woocommerce"] mark.order-status,
html body [class*="woocommerce"] mark.order-status span,
html body mark.order-status[class*="status-"],
html body mark.order-status[class*="status-"] span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    border-radius: 16px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    height: 24px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    cursor: default !important;
    transition: all 0.2s ease !important;
    
    /* Reset spécifique pour <mark> */
    background-color: transparent !important;
    text-decoration: none !important;
    font-style: normal !important;
    font-variant: normal !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    
    /* Couleurs par défaut - style neutre Koldkaze */
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

/* EMOJIS DANS WCFM */
.order-status .emoji,
mark.order-status .emoji,
span.order-status .emoji,
body .wcfm-container .order-status .emoji,
body .wcfm-content .order-status .emoji {
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    user-select: none !important;
}