/**
 * ✅ Styles personnalisés pour le module Cueillette
 * À ajouter dans resources/css/custom-cueillette.css
 * Et inclure dans app.blade.php ou filament config
 */

/* ============================================== */
/* ✅ FIX ICÔNE STATS WIDGET - MONTER L'ICÔNE    */
/* ============================================== */

/* Remonter l'icône de description dans les widgets stats */
/* Le JavaScript applique le style inline uniquement aux widgets avec taxes */
/* Ce CSS est un fallback, le JS fait le travail principal */

/* ✅ Bouton RAMASSAGE - Fond vert quand activé */
[data-ramassage="1"] {
    background-color: #ADFF94 !important;
    font-weight: bold;
}

/* ✅ Date reportée (+1 ou +3 jours) - Fond rouge */
[data-picking-date-plus="1"] {
    background-color: #FF9494 !important;
    font-weight: bold;
}

/* ✅ Statut LIVRAISON - Couleurs */
.livraison-nl {
    background-color: #fecaca; /* Rouge clair */
    color: #991b1b;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.livraison-el {
    background-color: #fef3c7; /* Jaune clair */
    color: #92400e;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.livraison-lv {
    background-color: #bbf7d0; /* Vert clair */
    color: #065f46;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
}

/* ✅ Badge pour photos AVANT/APRÈS */
.photo-badge-before {
    background-color: #3b82f6;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.photo-badge-after {
    background-color: #10b981;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ✅ Mise en évidence des lignes avec ramassage activé */
tr[data-ramassage="1"] td {
    background-color: #f0fdf4 !important;
}

/* ✅ Mise en évidence des lignes avec date reportée */
tr[data-picking-date-plus="1"] td {
    background-color: #fef2f2 !important;
}

/* ✅ Animations pour les boutons d'action */
.action-button-ramassage:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

.action-button-livraison:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* ✅ Style pour les modales de confirmation */
.modal-push-reason {
    min-width: 400px;
}

.modal-push-reason textarea {
    min-height: 100px;
}

/* ✅ FORCER les couleurs pour les SelectColumns Filament */
/* Système: O = Terminé (Oui), E = En cours, N = Non traité */

/* Réception et Completed */
td select option[value="O"] {
    background-color: #bbf7d0 !important;
    color: #065f46 !important;
    font-weight: bold;
}
td select option[value="E"] {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    font-weight: bold;
}
td select option[value="N"] {
    background-color: #fecaca !important;
    color: #991b1b !important;
}

/* Étapes de production (soudure, débosselage, etc.) */
td select[name*="soudure"] option[value="O"],
td select[name*="debosselage"] option[value="O"],
td select[name*="peinture"] option[value="O"],
td select[name*="inspection"] option[value="O"],
td select[name*="polie"] option[value="O"],
td select[name*="millenium"] option[value="O"],
td select[name*="accessories"] option[value="O"],
td select[name*="trou_boulons"] option[value="O"] {
    background-color: #bbf7d0 !important;
    color: #065f46 !important;
    font-weight: bold;
}

td select[name*="soudure"] option[value="E"],
td select[name*="debosselage"] option[value="E"],
td select[name*="peinture"] option[value="E"],
td select[name*="inspection"] option[value="E"],
td select[name*="polie"] option[value="E"],
td select[name*="millenium"] option[value="E"],
td select[name*="accessories"] option[value="E"],
td select[name*="trou_boulons"] option[value="E"] {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    font-weight: bold;
}

td select[name*="soudure"] option[value="N"],
td select[name*="debosselage"] option[value="N"],
td select[name*="peinture"] option[value="N"],
td select[name*="inspection"] option[value="N"],
td select[name*="polie"] option[value="N"],
td select[name*="millenium"] option[value="N"],
td select[name*="accessories"] option[value="N"],
td select[name*="trou_boulons"] option[value="N"] {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
}

/* Statut job (JS = Job Spécial, RUSH, C-1/2/3, NORM) */
td select[name*="status"] option[value="JS"] {
    background-color: #bae6fd !important;
    color: #075985 !important;
}
td select[name*="status"] option[value="RUSH"] {
    background-color: #fecaca !important;
    color: #991b1b !important;
    font-weight: bold;
}
td select[name*="status"] option[value="C-1"],
td select[name*="status"] option[value="C-2"],
td select[name*="status"] option[value="C-3"] {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}
td select[name*="status"] option[value="NORM"] {
    background-color: #bbf7d0 !important;
    color: #065f46 !important;
}

/* Forcer les couleurs même après sélection */
.fi-ta-select select {
    font-weight: 600;
}

/* Améliorer la lisibilité */
.fi-ta-table td {
    vertical-align: middle;
}

/* ✅ Responsive pour mobile */
@media (max-width: 768px) {
    .action-button-ramassage,
    .action-button-livraison {
        font-size: 0.875rem;
        padding: 6px 12px;
    }
}

/* ============================================== */
/* ✅ FIX POUR LE STICKY HEADER FILAMENT 4       */
/* Solution simple basée sur hauteur fixe         */
/* ============================================== */

@media (min-width: 768px) {
    /* Header sticky - reste fixé en haut */
    .fi-ta-table thead {
        position: sticky !important;
        top: 0;
        z-index: 9;
        background-color: white !important;
    }

    /* Dark mode - fond opaque pour le header */
    .dark .fi-ta-table thead,
    .fi-ta-table :is(:where(.dark) .dark\:bg-white\/5) {
        background-color: rgb(36, 36, 39) !important;
    }

    /* Hauteur MAX du container - s'adapte au contenu */
    .fi-ta-content-ctn {
        max-height: calc(100vh - 20rem);
        overflow-y: auto !important;
        overflow-x: auto !important;
        position: relative;
    }

    /* Fix z-index pour les dropdowns (filtres, colonnes, etc.) */
    .fi-dropdown-panel {
        z-index: 40 !important;
    }

    /* Ombre sous le header pour mieux le distinguer */
    .fi-ta-table thead tr {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* S'assurer que les cellules th ont un fond opaque */
    .fi-ta-table thead th {
        background-color: inherit;
    }
}

/* ============================================== */
/* ✅ SCROLLBAR STYLING                           */
/* ============================================== */

/* Styles pour la scrollbar horizontale et verticale */
.fi-ta-content-ctn::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

.fi-ta-content-ctn::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
}

.fi-ta-content-ctn::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 6px;
}

.fi-ta-content-ctn::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Dark mode scrollbar */
.dark .fi-ta-content-ctn::-webkit-scrollbar-track {
    background: #374151;
}

.dark .fi-ta-content-ctn::-webkit-scrollbar-thumb {
    background: #6b7280;
}

.dark .fi-ta-content-ctn::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ============================================== */
/* TOP SCROLLBAR CLONE                           */
/* ============================================== */

.top-scroll-clone {
    height: 12px;
    background: #e5e7eb;
    border-radius: 6px;
    margin: 0 0 4px 0;
    scrollbar-width: large;
    scrollbar-color: #c1c1c1 #f3f4f6;
}

.top-scroll-clone::-webkit-scrollbar {
    height: 12px;
}

.top-scroll-clone::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 6px;
}

.top-scroll-clone::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 6px;
}

.top-scroll-clone::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Dark mode */
.dark .top-scroll-clone {
    background: #374151 !important;
    scrollbar-color: #6b7280 #374151;
}

.dark .top-scroll-clone::-webkit-scrollbar-track {
    background: #374151;
}

.dark .top-scroll-clone::-webkit-scrollbar-thumb {
    background: #6b7280;
}

.dark .top-scroll-clone::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ============================================== */
/* ✅ INPUTS TEXTE DANS TABLEAUX DE PRODUCTION    */
/* ============================================== */

/* Style des inputs texte (No de roue, Punch, Couleur) */
.fi-ta-text-input-column input {
    width: 100% !important;
    min-width: 90px !important;
    padding: 0.375rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background-color: white;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.fi-ta-text-input-column input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Dark mode pour les inputs */
.dark .fi-ta-text-input-column input {
    background-color: #1f2937;
    border-color: #374151;
    color: #f9fafb;
}