{% extends 'admin/base_admin.html.twig' %}

{% block title %}Dashboard Admin{% endblock %}

{% block content %}

{# ══════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════ #}
<div class="page-header">
    <h1 class="page-title">📊 Dashboard Administration</h1>
    <p class="page-subtitle">Vue d'ensemble de l'activité NUM-ECARD</p>
</div>

{# ══════════════════════════════════════════════════════════════════
   STATISTIQUES PRINCIPALES
   ══════════════════════════════════════════════════════════════════ #}
<div class="stats-grid">
    <div class="stat-card highlight">
        <div class="stat-icon">💰</div>
        <div class="stat-value">{{ stats.total_revenue|number_format(2, ',', ' ') }} €</div>
        <div class="stat-label">Chiffre d'affaires total</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon">📈</div>
        <div class="stat-value">{{ stats.revenue_this_month|number_format(2, ',', ' ') }} €</div>
        <div class="stat-label">Ce mois-ci</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>
    <a href="{{ path('app_admin_users') }}" style="text-decoration: none; color: inherit;">
        <div class="stat-card" style="cursor: pointer; transition: transform .15s, box-shadow .15s;"
             onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 6px 20px rgba(0,0,0,0.1)'"
             onmouseout="this.style.transform='';this.style.boxShadow=''">
            <div class="stat-icon">👥</div>
            <div class="stat-value">{{ stats.total_users }}</div>
            <div class="stat-label">Utilisateurs inscrits</div>
        </div>
    </a>
</div>

{# ══════════════════════════════════════════════════════════════════
   RÉPARTITION DES COMMANDES PAR STATUT
   ══════════════════════════════════════════════════════════════════ #}
<div class="card">
    <div class="card-title">📋 Répartition des commandes</div>
    <div class="adm-status-boxes">
        <div class="status-box status-box-pending">
            <div class="status-box-value">{{ stats.commandes_by_status.pending }}</div>
            <div class="status-box-label">En attente</div>
        </div>
        <div class="status-box status-box-paid">
            <div class="status-box-value">{{ stats.commandes_by_status.paid }}</div>
            <div class="status-box-label">Payées</div>
        </div>
        <div class="status-box status-box-processing">
            <div class="status-box-value">{{ stats.commandes_by_status.processing }}</div>
            <div class="status-box-label">En cours</div>
        </div>
        <div class="status-box status-box-completed">
            <div class="status-box-value">{{ stats.commandes_by_status.completed }}</div>
            <div class="status-box-label">Terminées</div>
        </div>
        <div class="status-box status-box-cancelled">
            <div class="status-box-value">{{ stats.commandes_by_status.cancelled }}</div>
            <div class="status-box-label">Annulées</div>
        </div>
    </div>
</div>

{# ══════════════════════════════════════════════════════════════════
   DERNIÈRES COMMANDES
   ══════════════════════════════════════════════════════════════════ #}
<div class="card">

    {% if latestCommandes is empty %}
    <div class="empty-state">
        <div class="empty-state-icon">📦</div>
        <div class="empty-state-title">Aucune commande</div>
        <p>Il n'y a pas encore de commandes dans le système.</p>
    </div>
    {% else %}

    {# ── Filtres ── #}
    <div class="adm-filters">
        <input
            type="text"
            id="filter-search"
            placeholder="🔍 Référence, client..."
            class="adm-filter-input"
            oninput="filtrerCommandes()"
        >
        <select id="filter-statut" onchange="filtrerCommandes()" class="adm-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="adm-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="adm-filter-count"></span>
        <button onclick="resetFiltres()" class="adm-filter-reset">✕ Réinitialiser</button>
    </div>

    {# ── Table commandes ── #}
    <div class="table-container">
        <table class="admin-table" id="table-commandes">
            <thead>
                <tr>
                    <th>Référence</th>
                    <th>Client</th>
                    <th>Date</th>
                    <th>Pack</th>
                    <th>Bénéficiaires</th>
                    <th class="text-right">Montant TTC</th>
                    <th class="text-center">Statut</th>
                    <th class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for commande in latestCommandes %}
                <tr
                    data-reference="{{ commande.reference|lower }}"
                    data-client="{{ (commande.clientNom ~ ' ' ~ commande.clientEmail)|lower }}"
                    data-statut="{{ commande.status }}"
                    data-pack="{{ commande.packType|lower }}"
                >
                    <td data-label="Référence">
                        <a href="{{ path('app_admin_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="Client">
                        {% if commande.user is not null %}
                            <a href="{{ path('app_admin_user_show', {id: commande.user.id}) }}"
                               class="action-link" style="font-weight: 700;">
                                {{ commande.clientNom }}
                            </a>
                        {% else %}
                            <div><strong>{{ commande.clientNom }}</strong></div>
                        {% endif %}
                        <small class="text-muted">{{ commande.clientEmail }}</small>
                    </td>
                    <td data-label="Date">
                        <span class="local-datetime" data-utc="{{ commande.createdAt|date('Y-m-d\\TH:i:s', 'UTC') }}Z">
                            <div>{{ commande.createdAt|date('d/m/Y') }}</div>
                            <small class="text-muted">{{ commande.createdAt|date('H:i') }}</small>
                        </span>
                    </td>
                    <td data-label="Pack">
                        <span class="adm-badge-pack">Pack {{ commande.packType|capitalize }}</span>
                    </td>
                    <td data-label="Bénéficiaires">
                        {% if commande.beneficiaires|length > 0 %}
                            {% for b in commande.beneficiaires %}
                                <div class="adm-beneficiaire-row">
                                    <div class="adm-avatar">
                                        {{ b.prenom|slice(0,1)|upper }}{{ b.nom|slice(0,1)|upper }}
                                    </div>
                                    <span class="adm-beneficiaire-nom">
                                        {{ b.prenom }} {{ b.nom }}
                                        {% if not b.isActive %}
                                            <span class="adm-carte-off" title="Carte désactivée">⛔</span>
                                        {% endif %}
                                    </span>
                                </div>
                            {% endfor %}
                        {% else %}
                            <span class="adm-empty-cell">—</span>
                        {% endif %}
                    </td>
                    <td data-label="Montant TTC" class="text-right">
                        <strong>{{ commande.totalTTC|number_format(2, ',', ' ') }} €</strong>
                    </td>
                    <td data-label="Statut" class="text-center">
                        <span class="status-badge status-{{ commande.status }}">
                            {{ commande.statusLabel }}
                        </span>
                    </td>
                    <td data-label="" class="text-center">
                        <a href="{{ path('app_admin_commande_show', {id: commande.id}) }}" class="action-link">
                            Détail →
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

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

    {% endif %}
</div>

{# ══════════════════════════════════════════════════════════════════
   RECOMMANDATIONS
   ══════════════════════════════════════════════════════════════════ #}
<div class="card">
    <div class="card-title adm-card-title-row">
        <span>
            🤝 Recommandations
            {% if stats.new_recommendations > 0 %}
                <span class="adm-notif-badge">{{ stats.new_recommendations }}</span>
            {% endif %}
        </span>
        <a href="{{ path('app_admin_recommendations') }}" class="btn btn-secondary btn-sm">Voir tout</a>
    </div>
    {% if stats.new_recommendations == 0 %}
        <p class="adm-text-soft">Aucune nouvelle recommandation.</p>
    {% else %}
        <p class="adm-text-soft" style="margin-bottom: 12px;">
            {{ stats.new_recommendations }}
            nouvelle{{ stats.new_recommendations > 1 ? 's' : '' }}
            recommandation{{ stats.new_recommendations > 1 ? 's' : '' }} à traiter.
        </p>
        <a href="{{ path('app_admin_recommendations', {status: 'new'}) }}" class="adm-btn-action adm-btn-action--blue">
            📋 Traiter les recommandations
        </a>
    {% endif %}
</div>

{# ══════════════════════════════════════════════════════════════════
   NOTIFICATIONS PUSH
   ══════════════════════════════════════════════════════════════════ #}
<div class="card">
    <div class="card-title adm-card-title-row">
        <span>🔔 Notifications Push</span>
        <a href="{{ path('app_admin_push_index') }}" class="btn btn-secondary btn-sm">Gérer</a>
    </div>
    <p class="adm-text-soft" style="margin-bottom: 15px;">
        Envoyez des notifications aux utilisateurs qui ont installé les cartes PWA sur leur téléphone.
    </p>
    <div class="adm-btn-group">
        <a href="{{ path('app_admin_push_index') }}" class="adm-btn-action adm-btn-action--blue">
            📤 Envoyer une notification
        </a>
        <a href="{{ path('app_admin_push_send_all') }}" class="adm-btn-action adm-btn-action--orange">
            📢 Notifier tout le monde
        </a>
    </div>
</div>

{# ══════════════════════════════════════════════════════════════════
   DEMANDES RGPD
   ══════════════════════════════════════════════════════════════════ #}
<div class="card">
    <div class="card-title adm-card-title-row">
        <span>
            🔒 Demandes RGPD
            {% if rgpdPending|length > 0 %}
                <span style="display:inline-block;background:#C0392B;color:white;
                             font-size:11px;font-weight:700;padding:1px 8px;
                             border-radius:20px;margin-left:8px;vertical-align:middle;">
                    {{ rgpdPending|length }} en attente
                </span>
            {% endif %}
        </span>
        <a href="{{ path('app_admin_rgpd_index') }}" class="btn btn-secondary btn-sm">Gérer</a>
    </div>

    {# Compteurs synthétiques #}
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;">
        <div style="background:#fff8e7;border-radius:10px;padding:14px 16px;text-align:center;">
            <div style="font-size:24px;font-weight:700;color:#B45309;">{{ rgpdPending|length }}</div>
            <div style="font-size:12px;color:#92400e;margin-top:2px;">En attente</div>
        </div>
        <div style="background:#d5f5e3;border-radius:10px;padding:14px 16px;text-align:center;">
            <div style="font-size:24px;font-weight:700;color:#1a7a42;">{{ rgpdProcessedCount }}</div>
            <div style="font-size:12px;color:#166534;margin-top:2px;">Traitées</div>
        </div>
        <div style="background:#f5f5f7;border-radius:10px;padding:14px 16px;text-align:center;">
            <div style="font-size:24px;font-weight:700;color:#6e6e73;">{{ rgpdRefusedCount }}</div>
            <div style="font-size:12px;color:#86868b;margin-top:2px;">Refusées</div>
        </div>
    </div>

    {% if rgpdPending is empty %}
        <p class="adm-text-soft" style="text-align:center;padding:20px 0;">
            ✅ Aucune demande en attente de traitement.
        </p>
    {% else %}
    <div class="table-container">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Type</th>
                    <th>Demandeur</th>
                    <th>Reçue le</th>
                    <th>Échéance</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for demande in rgpdPending %}
                    {% set jours = demande.deadlineAt
                        ? (((demande.deadlineAt|date('U') - 'now'|date('U')) / 86400)|round(0, 'ceil'))
                        : null %}
                <tr>
                    <td data-label="#">
                        <span style="font-family:monospace;font-size:12px;color:#6e6e73;">#{{ demande.id }}</span>
                    </td>
                    <td data-label="Type">
                        <span style="font-size:12px;font-weight:600;padding:2px 8px;border-radius:20px;
                            background:{{ demande.type == 'suppression' ? '#ffe8e8' : (demande.type == 'opposition' ? '#fff3cd' : '#e8f0ff') }};
                            color:{{ demande.type == 'suppression' ? '#C0392B' : (demande.type == 'opposition' ? '#b45309' : '#1A3C5E') }};">
                            {{ demande.typeLabel }}
                        </span>
                    </td>
                    <td data-label="Demandeur">
                        <div style="font-size:13px;font-weight:600;">{{ demande.nomDemandeur ?? '—' }}</div>
                        <div style="font-size:11px;color:#86868b;">{{ demande.emailDemandeur ?? '' }}</div>
                    </td>
                    <td data-label="Reçue le" class="text-muted" style="font-size:12px;">
                        {{ demande.requestedAt|date('d/m/Y') }}
                    </td>
                    <td data-label="Échéance">
                        {% if jours is not null %}
                            <span style="font-size:12px;font-weight:600;
                                color:{{ jours <= 3 ? '#C0392B' : (jours <= 7 ? '#b45309' : '#1a7a42') }};">
                                {% if jours <= 0 %}⛔ Dépassé
                                {% elseif jours <= 3 %}🔴 J-{{ jours }}
                                {% elseif jours <= 7 %}🟡 J-{{ jours }}
                                {% else %}🟢 {{ demande.deadlineAt|date('d/m/Y') }}
                                {% endif %}
                            </span>
                        {% else %}
                            <span class="text-muted">—</span>
                        {% endif %}
                    </td>
                    <td class="text-right">
                        <a href="{{ path('app_admin_rgpd_index') }}" class="action-link">Traiter →</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>

{# ══════════════════════════════════════════════════════════════════
   DERNIERS UTILISATEURS
   ══════════════════════════════════════════════════════════════════ #}
<div class="card">
    <div class="card-title adm-card-title-row">
        <span>👤 Derniers inscrits</span>
        <a href="{{ path('app_admin_users') }}" class="btn btn-secondary btn-sm">Voir tout</a>
    </div>
    {% if latestUsers is empty %}
        <p class="text-muted" style="text-align: center; padding: 40px;">Aucun utilisateur pour le moment.</p>
    {% else %}
    <div class="table-container">
        <table class="admin-table" id="table-users">
            <thead>
                <tr>
                    <th>Utilisateur</th>
                    <th>Email</th>
                    <th>Inscription</th>
                    <th class="text-center">Vérifié</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for user in latestUsers %}
                <tr>
                    <td data-label="Utilisateur">
                        <div class="user-info">
                            <div class="user-avatar">{{ user.initiales }}</div>
                            <span class="user-name">{{ user.fullName ?: 'Non renseigné' }}</span>
                        </div>
                    </td>
                    <td data-label="Email" class="text-muted">{{ user.email }}</td>
                    <td data-label="Inscription" class="text-muted">{{ user.createdAt|date('d/m/Y') }}</td>
                    <td data-label="Vérifié" class="text-center">
                        {% if user.isVerified %}
                            <span class="verified-icon text-success">✅</span>
                        {% else %}
                            <span class="verified-icon text-error">❌</span>
                        {% endif %}
                    </td>
                    <td data-label="" class="text-right">
                        <a href="{{ path('app_admin_user_show', {id: user.id}) }}" class="action-link">Voir →</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>

{# ══════════════════════════════════════════════════════════════════
   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 client    = row.dataset.client    ?? '';
        const rowStatut = row.dataset.statut    ?? '';
        const rowPack   = row.dataset.pack      ?? '';

        const matchSearch = !search || reference.includes(search) || client.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.querySelector('#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>

/* ── Répartition statuts ───────────────────────────────────────── */
.adm-status-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── Titre card avec bouton à droite ───────────────────────────── */
.adm-card-title-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Badge notification ────────────────────────────────────────── */
.adm-notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    background: #007aff;
    color: white;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    margin-left: 8px;
}

/* ── Texte secondaire ──────────────────────────────────────────── */
.adm-text-soft {
    color: #6e6e73;
    font-size: 14px;
    margin-bottom: 0;
}

/* ── Boutons d'action (recommandations, push) ──────────────────── */
.adm-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.adm-btn-action {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    color: white;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.adm-btn-action:hover { opacity: 0.85; }

.adm-btn-action--blue {
    background: linear-gradient(135deg, #007aff, #5856d6);
}

.adm-btn-action--orange {
    background: linear-gradient(135deg, #ff9500, #ff6b00);
}

/* ── Badge pack ────────────────────────────────────────────────── */
.adm-badge-pack {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: #f0f0f0;
    color: #333;
}

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

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

.adm-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;
}

.adm-beneficiaire-nom {
    font-size: 12px;
    color: #1d1d1f;
    font-weight: 500;
}

.adm-carte-off { color: #dc2626; font-size: 10px; }
.adm-empty-cell { color: #aeaeb2; font-size: 12px; }

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

.adm-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;
}

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

.adm-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;
}

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

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

.adm-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;
}

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

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

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ─────────────────────────────────────────────────────────────────
   • Mode carte activé à ≤ 600px (mobile uniquement)
   • Cartes pleine largeur : display:block + width:100% sur
     table, tbody et tr (sinon le tableau calcule sa largeur
     sur le contenu et les cartes restent réduites)
   ══════════════════════════════════════════════════════════════════ */

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

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

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

    /* ─ Table commandes ─ */
    #table-commandes,
    #table-users {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

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

    #table-commandes thead,
    #table-users thead { display: none; }

    #table-commandes tbody tr,
    #table-users 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);
    }

    #table-commandes tbody td,
    #table-users 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%;
        /* Annuler les alignements text-right / text-center hérités */
        text-align: left !important;
    }

    #table-commandes tbody td:last-child,
    #table-users 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,
    #table-users 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: 90px;
    }

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

    /* Status boxes : grille 3 colonnes sur mobile */
    .adm-status-boxes {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    /* Boutons d'action : colonne sur mobile */
    .adm-btn-group {
        flex-direction: column;
        align-items: stretch;
    }

    .adm-btn-action {
        text-align: center;
    }
}

/* ── Stats : 2 colonnes sur petit mobile ── */
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

    .adm-status-boxes { grid-template-columns: repeat(2, 1fr); }

    .adm-filters { flex-direction: column; align-items: stretch; }
    .adm-filter-count { text-align: center; }
}

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

</style>

{% endblock %}