/* ============================================
   TABLEAU DE PRODUCTION - RECONSTRUCTION COMPLÈTE
   ============================================ */

/* Désactiver TOUS les autres styles du tableau */
#productionTable,
#productionTable *,
#productionTable::before,
#productionTable::after,
#productionTable *::before,
#productionTable *::after {
    all: unset !important;
    display: revert !important;
    box-sizing: border-box !important;
}

/* Réinitialisation totale du tableau de production */
#productionTable {
    width: 100% !important;
    min-width: 1400px !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #D1D5DB !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

#productionTable thead {
    display: table-header-group !important;
    background-color: #F3F4F6 !important;
}

#productionTable thead tr {
    display: table-row !important;
}

#productionTable thead th {
    display: table-cell !important;
    padding: 12px 10px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    background-color: #F3F4F6 !important;
    border: 1px solid #D1D5DB !important;
    color: #374151 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
}

#productionTable tbody {
    display: table-row-group !important;
}

#productionTable tbody tr {
    display: table-row !important;
}

#productionTable tbody td {
    display: table-cell !important;
    padding: 10px 10px !important;
    border: 1px solid #D1D5DB !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    color: #1F2937 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#productionTable tbody tr:hover {
    background-color: #F9FAFB !important;
}

/* Largeurs minimales pour chaque colonne */
#productionTable th:nth-child(1),
#productionTable td:nth-child(1) {
    min-width: 180px !important;
    width: auto !important;
}

#productionTable th:nth-child(2),
#productionTable td:nth-child(2) {
    min-width: 90px !important;
    width: auto !important;
    text-align: center !important;
}

#productionTable th:nth-child(3),
#productionTable td:nth-child(3) {
    min-width: 110px !important;
    width: auto !important;
    text-align: center !important;
}

#productionTable th:nth-child(4),
#productionTable td:nth-child(4) {
    min-width: 80px !important;
    width: auto !important;
    text-align: center !important;
}

#productionTable th:nth-child(5),
#productionTable td:nth-child(5) {
    min-width: 140px !important;
    width: auto !important;
}

#productionTable th:nth-child(6),
#productionTable td:nth-child(6) {
    min-width: 140px !important;
    width: auto !important;
}

#productionTable th:nth-child(7),
#productionTable td:nth-child(7) {
    min-width: 130px !important;
    width: auto !important;
    text-align: center !important;
}

#productionTable th:nth-child(8),
#productionTable td:nth-child(8) {
    min-width: 140px !important;
    width: auto !important;
    text-align: center !important;
}

#productionTable th:nth-child(9),
#productionTable td:nth-child(9) {
    min-width: 80px !important;
    width: auto !important;
    text-align: center !important;
}

#productionTable th:nth-child(10),
#productionTable td:nth-child(10) {
    min-width: 70px !important;
    width: auto !important;
    text-align: center !important;
}

#productionTable th:nth-child(11),
#productionTable td:nth-child(11) {
    min-width: 80px !important;
    width: auto !important;
    text-align: center !important;
}

#productionTable th:nth-child(12),
#productionTable td:nth-child(12) {
    min-width: 120px !important;
    width: auto !important;
}

#productionTable th:nth-child(13),
#productionTable td:nth-child(13) {
    min-width: 120px !important;
    width: auto !important;
}

#productionTable th:nth-child(14),
#productionTable td:nth-child(14) {
    min-width: 120px !important;
    width: auto !important;
}

#productionTable th:nth-child(15),
#productionTable td:nth-child(15) {
    min-width: 110px !important;
    width: auto !important;
    text-align: center !important;
}

/* Container avec scroll horizontal si nécessaire */
.data-grid-container,
.production-table-container {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Boutons d'action - Design moderne amélioré */
#productionTable .btn-action {
    padding: 8px 12px !important;
    margin: 0 4px !important;
    font-size: 14px !important;
    border: none !important;
    background: linear-gradient(135deg, #0078D4 0%, #005A9E 100%) !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0, 120, 212, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    position: relative !important;
    overflow: hidden !important;
}

#productionTable .btn-action::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.4s, height 0.4s !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

#productionTable .btn-action:hover::before {
    width: 200px !important;
    height: 200px !important;
}

#productionTable .btn-action:hover {
    background: linear-gradient(135deg, #40A6FF 0%, #0078D4 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.4) !important;
}

#productionTable .btn-action:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 120, 212, 0.3) !important;
}

#productionTable .btn-action i {
    position: relative !important;
    z-index: 10 !important;
    transition: transform 0.3s ease !important;
    pointer-events: none !important;
}

#productionTable .btn-action:hover i {
    transform: scale(1.1) !important;
}

/* Bouton de suppression - Design rouge moderne */
#productionTable .btn-action.delete {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2) !important;
}

#productionTable .btn-action.delete::before {
    background: rgba(255, 255, 255, 0.25) !important;
}

#productionTable .btn-action.delete:hover {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
}

/* Animation de pulse pour attirer l'attention */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

#productionTable .btn-action:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.3) !important;
    animation: pulse 2s infinite !important;
}

#productionTable .btn-action.delete:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3) !important;
}