@import 'base.css';
@import 'theme.css';
@import 'layout.css';
@import 'components.css';
@import 'responsive.css';
@import 'animation.css';

/* --- STYLES DU HEADER & MENU UTILISATEUR --- */
.auth-section { position: relative; }
.user-menu { position: relative; }

.user-menu-toggle {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;
    background: var(--bg-secondary, #f8f9fa); 
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px; cursor: pointer; 
    font-size: 0.95rem; color: var(--text-primary, #333);
    transition: all 0.2s;
}
.user-menu-toggle:hover { background: #f1f5f9; border-color: #cbd5e1; }

.user-avatar { font-size: 1.2rem; }
.user-name { font-weight: 500; }
.dropdown-arrow { font-size: 0.7rem; transition: transform 0.3s ease; }
.user-menu-toggle.active .dropdown-arrow { transform: rotate(180deg); }

.user-dropdown {
    position: absolute; top: 100%; right: 0; margin-top: 0.5rem; min-width: 200px;
    background: white; border: 1px solid #e2e8f0; border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
    opacity: 0; visibility: hidden;
    transform: translateY(-10px); transition: all 0.2s ease; z-index: 1000;
}
.user-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown-item {
    display: block; padding: 0.75rem 1rem; color: #4b5563; text-decoration: none;
    transition: all 0.2s ease; border: none; background: none; width: 100%; text-align: left; cursor: pointer;
    font-size: 0.95rem;
}
.dropdown-item:hover { background: #f8fafc; color: #1e293b; }
.dropdown-divider { margin: 0.5rem 0; border: none; border-top: 1px solid #e2e8f0; }
.logout-btn { color: #ef4444; }
.logout-btn:hover { background: #fef2f2; color: #dc2626; }

/* Masquer par défaut pour le script */
.auth-only { display: none; }


/* --- MOBILE : CORRECTIF FINAL ALIGNEMENT (VERSION BLINDÉE) --- */
@media (max-width: 768px) {
    
    /* 1. Reset total du tableau */
    .items-table, .items-table tbody {
        display: block;
        width: 100%;
        border: none;
    }

    .items-table thead { display: none; }

    /* 2. La ligne (TR) devient la Grille */
    .items-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 50% / 50% strict */
        column-gap: 15px;
        row-gap: 15px;
        
        background: white;
        border: 1px solid #e2e8f0;
        padding: 15px;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* 3. RESET VIOLENT DES CELLULES (TD) */
    /* On cible tous les cas possibles pour écraser components.css */
    .items-table td,
    .items-table td:nth-child(1),
    .items-table td:nth-child(2),
    .items-table td:nth-child(3),
    .items-table td:nth-child(4),
    .items-table td:nth-child(5),
    .items-table td:nth-child(6),
    .items-table td:last-child {
        display: block !important;
        width: 100% !important;     /* Force la largeur à remplir la case de grille */
        min-width: 0 !important;    /* Autorise le rétrécissement */
        max-width: none !important; /* Saute les limites max */
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* 4. Les Labels */
    .items-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        color: #64748b;
        margin-bottom: 5px;
        text-transform: uppercase;
    }

    /* --- PLACEMENT GRILLE --- */

    /* Description : Toute la largeur */
    .items-table td:nth-child(1) { grid-column: 1 / -1 !important; }

    /* Qty : Gauche */
    .items-table td:nth-child(2) { grid-column: 1 / 2 !important; }

    /* Prix : Droite */
    .items-table td:nth-child(3) { grid-column: 2 / 3 !important; }

    /* TVA : Gauche */
    .items-table td:nth-child(4) { grid-column: 1 / 2 !important; }

    /* Remise : Droite */
    .items-table td:nth-child(5) { grid-column: 2 / 3 !important; }

    /* Total HT : Toute la largeur */
    .items-table td:nth-child(6) { 
        grid-column: 1 / -1 !important; 
        margin-top: 5px !important;
        background: #eff6ff !important;
        border: 1px solid #bfdbfe !important;
        border-radius: 8px;
        padding: 10px !important;
        
        /* Flex pour mettre label et prix sur la même ligne */
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        
        text-align: right;
        font-weight: bold;
        color: #2563eb;
    }
    
    .items-table td:nth-child(6)::before {
        margin-bottom: 0;
        color: #2563eb;
    }

    /* Bouton Supprimer */
    .items-table td:last-child { grid-column: 1 / -1 !important; }

    .items-table .remove-item {
        width: 100%;
        padding: 10px;
        background: #fee2e2;
        color: #ef4444;
        border: 1px solid #fecaca;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }
    .items-table .remove-item::after { content: "Supprimer"; }

    /* 5. CORRECTIF INPUTS */
    .items-table input {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        height: 40px !important;
        padding: 8px !important;
        margin: 0 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        background: #f8fafc !important;
        text-align: left !important; /* Force l'alignement gauche pour éviter les sauts */
    }
}

/* DEBUG MOBILE *
@media (max-width: 768px) {
    .items-table tbody tr { border: 2px solid blue !important; }
    .items-table td { border: 1px solid red !important; }
    .items-table input { border: 1px solid green !important; }
}/