/* ═══════════════════════════════════════════════════════════════════════════
   Cali&Co — Système de tableaux unifié (chantier #4)
   ───────────────────────────────────────────────────────────────────────────
   Source unique de vérité pour TOUS les tableaux de données. Si tu en crées
   un nouveau qui ne ressemble à aucun de ceux-ci, ouvre une issue — c'est
   sans doute qu'il manque un variant à ce système, pas qu'il faut créer
   une classe ad-hoc dans dashboard.css/admin.css/suppliers.css/…

   Architecture :
     - .app-table-card                  (wrapper : border + scroll-x + radius)
     - .app-table                       (table : width 100% + tabular-nums)
     - .app-table--sticky               (header collant sous le topbar)
     - .app-table--compact              (densité réduite : padding 6/10)
     - .app-table--cozy                 (densité large : padding 14/18)
     - .app-table__td--{right|center}   (alignement de cellule)
     - .app-table__th--{right|center}   (alignement d'en-tête)
     - .app-table__num                  (chiffres alignés à droite + tnum)
     - .app-table__name                 (cellule "nom" : 600 weight + dark)
     - .app-table__meta                 (secondaire : gris + petite taille)
     - .app-table__actions              (white-space:nowrap + flex)
     - .app-table__rank                 (numéro de ligne #1..N, 32px)
     - .app-table-empty                 (état vide standardisé)

   Génération conseillée : App\Ui\Table::render([...]) (cf. src/Ui/Table.php).

   COMPAT LEGACY : les sélecteurs génériques `table`, `th`, `td` (sans
   préfixe) sont redéfinis en fin de fichier comme ALIAS du nouveau système.
   Aucun fichier PHP existant n'a besoin d'être migré pour bénéficier du look
   unifié. La migration vers <table class="app-table"> se fait au fil de
   l'eau (et permet d'utiliser les modifiers).
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
   1. WRAPPER — .app-table-card
   ───────────────────────────────────────────────────────────────────────── */
.app-table-card {
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 8px;
    box-shadow: none;
    overflow-x: auto;
}


/* ─────────────────────────────────────────────────────────────────────────
   2. TABLE — base + th + td + hover
   ─────────────────────────────────────────────────────────────────────── */
.app-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.app-table th {
    text-align: left;
    padding: 10px 16px;
    background: var(--gray-50, #f8fafc);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gray-500, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    box-shadow: inset 0 -1px 0 var(--gray-200, #e5e7eb);
    white-space: nowrap;
}
.app-table td {
    padding: 12px 16px;
    border-top: 1px solid var(--gray-100, #f1f5f9);
    font-size: 0.8125rem;
    color: var(--gray-800, #1f2937);
    vertical-align: middle;
}
.app-table tr { transition: background 0.12s ease; }
.app-table tbody tr:hover { background: #f5f9fd; }


/* ─────────────────────────────────────────────────────────────────────────
   3. STICKY HEADER — opt-in via .app-table--sticky
   ───────────────────────────────────────────────────────────────────────── */
.app-table--sticky th {
    position: sticky;
    top: var(--header-h, 56px);
    z-index: 5;
}


/* ─────────────────────────────────────────────────────────────────────────
   4. DENSITY MODIFIERS
   ───────────────────────────────────────────────────────────────────────── */
.app-table--compact th { padding: 6px 10px; }
.app-table--compact td { padding: 8px 10px; font-size: 0.78rem; }

.app-table--cozy th { padding: 14px 18px; }
.app-table--cozy td { padding: 14px 18px; font-size: 0.875rem; }


/* ─────────────────────────────────────────────────────────────────────────
   5. ALIGNMENT MODIFIERS (par cellule)
   ───────────────────────────────────────────────────────────────────────── */
.app-table__th--right,
.app-table__td--right   { text-align: right; }
.app-table__th--center,
.app-table__td--center  { text-align: center; }


/* ─────────────────────────────────────────────────────────────────────────
   6. CELL UTILITIES — patterns récurrents (nom, méta, actions, montant…)
   ───────────────────────────────────────────────────────────────────────── */
.app-table__num,
.app-table .app-table-num { /* legacy alias hérité de app.css */
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.app-table__name { font-weight: 600; color: var(--gray-900, #0f172a); font-size: 0.875rem; }
.app-table__name-sub { display: block; font-size: 0.6875rem; color: var(--gray-400, #94a3b8); font-weight: 400; margin-top: 2px; letter-spacing: 0; }
.app-table__meta { color: var(--gray-500, #64748b); font-size: 0.82rem; }
.app-table__actions { white-space: nowrap; }
.app-table__rank { color: var(--gray-500, #64748b); width: 32px; }


/* ─────────────────────────────────────────────────────────────────────────
   7. EMPTY STATE — état vide standardisé
   ───────────────────────────────────────────────────────────────────────── */
.app-table-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 56px 20px;
    color: var(--gray-500, #6b7280);
}
.app-table-empty__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    color: var(--gray-400, #94a3b8);
    background: var(--gray-50, #f8fafc);
    border-radius: 50%;
}
.app-table-empty__title    { font-size: 0.95rem; font-weight: 600; color: var(--gray-800, #1f2937); margin: 0; }
.app-table-empty__subtitle { font-size: 0.82rem; color: var(--gray-500, #64748b); margin-top: 6px; line-height: 1.55; max-width: 420px; white-space: pre-line; }
.app-table-empty__action   { margin-top: 14px; }

/* Variant "error" : icône + titre rouges (échec de chargement d'une liste). */
.app-table-empty--error .app-table-empty__icon  { color: var(--color-danger, #dc2626); background: #fef2f2; }
.app-table-empty--error .app-table-empty__title { color: var(--color-danger-hover, #b91c1c); }


/* ─────────────────────────────────────────────────────────────────────────
   8. TRI PAR COLONNE — styles activés par js/table-sort.js
   ───────────────────────────────────────────────────────────────────────── */
th.is-sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.12s ease, background 0.12s ease;
}
th.is-sortable:hover { color: var(--gray-700, #334155); }
th.is-sortable .sort-arrow {
    display: inline-block;
    width: 10px; height: 10px;
    margin-left: 6px;
    vertical-align: -1px;
    opacity: 0.4;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 0.5L7.5 3.5h-5z' fill='%2364748b'/><path d='M5 9.5L2.5 6.5h5z' fill='%2364748b'/></svg>");
    transition: opacity 0.12s ease, background-image 0.12s ease;
}
th.is-sortable:hover .sort-arrow { opacity: 0.7; }
th.is-sort-asc,
th.is-sort-desc { color: var(--brand-blue, #006EB9); }
th.is-sort-asc .sort-arrow {
    opacity: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 2L8.5 7h-7z' fill='%23006EB9'/></svg>");
}
th.is-sort-desc .sort-arrow {
    opacity: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 8L1.5 3h7z' fill='%23006EB9'/></svg>");
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. ALIAS LEGACY — sélecteurs génériques (table/th/td) alignés sur le système
   ───────────────────────────────────────────────────────────────────────────
   Avant le chantier #4 chaque page redéfinissait table/th/td à sa sauce
   (dashboard.css, admin.css, suppliers.css, archives.css, import_suppliers.css)
   avec padding, font-size, border-collapse différents. On unifie tout ici.

   Aucun changement de markup n'est requis : les <table> nues récupèrent
   automatiquement le look canonique. Le sticky reste opt-in (ne sera pas
   activé si pas demandé) — ce qui corrige un bug latent : admin/suppliers/
   archives avaient des th sticky qui ne marchaient pas (parent overflow).
   ═══════════════════════════════════════════════════════════════════════════ */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}
th {
    text-align: left;
    padding: 10px 16px;
    background: var(--gray-50, #f8fafc);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gray-500, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    box-shadow: inset 0 -1px 0 var(--gray-200, #e5e7eb);
    white-space: nowrap;
}
td {
    padding: 12px 16px;
    border-top: 1px solid var(--gray-100, #f1f5f9);
    font-size: 0.8125rem;
    color: var(--gray-800, #1f2937);
    vertical-align: middle;
}
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: #f5f9fd; }