/* =========================================
   TH-TABLES v10.5.0
   Tableau Emporium parfaitement aligné
   ========================================= */

/* ─────────────────────────────────────────
   1. TABLEAUX HTML - Parchemins, Manager Atelier
   ───────────────────────────────────────── */

.th-unified-table-wrap {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: #0b0b0f;
    width: 100%;
}
.th-unified-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
}
.th-unified-table thead tr { background: rgba(255, 255, 255, 0.04); }
.th-unified-table th {
    padding: 12px 16px; color: #888; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.8px; font-size: 10px; white-space: nowrap; user-select: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.th-unified-table th:last-child { border-right: none; }
.th-unified-table th.sortable { cursor: pointer; transition: color 0.2s; }
.th-unified-table th.sortable:hover { color: #fff; }
.th-unified-table .th-sort-icon { margin-left: 4px; opacity: 0.4; font-size: 9px; }

.th-unified-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    border-right: 1px solid rgba(255, 255, 255, 0.03);
    vertical-align: middle; color: #d0d0d0;
}
.th-unified-table td:last-child { border-right: none; }
.th-unified-table tbody tr { transition: background 0.15s ease; }
.th-unified-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); transform: none !important; }
.th-unified-table tbody tr:last-child td { border-bottom: none; }

/* Empêcher tout mouvement au hover sur tous les tableaux */
.th-lm-table tbody tr:hover,
.th-unified-table tbody tr:hover { transform: none !important; }


/* ─────────────────────────────────────────
   2. VUE LISTE EMPORIUM
   ───────────────────────────────────────── */

@media (min-width: 1024px) {

    /* Conteneur global limité et centré */
    .th-list-wrapper.active {
        max-width: 1100px;
        margin: 0 auto;
    }

    /* === HEADER === */
    .th-list-wrapper.active .th-table-header {
        display: flex !important;
        align-items: center;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px 12px 0 0;
        padding: 0;
        height: 40px;
        font-size: 10px;
        font-weight: 700;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        width: 100%;
        box-sizing: border-box;
        font-family: 'Montserrat', sans-serif;
    }

    /* Toutes les cellules du header */
    .th-table-header > div {
        padding: 0 10px;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
        display: flex;
        align-items: center;
        height: 100%;
        box-sizing: border-box;
    }
    .th-table-header > div:last-child { border-right: none; }

    .th-sortable { cursor: pointer; transition: color 0.2s; user-select: none; }
    .th-sortable:hover { color: #fff; }
    .th-sort-icon { margin-left: 4px; opacity: 0.4; font-size: 9px; }

    /* Largeurs des colonnes header - % pour rester proportionnel */
    .th-col-img        { width: 52px; flex-shrink: 0; }
    .th-col-name       { flex: 1; min-width: 0; }
    .th-col-collection { flex: 1; min-width: 0; }
    .th-col-seller     { flex: 1; min-width: 0; }
    .th-col-stock      { width: 55px; flex-shrink: 0; justify-content: center; }
    .th-col-price      { width: 100px; flex-shrink: 0; justify-content: center; }
    .th-col-buy        { width: 130px; flex-shrink: 0; justify-content: center; }
    .th-col-offer      { width: 110px; flex-shrink: 0; justify-content: center; }

    /* === CONTENEUR LISTE === */
    #th-shop-grid.th-list-mode {
        display: block !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-top: none;
        border-radius: 0 0 12px 12px;
        background: #0b0b0f;
        width: 100%;
    }

    /* === LIGNE === */
    #th-shop-grid.th-list-mode .th-nft-card {
        flex-direction: row;
        height: 52px;
        padding: 0;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 0;
        background: transparent;
        transition: background 0.15s;
        width: 100%;
        box-sizing: border-box;
        align-items: center;
    }
    #th-shop-grid.th-list-mode .th-nft-card:hover { background: rgba(255, 255, 255, 0.04); transform: none; box-shadow: none; }
    #th-shop-grid.th-list-mode .th-nft-card:last-child { border-bottom: none; }

    /* Vignette */
    #th-shop-grid.th-list-mode .th-card-media {
        width: 52px; height: 52px; flex-shrink: 0;
        border-radius: 0; border: none; border-right: 1px solid rgba(255, 255, 255, 0.06);
        background: #000; display: flex; align-items: center; justify-content: center;
        margin: 0; aspect-ratio: auto;
    }

    /* Infos container */
    #th-shop-grid.th-list-mode .th-nft-info { padding: 0; flex-direction: row; align-items: center; flex: 1; min-width: 0; height: 100%; }
    #th-shop-grid.th-list-mode .th-info-details { flex-direction: row; flex: 1; align-items: center; gap: 0; min-width: 0; height: 100%; }

    /* Colonnes contenu - mêmes % que le header */
    #th-shop-grid.th-list-mode .th-detail-name {
        flex: 1; min-width: 0; font-size: 12px; font-weight: 700;
        padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
    }
    #th-shop-grid.th-list-mode .th-detail-col {
        flex: 1; min-width: 0; font-size: 10px; padding: 0 10px; margin: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
        overflow: hidden; text-overflow: ellipsis;
    }
    #th-shop-grid.th-list-mode .th-detail-seller-wrap {
        flex: 1; min-width: 0; padding: 0 10px; margin: 0;
        display: flex; align-items: center; gap: 5px;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
        overflow: hidden;
    }

    /* Stock - forcer affichage */
    #th-shop-grid.th-list-mode .th-detail-stock-badge { display: none !important; }
    #th-shop-grid.th-list-mode .th-detail-stock-list {
        display: flex !important;
        width: 55px; flex-shrink: 0; align-items: center; justify-content: center;
        color: #2ecc71; font-weight: 800; font-size: 12px;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* Actions */
    #th-shop-grid.th-list-mode .th-shop-actions {
        display: flex; flex-direction: row; align-items: center;
        margin: 0; padding: 0; border: none; gap: 0; flex-shrink: 0;
        width: auto; height: 100%;
    }
    #th-shop-grid.th-list-mode .th-action-price {
        width: 100px; flex-shrink: 0; margin: 0; padding: 0 10px;
        display: flex; align-items: center; justify-content: center;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
        white-space: nowrap;
    }
    #th-shop-grid.th-list-mode .th-price-eth { font-size: 12px; font-weight: 800; }
    #th-shop-grid.th-list-mode .th-live-xpf { display: none; }

    #th-shop-grid.th-list-mode .th-action-buy {
        width: 130px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
        padding: 0 6px;
    }
    #th-shop-grid.th-list-mode .th-input-qty { height: 28px !important; width: 38px !important; font-size: 11px !important; }
    #th-shop-grid.th-list-mode .th-btn-buy { height: 28px; padding: 0 10px; font-size: 10px; }

    #th-shop-grid.th-list-mode .th-action-offer {
        width: 110px; flex-shrink: 0; margin: 0; padding: 0 6px;
        display: flex; align-items: center; justify-content: center;
    }
    #th-shop-grid.th-list-mode .th-btn-offer { height: 28px; padding: 0 8px; font-size: 9px; white-space: nowrap; }
}


/* ─────────────────────────────────────────
   3. VUE LISTE OBSERVATOIRE
   ───────────────────────────────────────── */

.th-creators-grid.list-mode {
    display: flex; flex-direction: column; gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
    background: #0b0b0f; overflow: hidden;
    max-width: 860px; margin: 0 auto;
}
.list-mode .th-influencer-card {
    flex-direction: row; align-items: center; padding: 10px 20px; height: 58px;
    border-radius: 0; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: transparent; transition: background 0.15s;
}
.list-mode .th-influencer-card:last-child { border-bottom: none; }
.list-mode .th-influencer-card:hover { background: rgba(255, 255, 255, 0.04); transform: none; }
.list-mode .th-card-banner { display: none; }
.list-mode .th-card-body { margin-top: 0; padding: 0; text-align: left; display: flex; align-items: center; gap: 14px; flex: 1; }
.list-mode .th-card-avatar { width: 36px !important; height: 36px !important; min-width: 36px; min-height: 36px; flex-shrink: 0; border: none !important; background: none !important; margin: 0; object-fit: cover; }
.list-mode .th-card-name { justify-content: flex-start; font-size: 14px; }
.list-mode .th-card-stats { margin-bottom: 0; margin-left: auto; width: 100px; text-align: center; }
.list-mode .th-card-footer { border: none; padding: 0; background: transparent; flex-direction: row; align-items: center; width: 200px; margin-top: 0; flex-shrink: 0; }
.list-mode .th-item-count { width: 70px; text-align: right; margin-right: 12px; }
.list-mode .th-btn-enter { width: 110px; padding: 7px; font-size: 11px; }


/* ─────────────────────────────────────────
   4. VUE LISTE SHOWCASE (Profil Artisan)
   ───────────────────────────────────────── */

.th-showcase-grid.list-mode {
    display: flex; flex-direction: column; gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
    background: #0b0b0f; overflow: hidden;
}
.th-showcase-grid.list-mode .th-locked-card {
    flex-direction: row; align-items: stretch; border-radius: 0;
    border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); min-height: 100px;
}
.th-showcase-grid.list-mode .th-locked-card:last-child { border-bottom: none; }
.th-showcase-grid.list-mode .th-locked-card:hover { transform: none; }
.th-showcase-grid.list-mode .th-locked-media-blur,
.th-showcase-grid.list-mode .th-unlocked-media {
    width: 150px; aspect-ratio: auto; height: auto; min-height: 100px;
    border-right: 1px solid rgba(255, 255, 255, 0.06); border-bottom: none;
    display: flex; flex-direction: column; justify-content: center; flex-shrink: 0;
}
.th-showcase-grid.list-mode .th-card-info { flex-direction: row; align-items: center; padding: 12px 20px; flex: 1; gap: 20px; flex-wrap: wrap; justify-content: space-between; }
.th-showcase-grid.list-mode .th-card-text { flex: 1; min-width: 180px; display: block; margin-bottom: 0; }
.th-showcase-grid.list-mode .th-text-title { font-size: 15px; margin-bottom: 4px; }
.th-showcase-grid.list-mode .th-text-desc { -webkit-line-clamp: 2; }
.th-showcase-grid.list-mode .th-unlock-btn { flex-shrink: 0; min-width: 150px; width: auto; max-width: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; }


/* ─────────────────────────────────────────
   5. RESPONSIVE
   ───────────────────────────────────────── */

@media (max-width: 768px) {
    .th-unified-table-wrap { border-radius: 8px; }
    .th-unified-table { min-width: 560px; }

    .list-mode .th-influencer-card { height: auto; flex-direction: column; padding: 14px; text-align: center; }
    .list-mode .th-card-body { flex-direction: column; }
    .list-mode .th-card-footer { width: 100%; flex-direction: column; margin-top: 10px; }
    .list-mode .th-card-stats { margin-left: 0; width: 100%; }

    .th-showcase-grid.list-mode .th-locked-card { flex-direction: column; }
    .th-showcase-grid.list-mode .th-locked-media-blur,
    .th-showcase-grid.list-mode .th-unlocked-media { width: 100%; aspect-ratio: 16/9; height: auto; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
    .th-showcase-grid.list-mode .th-card-info { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px; }
    .th-showcase-grid.list-mode .th-card-text { width: 100%; min-width: 100%; }
    .th-showcase-grid.list-mode .th-unlock-btn { width: 100%; max-width: 100%; }
}


/* ─────────────────────────────────────────
   6. OVERRIDES - Reset bordures thème/Elementor
   ───────────────────────────────────────── */

/* Reset complet - le thème WordPress/Elementor ajoute des bordures sur table/th/td */
.th-unified-table,
.th-unified-table thead,
.th-unified-table tbody,
.th-unified-table tr,
.th-unified-table th,
.th-unified-table td {
    border: none !important;
    outline: none !important;
}

/* Puis on remet NOS bordures proprement */
.th-unified-table-wrap {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #0b0b0f !important;
}

.th-unified-table th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.th-unified-table th:last-child { border-right: none !important; }
.th-unified-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.03) !important;
}
.th-unified-table td:last-child { border-right: none !important; }
.th-unified-table tbody tr:last-child td { border-bottom: none !important; }

/* Conteneur Atelier */
.th-lm-card {
    border: none !important;
    background: transparent !important;
}

/* Conteneurs des shortcodes - pas de bordure (sauf formulaires Forge et sections fullwidth) */
.th-studio-card:not(#th-collection-form):not(#th-section-mint):not(#th-section-sell):not(#th-section-import):not(.th-fullwidth-card),
.elementor-widget-container > .th-studio-card:not(#th-collection-form):not(#th-section-mint):not(#th-section-sell):not(#th-section-import):not(.th-fullwidth-card),
.elementor-widget-container > .th-lm-card {
    border: none !important;
    outline: none !important;
}

/* ═══════════════════════════════════════════════
   🔧 RESPONSIVE PATCH - Tables
   ═══════════════════════════════════════════════ */

@media (max-width: 480px) {
    /* Tableaux - scroll horizontal fluide */
    .th-unified-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .th-unified-table {
        min-width: 500px !important;
    }
    .th-unified-table th,
    .th-unified-table td {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }

    /* List mode cards - empiler */
    .list-mode .th-influencer-card {
        padding: 12px !important;
    }
    .list-mode .th-card-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    .list-mode .th-card-name { font-size: 12px !important; }
    .list-mode .th-btn-enter { width: 100% !important; }
}