{% extends 'account/base_account.html.twig' %}

{% block title %}Mon compte{% endblock %}

{% block content %}

{# ── Flash messages ── #}
{% for msg in app.flashes('warning') %}
<div style="background:#fff3cd;border-left:4px solid #ff9500;border-radius:10px;padding:14px 18px;margin-bottom:16px;font-size:14px;color:#7a4f00;display:flex;align-items:flex-start;gap:10px;">
    <span style="font-size:18px;line-height:1;">⚠️</span><span>{{ msg|raw }}</span>
</div>
{% endfor %}
{% for msg in app.flashes('success') %}
<div style="background:#e8f8ee;border-left:4px solid #34c759;border-radius:10px;padding:14px 18px;margin-bottom:16px;font-size:14px;color:#1a6b30;display:flex;align-items:flex-start;gap:10px;">
    <span style="font-size:18px;line-height:1;">✅</span><span>{{ msg|raw }}</span>
</div>
{% endfor %}
{% for msg in app.flashes('info') %}
<div style="background:#e8f4fd;border-left:4px solid #0071e3;border-radius:10px;padding:14px 18px;margin-bottom:16px;font-size:14px;color:#004a8f;display:flex;align-items:flex-start;gap:10px;">
    <span style="font-size:18px;line-height:1;">ℹ️</span><span>{{ msg|raw }}</span>
</div>
{% endfor %}

{# ── Bannière expiration MDP (Politique V1.0 §3) ── #}
{% if app.user.isPasswordExpired %}
<div style="background:#fff2f2;border:1.5px solid #ffc9c9;border-radius:12px;padding:16px 20px;margin-bottom:20px;display:flex;gap:12px;align-items:flex-start;">
    <span style="font-size:28px;line-height:1;">🔒</span>
    <div style="flex:1;">
        <div style="font-weight:700;color:#c92a2a;font-size:15px;margin-bottom:6px;">Votre mot de passe a expiré</div>
        <div style="font-size:13px;color:#86868b;margin-bottom:10px;">
            La politique de sécurité SANAGENCY impose un renouvellement tous les 12 mois. Veuillez mettre à jour votre mot de passe pour continuer à accéder à votre compte.
        </div>
        <a href="{{ path('app_account_change_password') }}" style="display:inline-block;background:#c92a2a;color:white;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;">
            🔐 Renouveler maintenant
        </a>
    </div>
</div>
{% elseif app.user.passwordChangedAt is not null %}
    {# Avertissement préventif à 14 jours ── calcul Twig natif #}
    {% set expiry_date = app.user.passwordChangedAt|date_modify('+12 months') %}
    {% set days_left = ((expiry_date|date('U') - 'now'|date('U')) / 86400)|round(0, 'ceil') %}
    {% if days_left <= 14 and days_left > 0 %}
    <div style="background:#fff8e1;border-left:4px solid #ff9500;border-radius:10px;padding:14px 18px;margin-bottom:16px;font-size:14px;color:#7a4f00;display:flex;align-items:center;gap:12px;">
        <span style="font-size:20px;">⏳</span>
        <span>
            Votre mot de passe expire dans <strong>{{ days_left }} jour{{ days_left > 1 ? 's' }}</strong>.
            <a href="{{ path('app_account_change_password') }}" style="color:#0071e3;font-weight:600;margin-left:6px;">Renouveler maintenant →</a>
        </span>
    </div>
    {% endif %}
{% endif %}

{# ══════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════ #}
<div class="page-header">
    <h1 class="page-title">👋 Bienvenue, {{ user.nom ?? user.nom }} {{ user.prenom ?? user.prenom }}</h1>
    <p class="page-subtitle">Votre espace personnel NUM-ECARD</p>
</div>

{# ══════════════════════════════════════════════════════════════════
   STATISTIQUES
   ══════════════════════════════════════════════════════════════════ #}
<div class="stats-grid">
    <div class="stat-card highlight">
        <div class="stat-icon">💰</div>
        <div class="stat-value">{{ stats.total_depense|number_format(2, ',', ' ') }} €</div>
        <div class="stat-label">Total dépensé</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">📦</div>
        <div class="stat-value">{{ stats.total_commandes }}</div>
        <div class="stat-label">Commandes totales</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">✅</div>
        <div class="stat-value">{{ stats.commandes_payees }}</div>
        <div class="stat-label">Commandes payées</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">⏳</div>
        <div class="stat-value">{{ stats.commandes_en_cours }}</div>
        <div class="stat-label">En cours</div>
    </div>
</div>

{# ══════════════════════════════════════════════════════════════════
   BOUTON PARTAGER MA CARTE (desktop uniquement)
   ══════════════════════════════════════════════════════════════════ #}
{% set has_paid_cards = false %}
{% for commande in app.user.commandes %}
    {% if commande.isPaid %}{% set has_paid_cards = true %}{% endif %}
{% endfor %}



{# ══════════════════════════════════════════════════════════════════
   DERNIÈRES COMMANDES
   ══════════════════════════════════════════════════════════════════ #}
<div class="card db-card" style="margin-top:1.5rem">
    <div class="card-title">
        <span>Mes commandes</span>
    </div>

    {% if commandes is empty %}
    <div class="empty-state">
        <div class="empty-state-icon">📦</div>
        <div class="empty-state-title">Aucune commande</div>
        <p>Vous n'avez pas encore passé de commande.</p>
        <a href="{{ path('app_home') }}#pricing" class="btn btn-primary mt-2">Découvrir nos offres</a>
    </div>
    {% else %}

    {# ── Filtres ── #}
    <div class="db-filters">
        <input
            type="text"
            id="filter-search"
            placeholder="🔍 Référence, bénéficiaire..."
            class="db-filter-input"
            oninput="filtrerCommandes()"
        >
        <select id="filter-statut" onchange="filtrerCommandes()" class="db-filter-select">
            <option value="">Tous les statuts</option>
            <option value="pending">En attente</option>
            <option value="paid">Payée</option>
            <option value="processing">En cours</option>
            <option value="completed">Terminée</option>
            <option value="cancelled">Annulée</option>
        </select>
        <select id="filter-pack" onchange="filtrerCommandes()" class="db-filter-select">
            <option value="">Tous les packs</option>
            <option value="essentiel">Essentiel</option>
            <option value="premium">Premium</option>
            <option value="force">Force de Vente</option>
            <option value="multi">Multi</option>
        </select>
        <span id="filter-count" class="db-filter-count"></span>
        <button onclick="resetFiltres()" class="db-filter-reset">✕ Réinitialiser</button>
    </div>

    {# ── Table ── #}
    <div class="table-overflow">
        <table class="data-table" id="table-commandes">
            <thead>
                <tr>
                    <th>Référence</th>
                    <th>Date</th>
                    <th>Pack</th>
                    <th>Cartes</th>
                    <th>Montant TTC</th>
                    <th>Statut</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for commande in commandes %}
                {% set statusClass = {
                    'draft':      'badge-draft',
                    'pending':    'badge-pending',
                    'paid':       'badge-paid',
                    'processing': 'badge-processing',
                    'completed':  'badge-completed',
                    'cancelled':  'badge-cancelled'
                } %}
                {% set statusLabel = {
                    'draft':      'Brouillon',
                    'pending':    'En attente',
                    'paid':       'Payée',
                    'processing': 'En cours',
                    'completed':  'Terminée',
                    'cancelled':  'Annulée'
                } %}
                <tr
                    data-reference="{{ commande.reference|lower }}"
                    data-beneficiaires="{{ commande.beneficiaires|map(b => b.prenom ~ ' ' ~ b.nom)|join(' ')|lower }}"
                    data-statut="{{ commande.status }}"
                    data-pack="{{ commande.packType|lower }}"
                >
                    <td data-label="Référence">
                        <a href="{{ path('app_account_commande_show', {id: commande.id}) }}" class="action-link">
                            <strong class="text-primary">{{ commande.reference }}</strong>
                        </a>
                        {% if commande.isPaid %}
                            <span class="text-success" title="Payée">✓</span>
                        {% endif %}
                    </td>
                    <td data-label="Date" class="text-muted">
                        <span class="local-datetime" data-utc="{{ commande.createdAt|date('Y-m-d\\TH:i:s', 'UTC') }}Z">
                            {{ commande.createdAt|date('d/m/Y') }}<br>
                            <small>{{ commande.createdAt|date('H:i') }}</small>
                        </span>
                    </td>
                    <td data-label="Pack">
                        <span class="badge-pack">Pack {{ commande.packType|capitalize }}</span>
                    </td>
                    <td data-label="Cartes">
                        {% if commande.beneficiaires|length > 0 %}
                            {% for b in commande.beneficiaires %}
                                <div class="db-beneficiaire-row">
                                    <div class="db-avatar">
                                        {{ b.prenom|slice(0,1)|upper }}{{ b.nom|slice(0,1)|upper }}
                                    </div>
                                    <span class="db-beneficiaire-nom">{{ b.prenom }} {{ b.nom }}</span>
                                </div>
                            {% endfor %}
                        {% else %}
                            <span class="db-empty-cell">—</span>
                        {% endif %}
                    </td>
                    <td data-label="Montant TTC">
                        <strong>{{ commande.totalTTC|number_format(2, ',', ' ') }} €</strong>
                    </td>
                    <td data-label="Statut">
                        <span class="badge {{ statusClass[commande.status] ?? 'badge-draft' }}">
                            {{ statusLabel[commande.status] ?? commande.status }}
                        </span>
                    </td>
                    <td data-label="">
                        <a href="{{ path('app_account_commande_show', {id: commande.id}) }}" class="btn btn-secondary btn-sm">
                            Détails →
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div id="filter-empty" class="db-filter-empty" style="display:none;">
        Aucune commande ne correspond aux filtres sélectionnés.
    </div>

    {% endif %}
</div>

{# ══════════════════════════════════════════════════════════════════
   MES CARTES & HÉBERGEMENT
   ══════════════════════════════════════════════════════════════════ #}
{% if beneficiaires is not empty %}
<div class="card db-card" style="margin-top:1.5rem">
    <div class="card-title">🃏 Mes cartes &amp; hébergement</div>
    {% for b in beneficiaires %}
    <div class="db-carte-row">
        <div class="db-carte-info">
            <strong>{{ b.prenom }} {{ b.nom }}</strong>
            {% if b.packType is defined and b.packType %}
                <span class="db-carte-pack">{{ b.packType }}</span>
            {% endif %}
            {% if b.isActive is defined %}
                {% if b.isActive %}
                    <span class="db-carte-badge db-carte-badge--active">✅ Active</span>
                {% else %}
                    <span class="db-carte-badge db-carte-badge--expired">⚠️ Expirée</span>
                {% endif %}
            {% endif %}
        </div>
        <a href="{{ path('app_hebergement_show', {id: b.id}) }}" class="btn btn-secondary btn-sm db-carte-btn">
            🏠 Hébergement
        </a>
    </div>
    {% endfor %}
</div>
{% endif %}

{# ══════════════════════════════════════════════════════════════════
   PRÉFÉRENCES DE COMMUNICATION — RGPD
   ══════════════════════════════════════════════════════════════════ #}
<div class="card db-card" style="margin-top:1.5rem">
    <div class="card-title">📧 Préférences de communication</div>

    {% if app.request.query.get('optin_updated') %}
        <div style="background:#e8f8ee; color:#1a7a42; padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:14px;">
            ✅ Vos préférences ont été mises à jour.
        </div>
    {% endif %}

    <form method="POST" action="{{ path('app_account_marketing_preferences') }}" style="margin:0">
        <input type="hidden" name="_token" value="{{ csrf_token('marketing_preferences') }}">

        <div style="display:flex; align-items:flex-start; gap:12px; padding:4px 0">
            <input
                type="checkbox"
                name="optin_marketing"
                id="optin_marketing_dashboard"
                value="1"
                {% if hasActiveConsent %}checked{% endif %}
                style="width:18px; height:18px; margin-top:2px; accent-color:#667eea; flex-shrink:0; cursor:pointer"
            >
            <label for="optin_marketing_dashboard" style="font-size:13px; color:#1d1d1f; line-height:1.6; cursor:pointer">
                <strong>Recevoir les actualités NUM-ECARD par email</strong><br>
                <span style="color:#86868b; font-size:12px;">
                    Conseils, nouveautés et offres exclusives.
                    Vous pouvez modifier ce choix à tout moment.
                </span>
            </label>
        </div>

        <div style="margin-top:16px">
            <button type="submit" class="btn btn-primary btn-sm">
                💾 Enregistrer mes préférences
            </button>
        </div>
    </form>
</div>

{# ══════════════════════════════════════════════════════════════════
   MODALE QR CODE (desktop)
   ══════════════════════════════════════════════════════════════════ #}
{% if has_paid_cards %}
<div id="qrModal" class="qr-modal-overlay" onclick="if(event.target===this)this.classList.remove('open')">
    <div class="qr-modal">
        <div class="qr-modal__header">
            <span class="qr-modal__title">📲 Partager ma carte</span>
            <button class="qr-modal__close" onclick="document.getElementById('qrModal').classList.remove('open')">✕</button>
        </div>
        <div class="qr-modal__body">
            {% for commande in app.user.commandes %}
                {% if commande.isPaid %}
                    {% for beneficiaire in commande.beneficiaires %}
                        {% set slug = (beneficiaire.prenom ~ '-' ~ beneficiaire.nom)|lower|replace({' ': '-', 'é': 'e', 'è': 'e', 'ê': 'e', 'à': 'a', 'â': 'a', 'ô': 'o', 'û': 'u', 'ù': 'u', 'î': 'i', 'ï': 'i', 'ç': 'c'}) %}
                        {% set carteUrl = 'https://' ~ slug ~ '.num-ecard.com' %}
                        <div class="qr-modal__card">
                            <p class="qr-modal__name">
                                {{ beneficiaire.prenom }} {{ beneficiaire.nom }}
                                <span class="qr-modal__pack">— {{ commande.packType }}</span>
                            </p>
                            <div id="qr-desktop-{{ beneficiaire.id }}" class="qr-modal__qr"></div>
                            <p class="qr-modal__url">{{ carteUrl }}</p>
                            <div class="qr-modal__actions">
                                <a href="{{ carteUrl }}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary btn-sm">
                                    🔗 Ouvrir
                                </a>
                                <button onclick="if(navigator.share){navigator.share({title:'{{ beneficiaire.prenom }} {{ beneficiaire.nom }}',url:'{{ carteUrl }}'})}else{navigator.clipboard.writeText('{{ carteUrl }}');alert('Lien copié !')}"
                                        class="btn btn-primary btn-sm">
                                    📤 Partager
                                </button>
                            </div>
                        </div>
                        <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            if (typeof QRCode !== 'undefined') {
                                new QRCode(document.getElementById('qr-desktop-{{ beneficiaire.id }}'), {
                                    text: '{{ carteUrl }}',
                                    width: 160, height: 160,
                                    colorDark: '#1a1a1a',
                                    colorLight: '#ffffff',
                                    correctLevel: QRCode.CorrectLevel.M
                                });
                            }
                        });
                        </script>
                    {% endfor %}
                {% endif %}
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

{# ══════════════════════════════════════════════════════════════════
   JAVASCRIPT
   ══════════════════════════════════════════════════════════════════ #}
<script>
function filtrerCommandes() {
    const search = document.getElementById('filter-search').value.toLowerCase().trim();
    const statut = document.getElementById('filter-statut').value;
    const pack   = document.getElementById('filter-pack').value.toLowerCase();
    const rows   = document.querySelectorAll('#table-commandes tbody tr');

    let visible = 0;

    rows.forEach(row => {
        const reference     = row.dataset.reference     ?? '';
        const beneficiaires = row.dataset.beneficiaires ?? '';
        const rowStatut     = row.dataset.statut        ?? '';
        const rowPack       = row.dataset.pack          ?? '';

        const matchSearch = !search || reference.includes(search) || beneficiaires.includes(search);
        const matchStatut = !statut || rowStatut === statut;
        const matchPack   = !pack   || rowPack.includes(pack);

        if (matchSearch && matchStatut && matchPack) {
            row.style.display = '';
            visible++;
        } else {
            row.style.display = 'none';
        }
    });

    const total   = rows.length;
    const countEl = document.getElementById('filter-count');
    if (search || statut || pack) {
        countEl.textContent = visible + ' / ' + total + ' résultat' + (visible > 1 ? 's' : '');
    } else {
        countEl.textContent = '';
    }

    document.getElementById('filter-empty').style.display    = visible === 0 ? 'block' : 'none';
    document.getElementById('table-commandes').style.display = visible === 0 ? 'none'  : '';
}

function resetFiltres() {
    document.getElementById('filter-search').value = '';
    document.getElementById('filter-statut').value = '';
    document.getElementById('filter-pack').value   = '';
    filtrerCommandes();
}
</script>

{# ══════════════════════════════════════════════════════════════════
   CSS
   ══════════════════════════════════════════════════════════════════ #}
<style>

/* ── Filtres ───────────────────────────────────────────────────── */
.db-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    align-items: center;
}

.db-filter-input {
    padding: 7px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    flex: 1 1 180px;
    min-width: 0;
    max-width: 280px;
    font-family: inherit;
    transition: border-color 0.2s;
}

.db-filter-input:focus { border-color: #6B3DE8; }

.db-filter-select {
    padding: 7px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    flex: 1 1 140px;
    min-width: 0;
    max-width: 200px;
    transition: border-color 0.2s;
}

.db-filter-select:focus { outline: none; border-color: #6B3DE8; }

.db-filter-count { font-size: 13px; color: #86868b; }

.db-filter-reset {
    padding: 7px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
    background: #f5f5f7;
    cursor: pointer;
    color: #555;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.2s;
}

.db-filter-reset:hover { background: #e8e8ed; }

.db-filter-empty {
    text-align: center;
    padding: 30px;
    color: #86868b;
    font-size: 14px;
}

/* ── Bénéficiaires dans la table ───────────────────────────────── */
.db-beneficiaire-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.db-beneficiaire-row:last-child { margin-bottom: 0; }

.db-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
}

.db-beneficiaire-nom { font-size: 12px; color: #1d1d1f; font-weight: 500; }
.db-empty-cell       { color: #aeaeb2; font-size: 12px; }

/* ── Section "Mes cartes" ──────────────────────────────────────── */
.db-carte-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    gap: 12px;
    flex-wrap: wrap;
}

.db-carte-row:last-child { border-bottom: none; }

.db-carte-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.db-carte-pack {
    font-size: 12px;
    color: #86868b;
    background: #f5f5f7;
    padding: 2px 8px;
    border-radius: 10px;
}

.db-carte-badge          { font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.db-carte-badge--active  { color: #1a7a42; background: #e8f8ee; }
.db-carte-badge--expired { color: #991b1b; background: #fee2e2; }
.db-carte-btn            { flex-shrink: 0; }

/* ── Bouton partager desktop ───────────────────────────────────── */
.desktop-share-btn-wrap { display: none; margin-top: 1.5rem; }

/* ── Modale QR ─────────────────────────────────────────────────── */
.qr-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 500;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.qr-modal-overlay.open { display: flex; }

.qr-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,0.2);
}

.qr-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.qr-modal__title { font-size: 17px; font-weight: 700; color: #1d1d1f; }

.qr-modal__close {
    background: #f5f5f7;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 14px;
    cursor: pointer;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.qr-modal__close:hover     { background: #e8e8ed; }
.qr-modal__body            { overflow-y: auto; padding: 16px 24px 24px; }
.qr-modal__card            { text-align: center; padding: 20px 0; border-bottom: 1px solid #f5f5f5; }
.qr-modal__card:last-child { border-bottom: none; }
.qr-modal__name            { font-size: 15px; font-weight: 600; color: #1a1a1a; margin: 0 0 16px; }
.qr-modal__pack            { font-size: 12px; font-weight: 400; color: #999; }
.qr-modal__qr              { display: flex; justify-content: center; margin-bottom: 10px; }
.qr-modal__url             { font-size: 12px; color: #86868b; word-break: break-all; margin: 0 0 14px; }
.qr-modal__actions         { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ─────────────────────────────────────────────────────────────────
   • Sidebar ~260px → sur laptop 1024px, contenu ≈ 760px → tableau
   • Mode carte activé à ≤ 600px (mobile uniquement)
   • Cartes pleine largeur grâce à display:block + width:100%
     sur table, tbody et tr
   ══════════════════════════════════════════════════════════════════ */

/* Desktop : bouton partager visible */
@media (min-width: 769px) {
    .desktop-share-btn-wrap { display: block; }
}

/* Filtres : wrapping doux à partir de 900px */
@media (max-width: 900px) {
    .db-filter-input  { max-width: 100%; flex: 1 1 160px; }
    .db-filter-select { max-width: 100%; flex: 1 1 130px; }
}

/* ── Mode "carte" sur mobile (≤ 600px) ── */
@media (max-width: 600px) {

    /* Désactiver le scroll horizontal */
    .table-overflow { overflow-x: visible; }

    /* Forcer la table et ses enfants en display:block pleine largeur
       Sans ça, le <table> calcule sa largeur sur son contenu
       et les cartes restent réduites au centre */
    #table-commandes {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    #table-commandes tbody {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Masquer les en-têtes */
    #table-commandes thead { display: none; }

    /* Chaque <tr> = une carte pleine largeur */
    #table-commandes tbody tr {
        display: block;
        width: 100%;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #e8e4f3;
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 14px 16px;
        box-shadow: 0 2px 8px rgba(107, 61, 232, 0.06);
    }

    /* Chaque <td> = ligne label / valeur */
    #table-commandes tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        padding: 6px 0;
        border: none;
        border-bottom: 1px solid #f5f5f7;
        font-size: 13px;
        box-sizing: border-box;
        width: 100%;
    }

    /* Dernière cellule (bouton Détails) */
    #table-commandes tbody td:last-child {
        border-bottom: none;
        justify-content: flex-end;
        padding-top: 10px;
    }

    /* Label automatique via data-label */
    #table-commandes tbody td[data-label]::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        color: #86868b;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        white-space: nowrap;
        flex-shrink: 0;
        padding-top: 2px;
        min-width: 80px;
    }

    /* Pas de label pour la colonne action */
    #table-commandes tbody td[data-label=""]::before { display: none; }
}

/* ── Petit mobile (≤ 480px) ── */
@media (max-width: 480px) {

    /* Stats : 2 colonnes */
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Section cartes : bouton pleine largeur */
    .db-carte-row { flex-direction: column; align-items: flex-start; }
    .db-carte-btn { width: 100%; text-align: center; justify-content: center; }

    /* Modale : padding réduit */
    .qr-modal__header,
    .qr-modal__body { padding-left: 16px; padding-right: 16px; }

    /* Filtres : colonne */
    .db-filters      { flex-direction: column; align-items: stretch; }
    .db-filter-count { text-align: center; }
}

/* ── Très petit (≤ 360px) ── */
@media (max-width: 360px) {
    .stats-grid { grid-template-columns: 1fr !important; }
}

/* ── Swap Partager → Utilisateur — CSS pur, sans flash ── */
#qrBtn    { display: none !important; }
#qrPanel  { display: none !important; }
#userNavBtn { display: flex !important; }

</style>

{% endblock %}