/* ========================================
   AMÉLIORATIONS UX - TABLEAU DE MARGE
   Sans responsive design (version desktop)
   ======================================== */

/* ---- 1. STYLE GÉNÉRAL DU TABLEAU ---- */

#excelLike {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    background: #f8f9fa;
    border-radius: 0.375rem;
}

#excelLike table {
    background: white;
    margin-bottom: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ---- 2. GROUPEMENT PAR SECTION ---- */

/* Section 1 : IDENTIFIANT (toujours visible) */
.col-section-identity {
    background: linear-gradient(135deg, #f0f4f8 0%, #e8ecf1 100%);
    border-left: 4px solid #3498db;
    font-weight: 500;
}

.col-section-identity th {
    background: #3498db;
    color: white;
    font-weight: 600;
}

.col-section-identity td {
    background: #f8fafc;
}

/* Section 2 : SPÉCIFICATIONS */
.col-section-specs {
    background: linear-gradient(135deg, #f5f0ff 0%, #ede5ff 100%);
    border-left: 4px solid #9b59b6;
}

.col-section-specs th {
    background: #9b59b6;
    color: white;
    font-weight: 600;
}

.col-section-specs td {
    background: #faf8fc;
}

/* Section 3 : COÛTS D'ACHAT */
.col-section-costs {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    border-left: 4px solid #e74c3c;
}

.col-section-costs th {
    background: #e74c3c;
    color: white;
    font-weight: 600;
}

.col-section-costs td {
    background: #fef9f9;
}

/* Section 4 : PRIX DE VENTE */
.col-section-revenue {
    background: linear-gradient(135deg, #f0fff4 0%, #e8fff0 100%);
    border-left: 4px solid #2ecc71;
}

.col-section-revenue th {
    background: #2ecc71;
    color: white;
    font-weight: 600;
}

.col-section-revenue td {
    background: #f9fefb;
}

/* Section 5 : MARGES */
.col-section-margins {
    background: linear-gradient(135deg, #fffbf0 0%, #fff8e8 100%);
    border-left: 4px solid #f39c12;
    font-weight: 500;
}

.col-section-margins th {
    background: #f39c12;
    color: white;
    font-weight: 600;
}

.col-section-margins td {
    background: #fffdf9;
}

/* Section 6 : LOGISTIQUE */
.col-section-logistics {
    background: linear-gradient(135deg, #f0f5ff 0%, #e8eeff 100%);
    border-left: 4px solid #3498db;
}

.col-section-logistics th {
    background: #3498db;
    color: white;
    font-weight: 600;
}

.col-section-logistics td {
    background: #f9fafc;
}

/* ---- 3. TYPES D'INPUTS ---- */

/* Champs calculés (grisés, non-éditables) */
input.field-calculated {
    background: #ecf0f1 !important;
    color: #7f8c8d;
    cursor: not-allowed;
    opacity: 0.8;
    border-color: #bdc3c7 !important;
}

input.field-calculated:focus {
    background: #ecf0f1 !important;
    border-color: #bdc3c7 !important;
    box-shadow: none;
}

/* Champs éditables */
input.field-editable {
    background: white;
    border: 1px solid #ced4da;
    /* Perf : transition entièrement retirée. Avec un grand nombre de cellules,
       chaque animation focus/blur de 150 ms déclenchait un repaint qui s'ajoutait
       au délai mesuré par l'INP. Le rendu reste agréable car le changement de
       couleur du focus est instantané (typique des tableurs Excel-like). */
}

input.field-editable:focus {
    background: #fffacd;
    border-color: #ffd700;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

/* Champs en erreur */
input.field-error {
    background: #fadbd8 !important;
    border: 1px solid #e74c3c !important;
    color: #c0392b;
}

/* Champs modifiés (non validés) */
input.field-modified {
    background: #fef5e7 !important;
    border-color: #f39c12;
}

/* Champs validés */
input.field-success {
    background: #d5f4e6 !important;
    border-color: #27ae60;
}

/* ---- 4. EN-TÊTES DE TABLEAU ---- */

thead th {
    padding: 0.75rem 0.5rem;
    font-size: 0.85rem;
    text-align: center;
    vertical-align: middle;
    word-wrap: break-word;
    max-width: 150px;
    line-height: 1.2;
    white-space: normal;
}

thead th i.fa-filter {
    margin-left: 0.25rem;
    opacity: 0.6;
    cursor: pointer;
}

thead th i.fa-filter:hover {
    opacity: 1;
}

/* En-tête "Bloc" section */
thead th[data-section-header="true"] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem;
    border-bottom: 3px solid;
}

/* ---- 5. LIGNES DU TABLEAU ---- */

tbody tr {
    /* Perf : transition retirée. Avec des centaines de cellules par ligne, animer
       toutes les propriétés sur chaque hover produisait un repaint global du tableau. */
    border-bottom: 1px solid #dee2e6;
}

tbody tr:hover {
    background: #f8f9fa;
}

/* Note : `contain: layout style` et `content-visibility: auto` retirés.
   Sur un `<table>` avec `table-layout: fixed`, ces propriétés peuvent
   provoquer plus de travail que d'en économiser, car le navigateur doit
   quand même calculer les largeurs de colonnes ; combiner ça avec le
   resize-handle absolument positionné dans chaque cellule a donné un
   INP encore plus mauvais qu'avant lors du test utilisateur. */

tbody tr.disabled {
    opacity: 0.6;
    background: #e8e8e8;
}

tbody tr.warning {
    background: #fff3cd !important;
}

tbody tr.error {
    background: #f8d7da !important;
}

tbody tr.success {
    background: #d4edda !important;
}

tbody tr td {
    padding: 0.5rem;
    font-size: 0.9rem;
    vertical-align: middle;
}

tbody tr td input {
    width: 100%;
    border-radius: 0.25rem;
    font-size: 0.85rem;
    padding: 0.375rem 0.5rem;
}

/* Cellule de checkbox */
tbody tr td:first-child {
    width: 40px;
    text-align: center;
    padding: 0.5rem;
}

/* ---- 6. INDICATEURS VISUELS ---- */

/* Badge pour champs critiques */
.field-critical {
    font-weight: bold !important;
}

.field-critical::after {
    content: '*';
    color: #e74c3c;
    font-weight: bold;
    margin-left: 0.25rem;
}

/* Indicateur d'édition */
.editing-indicator {
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: #f39c12;
}

/* Indicateur de sauvegarde */
.saved-indicator {
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: #27ae60;
}

/* ---- 7. FILTRES STICKY EN HAUT ---- */

.filters-sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    background: white;
    padding: 0.75rem;
    border-bottom: 2px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-input {
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
    font-size: 0.85rem;
}

.filter-input:focus {
    border-color: #3498db;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}

/* ---- 8. FEEDBACK DE SAUVEGARDE ---- */

.save-feedback {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-weight: 500;
    animation: slideIn 0.3s ease;
    z-index: 999;
}

.save-feedback.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.save-feedback.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ---- 9. COMPATIBILITÉ D'IMPRESSION ---- */

@media print {
    .action-menu,
    .filters-sticky,
    .btn-group {
        display: none;
    }

    #excelLike {
        overflow: visible;
        box-shadow: none;
    }

    tbody tr td input {
        border: none;
        background: transparent;
    }
}