/* Pokeloutre Grading — components.css
   Composants génériques multi-pages extraits des CSS de page
   (2e passe design system, Lot 4). Chargé JUSTE APRÈS style.css,
   AVANT les CSS de page : les overrides page-spécifiques restants
   dans psa.css / listings.css / scan_cards.css gardent la main.
   Ordre interne = ordre de chargement historique des fichiers
   sources (scan_cards -> listings -> psa) pour préserver la cascade. */

/* ============================================================
   File d'attente de scans (.scan-queue / .qi-*) — utilisée par
   cards, psa_projects, psa_project, envoi_psa_project.
   (ex-scan_cards.css)
   ============================================================ */

.scan-queue[hidden],
.scan-queue-clear[hidden] {
    display:none;
}

.scan-queue {
    display:flex;
    flex-direction:column;
    gap:var(--space-8);
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:var(--space-12) var(--space-16);
}

.scan-queue-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-8);
}

.scan-queue-title {
    font-size:var(--text-sm);
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:0.5px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:var(--space-8);
}

.scan-queue-progress {
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius-pill);
    padding:var(--space-4) var(--space-8);
    font-size:var(--text-xs);
    font-weight:600;
    color:var(--text);
    font-variant-numeric:tabular-nums;
    text-transform:none;
    letter-spacing:0;
}

.scan-queue-clear {
    background:transparent;
    border:1px solid var(--border);
    color:var(--text-muted);
    border-radius:var(--radius-sm);
    padding:var(--space-4) var(--space-10);
    font-size:var(--text-xs);
    cursor:pointer;
}

.scan-queue-clear:hover {
    color:var(--text);
    border-color:var(--text-muted);
}

.scan-queue-list {
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:var(--space-4);
    max-height:240px;
    overflow-y:auto;
}

.scan-queue-item {
    display:grid;
    grid-template-columns:18px 1fr auto;
    gap:var(--space-10);
    align-items:center;
    padding:var(--space-6) var(--space-8);
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius-xs);
    font-size:var(--text-sm);
}

.scan-queue-item .qi-icon {
    width:14px;
    height:14px;
    border-radius:var(--radius-full);
    display:inline-block;
    flex-shrink:0;
}

.scan-queue-item[data-state="pending"]    { border-color:var(--border); }
.scan-queue-item[data-state="pending"] .qi-icon    { background:var(--text-muted); opacity:0.5; }

.scan-queue-item[data-state="uploading"],
.scan-queue-item[data-state="processing"] {
    border-color:color-mix(in srgb, var(--warn) 40%, transparent);
}
.scan-queue-item[data-state="uploading"] .qi-icon,
.scan-queue-item[data-state="processing"] .qi-icon {
    background:var(--warn);
    animation:scan-spin 0.8s linear infinite;
    border:2px solid var(--border);
    border-top-color:transparent;
}

.scan-queue-item[data-state="success"]    { border-color:color-mix(in srgb, var(--ok) 40%, transparent); }
.scan-queue-item[data-state="success"] .qi-icon    { background:var(--ok); }

.scan-queue-item[data-state="error"]      { border-color:color-mix(in srgb, var(--bad) 40%, transparent); }
.scan-queue-item[data-state="error"] .qi-icon      { background:var(--bad); }

.scan-queue-item .qi-name {
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}

.scan-queue-item .qi-status {
    color:var(--text-muted);
    font-size:var(--text-xs);
    text-align:right;
    white-space:nowrap;
}

.scan-queue-item[data-state="success"] .qi-status { color:var(--ok); }
.scan-queue-item[data-state="error"] .qi-status   { color:var(--bad); }

/* ============================================================
   Cards « projet » (.listing-projects-*, .lpc-*) — grid de
   projets utilisée par cards, psa_projects, envoi_psa.
   (ex-listings.css)
   ============================================================ */


/* ---------- Section "Lots scanner" (DEBT-007) ---------------------------*/

.listing-projects-section {
    margin-top:var(--section-gap);
    padding-top:var(--section-gap);
    border-top:1px solid var(--border);
}

.listing-projects-head h2 {
    margin:0 0 var(--space-4);
    font-size:var(--text-xl);
    color:var(--text);
}

.listing-projects-head p {
    margin:0 0 var(--space-16);
    max-width:720px;
}

.listing-projects-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:var(--space-12);
}

.listing-project-card {
    position:relative;  /* pour .lpc-actions absolute */
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xs);
    padding:0;  /* le padding passe sur .lpc-clickable */
    text-decoration:none;
    color:var(--text);
    transition:border-color 120ms ease, transform 120ms ease;
}

.listing-project-card:hover {
    border-color:var(--primary);
    transform:translateY(-1px);
}

/* Wrapper du contenu cliquable (l'ancien <a> entier) */
.lpc-clickable {
    display:flex;
    flex-direction:column;
    gap:var(--space-10);
    padding:var(--space-16);
    text-decoration:none;
    color:var(--text);
}

/* Boutons d'action (archive/delete) en haut à droite. Cachés par défaut,
   fade in au hover. Le badge WHATNOT reçoit un padding-right sur le head
   pour ne jamais empiéter (voir .lpc-head ci-dessous). */
.lpc-actions {
    position:absolute;
    top:8px;
    right:8px;
    display:flex;
    gap:var(--space-4);
    opacity:0;
    transition:opacity 120ms ease;
    z-index:2;
    pointer-events:none;
}
.listing-project-card:hover .lpc-actions,
.listing-project-card:focus-within .lpc-actions {
    opacity:1;
    pointer-events:auto;
}

/* Plus de padding-right réservé : le titre prend toute la largeur, et les
   3 boutons d'action n'apparaissent qu'au hover en overlay au top-right
   (acceptable que les boutons recouvrent brièvement le titre quand on
   interagit, puisque c'est le user qui pointe activement la card). */

/* ============================================================
   Card projet : layout repensé pour hiérarchie de lecture claire
   1) Titre (taille pleine, max 2 lignes)
   2) Chips (marketplace + live date + statut archivé) compactes
   3) Stats (scans + cartes + grille) ligne unique secondaire
   4) Foot (statut coloré + date création)
   ============================================================ */

.lpc-clickable {
    display:flex;
    flex-direction:column;
    gap:var(--space-10);
    padding:var(--space-16) var(--space-16);
}

.lpc-title {
    margin:0;
    font-size:var(--text-lg);
    font-weight:700;
    color:var(--text);
    line-height:1.3;
    /* 2 lignes max, ellipsis */
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    word-break:break-word;
}

.lpc-chips {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-6);
    align-items:center;
}

.lpc-chip {
    display:inline-flex;
    align-items:center;
    padding:var(--space-4) var(--space-8);
    font-size:var(--text-xs);
    font-weight:700;
    letter-spacing:0.4px;
    text-transform:uppercase;
    border-radius:var(--radius-sm);
    line-height:1.5;
    white-space:nowrap;
}

.lpc-chip-marketplace {
    background:var(--primary);
    color:var(--black);
}

.lpc-chip-live {
    background:color-mix(in srgb, var(--primary) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--primary) 40%, transparent);
    color:var(--primary);
    text-transform:none;
    font-weight:600;
    letter-spacing:0.2px;
}

/* ⏱ Durée du live (calcul auto depuis le bilan dépôt-vente) — index Lives.
   Variante -unknown (« ⏱ ? ») : pas de bilan horodaté sur le projet. */
.lpc-chip-hours {
    background:color-mix(in srgb, var(--accent-2) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--accent-2) 40%, transparent);
    color:var(--accent-2);
    text-transform:none;
    font-weight:600;
    letter-spacing:0.2px;
}
.lpc-chip-hours-unknown {
    background:color-mix(in srgb, var(--text-muted) 10%, transparent);
    border-color:color-mix(in srgb, var(--text-muted) 35%, transparent);
    color:var(--text-muted);
}

/* DEBT-014c : la chip Net Pokeloutre des tiles Listing carte réutilise
   la classe .lpc-chip-net définie dans psa.css (cohérence stricte avec
   l'index PSA). Pas de variant ici. */

/* Board unifié Listing + PSA : badge de type sur chaque vignette pour
   distinguer cartes à l'unité (Whatnot) et cartes graduées (PSA). */
.lpc-chip-type {
    text-transform:none;
    font-weight:700;
    letter-spacing:0.2px;
}
.lpc-chip-type-cards {
    background:color-mix(in srgb, var(--planche) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--planche) 45%, transparent);
    color:var(--planche);
}
.lpc-chip-type-psa {
    background:color-mix(in srgb, var(--accent) 16%, transparent);
    border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    color:var(--planche);
}
/* Types de projet vente boxbreak / scellé (sous-types des projets cartes). */
.lpc-chip-type-boxbreak {
    background:color-mix(in srgb, var(--warn) 15%, transparent);
    border:1px solid color-mix(in srgb, var(--warn) 50%, transparent);
    color:var(--warn);
}
.lpc-chip-type-scelle {
    background:color-mix(in srgb, var(--bad) 15%, transparent);
    border:1px solid color-mix(in srgb, var(--bad) 50%, transparent);
    color:var(--text);
}
/* BL-055 : badge "Scellé" sur les projets ayant des sealed_items rattachés.
   Vert pour distinguer visuellement des chips cards/psa. */
.lpc-chip-type-sealed {
    background:color-mix(in srgb, var(--ok) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--ok) 50%, transparent);
    color:var(--ok);
}
/* Filtre de type au-dessus du grid "Mes projets" */
.listing-projects-head-tools {
    display:inline-flex;
    align-items:center;
    gap:var(--space-16);
}
.listing-projects-typefilter select {
    background:var(--surface-2);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:var(--space-6) var(--space-10);
    font-size:var(--text-base);
    cursor:pointer;
}

.lpc-stats {
    line-height:1.3;
}

.lpc-foot {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:var(--space-8);
    padding-top:var(--space-8);
    border-top:1px dashed var(--border);
    flex-wrap:wrap;
}

/* Pastille statut colorée selon l'état */
.lpc-status {
    display:inline-block;
    padding:var(--space-4) var(--space-8);
    font-size:var(--text-xs);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.4px;
    border-radius:var(--radius-sm);
    color:var(--text-muted);
    background:color-mix(in srgb, var(--white) 5%, transparent);
    border:1px solid var(--border);
}
.lpc-status.lpc-status-scanning {
    color:var(--planche);
    background:color-mix(in srgb, var(--planche) 10%, transparent);
    border-color:color-mix(in srgb, var(--planche) 35%, transparent);
}
.lpc-status.lpc-status-identifying {
    color:var(--accent);
    background:color-mix(in srgb, var(--accent) 10%, transparent);
    border-color:color-mix(in srgb, var(--accent) 35%, transparent);
}
.lpc-status.lpc-status-editing {
    color:var(--primary);
    background:color-mix(in srgb, var(--primary) 10%, transparent);
    border-color:color-mix(in srgb, var(--primary) 35%, transparent);
}
.lpc-status.lpc-status-exported {
    color:var(--ok);
    background:color-mix(in srgb, var(--ok) 10%, transparent);
    border-color:color-mix(in srgb, var(--ok) 40%, transparent);
}
.lpc-action-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    padding:0;
    background:color-mix(in srgb, var(--black) 40%, transparent);
    border:1px solid var(--border);
    border-radius:var(--radius-xs);
    color:var(--text);
    cursor:pointer;
    font-size:var(--text-base);
    transition:background 120ms ease, border-color 120ms ease;
}
.lpc-action-btn:hover:not(:disabled) {
    background:color-mix(in srgb, var(--white) 8%, transparent);
    border-color:var(--primary);
}
.lpc-action-btn:disabled {
    opacity:0.4;
    cursor:not-allowed;
}
.lpc-action-del:hover:not(:disabled) {
    background:color-mix(in srgb, var(--bad) 18%, transparent);
    border-color:color-mix(in srgb, var(--bad) 60%, transparent);
}

/* Badge "Live du 16/05/2026" sur les cards projet — accent jaune subtil */
.lpc-livedate {
    font-size:var(--text-xs);
    padding:var(--space-4) var(--space-10);
    background:color-mix(in srgb, var(--primary) 8%, transparent);
    border:1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius:var(--radius);
    color:var(--primary);
    align-self:flex-start;
}

/* État archivé : card désaturée et atténuée */
.listing-project-card.is-archived {
    opacity:0.55;
    filter:grayscale(0.4);
}
.listing-project-card.is-archived:hover {
    opacity:0.85;
}
.lpc-archived-badge {
    display:inline-block;
    margin-left:var(--space-8);
    padding:var(--space-4) var(--space-6);
    font-size:var(--text-xs);
    font-weight:600;
    background:color-mix(in srgb, var(--white) 6%, transparent);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:0.3px;
}

/* Header row : titre + toggle "Voir les archivés" à droite */
.listing-projects-head-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-12);
    margin-bottom:var(--space-4);
}
.listing-projects-head-row h2 {
    margin:0;
}
.listing-projects-archived-toggle {
    display:inline-flex;
    align-items:center;
    gap:var(--space-6);
    padding:var(--space-6) var(--space-12);
    font-size:var(--text-sm);
    color:var(--text);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xs);
    cursor:pointer;
    user-select:none;
    transition:background 120ms ease;
}
.listing-projects-archived-toggle:hover {
    background:color-mix(in srgb, var(--white) 4%, transparent);
}
.listing-projects-archived-toggle input[type="checkbox"] {
    accent-color:var(--primary);
    cursor:pointer;
}

.lpc-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:var(--space-8);
}

.lpc-head strong {
    font-size:var(--text-base);
    color:var(--text);
}

.lpc-marketplace {
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:0.4px;
    color:var(--black);
    background:var(--primary);
    padding:var(--space-4) var(--space-6);
    border-radius:var(--radius-sm);
    font-weight:600;
}

.lpc-meta {
    display:flex;
    justify-content:space-between;
    color:var(--text-muted);
    font-size:var(--text-sm);
}

.lpc-foot {
    display:flex;
    justify-content:space-between;
    border-top:1px dashed var(--border);
    padding-top:var(--space-8);
}

.lpc-foot strong {
    color:var(--text);
}

.listing-projects-empty {
    grid-column:1 / -1;
    text-align:center;
    padding:var(--space-24);
    border:1px dashed var(--border);
    border-radius:var(--radius-xs);
}


/* ============================================================
   Modal « Modifier le projet » (.lp-edit-*) — psa_projects,
   cards, card_editor. (ex-listings.css)
   ============================================================ */

/* ============================================================
   Modal "Modifier le projet" (édition complète)
   Design : backdrop blur, dialog centré, animation fade+scale,
   form grid 2 cols, dark theme cohérent avec l'app.
   ============================================================ */

.lp-edit-modal {
    position:fixed;
    inset:0;
    /* --z-modal : au-dessus des drawers (--z-drawer), sous les toasts. */
    z-index:var(--z-modal);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--space-24);
    animation:lpEditFadeIn 180ms ease-out;
}
.lp-edit-modal[hidden] { display:none !important; }

@keyframes lpEditFadeIn {
    from { opacity:0; }
    to { opacity:1; }
}
@keyframes lpEditScaleIn {
    from { transform:scale(0.96); opacity:0; }
    to { transform:scale(1); opacity:1; }
}

.lp-edit-backdrop {
    position:absolute;
    inset:0;
    background:color-mix(in srgb, var(--bg) 70%, transparent);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    cursor:pointer;
}

.lp-edit-dialog {
    position:relative;
    width:100%;
    max-width:560px;
    max-height:90vh;
    overflow-y:auto;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 20px 60px color-mix(in srgb, var(--black) 60%, transparent);
    animation:lpEditScaleIn 200ms ease-out;
}

/* Header avec gradient subtil jaune Pokeloutre */
.lp-edit-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:var(--space-16) var(--space-24);
    border-bottom:1px solid var(--border);
    background:linear-gradient(
        to bottom,
        color-mix(in srgb, var(--primary) 4%, transparent),
        transparent
    );
}
.lp-edit-head h3 {
    margin:0;
    font-size:var(--text-lg);
    font-weight:600;
    color:var(--text);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:440px;
}
.lp-edit-close {
    background:none;
    border:none;
    color:var(--text-muted);
    font-size:var(--text-2xl);
    cursor:pointer;
    line-height:1;
    padding:var(--space-4) var(--space-10);
    border-radius:var(--radius-xs);
    transition:background 0.15s, color 0.15s;
}
.lp-edit-close:hover {
    background:color-mix(in srgb, var(--white) 6%, transparent);
    color:var(--text);
}

/* Form grid 2 colonnes, le nom et le statut wide sur 2 cols */
.lp-edit-form {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-16) var(--space-16);
    padding:var(--space-24);
}
.lp-edit-field {
    display:flex;
    flex-direction:column;
    gap:var(--space-6);
    min-width:0;
}
.lp-edit-field-wide {
    grid-column:1 / -1;
}
.lp-edit-field > span {
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:0.6px;
    font-weight:600;
    color:var(--text-muted);
}
.lp-edit-field input[type="text"],
.lp-edit-field input[type="number"],
.lp-edit-field input[type="date"],
.lp-edit-field select {
    background:var(--surface-2);
    border:1px solid var(--border);
    color:var(--text);
    padding:var(--space-10) var(--space-12);
    border-radius:var(--radius-xs);
    font-size:var(--text-base);
    font-family:inherit;
    transition:border-color 0.15s, background 0.15s;
    /* Native widgets (calendar picker, number spinners) en dark mode */
    color-scheme:dark;
}
.lp-edit-field input:focus,
.lp-edit-field select:focus {
    outline:none;
    border-color:var(--primary);
    background:var(--surface);
}
.lp-edit-field input[type="date"]::-webkit-calendar-picker-indicator {
    filter:invert(0.7);
    cursor:pointer;
    opacity:0.7;
    transition:opacity 0.15s, filter 0.15s;
}
.lp-edit-field input[type="date"]:hover::-webkit-calendar-picker-indicator,
.lp-edit-field input[type="date"]:focus::-webkit-calendar-picker-indicator {
    opacity:1;
    filter:invert(0.9);
}

.lp-edit-grid-inputs {
    display:flex;
    align-items:center;
    gap:var(--space-8);
}
.lp-edit-grid-inputs input {
    width:64px;
    text-align:center;
}
.lp-edit-grid-inputs span {
    color:var(--text-muted);
    font-size:var(--text-base);
}

.lp-edit-error {
    grid-column:1 / -1;
    margin:0;
    padding:var(--space-10) var(--space-12);
    background:color-mix(in srgb, var(--bad) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--bad) 40%, transparent);
    border-radius:var(--radius-xs);
    color:var(--bad);
    font-size:var(--text-sm);
}

.lp-edit-actions {
    grid-column:1 / -1;
    display:flex;
    justify-content:flex-end;
    gap:var(--space-10);
    margin-top:var(--space-6);
    padding-top:var(--space-16);
    border-top:1px solid var(--border);
}
.lp-edit-actions button {
    padding:var(--space-10) var(--space-16);
    font-size:var(--text-base);
    font-weight:600;
}

/* Responsive : mobile 1 col */
@media (max-width: 540px) {
    .lp-edit-form {
        grid-template-columns:1fr;
    }
    .lp-edit-field-wide {
        grid-column:1;
    }
}

/* ============================================================
   Chips PSA partagés (.lpc-chip-exported) — psa_projects, cards.
   (ex-psa.css)
   ============================================================ */

/* =========================================================================
   Index des projets PSA — chips spécifiques (en plus de listings.css).
   On garde la même grammaire visuelle que Listing carte ; on ajoute juste
   un chip "Exporté" et un badge meta pour la page projet.
   ========================================================================= */

.lpc-chip-exported {
    background:color-mix(in srgb, var(--ok) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--ok) 50%, transparent);
    color:var(--ok);
    text-transform:none;
    font-weight:600;
    letter-spacing:0.2px;
}

/* ============================================================
   DEBT-013/014e : Calcul commission dépôt vente (.psa-depot-*)
   — psa_project ET listing_project. (ex-psa.css)
   ============================================================ */

/* =========================================================================
   DEBT-013 : Calcul commission dépôt vente (page projet PSA)
   - Formulaire upload + stats summary (4 cards) + table par groupe
   - Net Pokeloutre en accent jaune dans la 4ᵉ stat
   ========================================================================= */

.psa-depot-section {
    margin-top:var(--space-24);
}

.psa-depot-form {
    margin-top:var(--space-12);
}

.psa-depot-form-row {
    display:flex;
    gap:var(--space-12);
    flex-wrap:wrap;
    align-items:flex-end;
}

.psa-depot-form-row .field {
    flex:1;
    min-width:180px;
}

.psa-depot-form-actions {
    display:flex;
    gap:var(--space-8);
    align-items:flex-end;
    padding-bottom:var(--space-4);
}
/* Pulse léger sur le bouton "Calculer" quand on vient de choisir un CSV :
   feedback visuel discret pour signaler "OK fichier capté, clique là". */
@keyframes psa-depot-pulse {
    0%   { box-shadow:0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent); }
    70%  { box-shadow:0 0 0 10px color-mix(in srgb, var(--primary) 0%, transparent); }
    100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); }
}
.psa-depot-form-actions .btn-primary.is-pulse {
    animation:psa-depot-pulse 0.9s ease-out 0s 2;
}

.psa-depot-error {
    margin-top:var(--space-10);
    padding:var(--space-10) var(--space-12);
    background:color-mix(in srgb, var(--bad) 8%, transparent);
    border:1px solid color-mix(in srgb, var(--bad) 40%, transparent);
    border-radius:var(--radius-sm);
    color:var(--bad);
    font-size:var(--text-base);
}

.psa-depot-status {
    margin-top:var(--space-10);
    padding:var(--space-10) var(--space-12);
    background:color-mix(in srgb, var(--planche) 8%, transparent);
    border:1px solid color-mix(in srgb, var(--planche) 40%, transparent);
    border-radius:var(--radius-sm);
    color:var(--planche);
    font-size:var(--text-base);
    font-family:ui-monospace, "SF Mono", Menlo, monospace;
    white-space:pre-wrap;
    line-height:1.5;
}

/* --- Stats (4 cards en row) --- */

.psa-depot-stats {
    margin-top:var(--space-16);
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:var(--space-12);
}

.psa-depot-stat {
    padding:var(--space-16) var(--space-16);
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    display:flex;
    flex-direction:column;
    gap:var(--space-4);
}

.psa-depot-stat-label {
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--text-muted);
}

.psa-depot-stat-value {
    font-size:var(--text-2xl);
    font-weight:700;
    color:var(--text);
    line-height:1.1;
}

.psa-depot-stat-sub {
    font-size:var(--text-xs);
    color:var(--text-muted);
}

/* Coloration des 4 stats — Pokeloutre net en accent jaune, le reste sobre */
.psa-depot-stat-pokeloutre { border-left:3px solid var(--planche); }
.psa-depot-stat-depot      { border-left:3px solid var(--warn); }
.psa-depot-stat-commission { border-left:3px solid var(--bad); }
.psa-depot-stat-total {
    border-left:3px solid var(--primary);
    background:color-mix(in srgb, var(--primary) 5%, transparent);
}
.psa-depot-stat-total .psa-depot-stat-value {
    color:var(--primary);
}

/* --- Table par groupe --- */

.psa-depot-groups-wrap {
    margin-top:var(--space-16);
    overflow-x:auto;
}

.psa-depot-groups-table {
    width:100%;
    border-collapse:collapse;
    font-size:var(--text-base);
}

.psa-depot-groups-table th,
.psa-depot-groups-table td {
    padding:var(--space-8) var(--space-12);
    text-align:left;
    border-bottom:1px solid var(--border);
    vertical-align:middle;
}

.psa-depot-groups-table th {
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--text-muted);
    font-weight:600;
    border-bottom:1px solid var(--border);
}

.psa-depot-groups-table td {
    font-variant-numeric:tabular-nums;
}

.psa-depot-groups-table input[type="number"] {
    width:70px;
    padding:var(--space-4) var(--space-6);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-xs);
    color:var(--text);
    font-family:inherit;
    font-size:var(--text-base);
    text-align:right;
}

.psa-depot-groups-table input[type="number"]:focus {
    outline:1px solid var(--primary);
    outline-offset:-1px;
}

.psa-depot-group-label {
    min-width:200px;
}

.psa-depot-recompute-row td {
    border-bottom:none;
    padding-top:var(--space-16);
}

.psa-depot-recompute-hint {
    margin-top:var(--space-8);
    padding:var(--space-8) var(--space-12);
    background:var(--surface-2);
    border-radius:var(--radius-sm);
    line-height:1.4;
}

/* =========================================================================
   DEBT-014e : Panneau dépliable par groupe avec liste des cartes.
   Le toggle (chevron) ouvre une 2e <tr> sous la ligne du groupe avec un
   tableau interne scrollable verticalement (cap ~280px).
   ========================================================================= */

.psa-depot-toggle {
    appearance:none;
    background:transparent;
    border:none;
    color:var(--muted, var(--text-muted));
    cursor:pointer;
    padding:var(--space-4) var(--space-6);
    margin-right:var(--space-6);
    font-size:var(--text-xs);
    line-height:1;
    border-radius:var(--radius-sm);
    vertical-align:middle;
    transition:color 0.15s ease, background 0.15s ease;
}

.psa-depot-toggle:hover {
    color:var(--text);
    background:var(--surface-2);
}

.psa-depot-toggle .psa-depot-chevron {
    display:inline-block;
    transition:transform 0.15s ease;
    font-size:var(--text-xs);
}

.psa-depot-toggle[aria-expanded="true"] {
    color:var(--accent, var(--primary));
}

.psa-depot-detail-row {
    background:var(--surface-2);
}

.psa-depot-detail-cell {
    padding:0 !important;
    border-top:1px solid var(--border) !important;
}

.psa-depot-detail-head {
    padding:var(--space-8) var(--space-16) var(--space-4);
    border-bottom:1px solid var(--border);
}

.psa-depot-detail-scroll {
    max-height:280px;
    overflow-y:auto;
    overflow-x:hidden;
    /* Force la scrollbar à droite (jamais sur la gauche) */
    direction:ltr;
}

.psa-depot-detail-table {
    width:100%;
    border-collapse:collapse;
    font-size:var(--text-sm);
}

.psa-depot-detail-table thead {
    position:sticky;
    top:0;
    background:var(--surface);
    z-index:1;
}

.psa-depot-detail-table th,
.psa-depot-detail-table td {
    padding:var(--space-6) var(--space-16);
    border-bottom:1px solid var(--border);
    text-align:left;
}

.psa-depot-detail-table tr:last-child td {
    border-bottom:none;
}

.psa-depot-detail-table th {
    color:var(--muted, var(--text-muted));
    font-weight:600;
    text-transform:uppercase;
    font-size:var(--text-xs);
    letter-spacing:0.05em;
}

.psa-depot-line-num {
    text-align:right !important;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

.psa-depot-line-name {
    max-width:0;  /* trick pour que le ellipsis fonctionne dans une table */
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Scrollbar custom (WebKit) pour rester cohérente avec le thème dark */
.psa-depot-detail-scroll::-webkit-scrollbar {
    width:8px;
}
.psa-depot-detail-scroll::-webkit-scrollbar-track {
    background:transparent;
}
.psa-depot-detail-scroll::-webkit-scrollbar-thumb {
    background:var(--border);
    border-radius:var(--radius-xs);
}
.psa-depot-detail-scroll::-webkit-scrollbar-thumb:hover {
    background:var(--muted, var(--btn-border));
}


/* ============================================================
   Vue d'ensemble PSA (.psa-overview-*, .lpc-chip-net) —
   psa_projects, cards. (ex-psa.css)
   ============================================================ */

/* =========================================================================
   DEBT-013 : Bandeau "Vue d'ensemble" en haut de l'index PSA.
   Agrège les calcs dépôt vente de tous les projets pour une vue globale.
   Visible uniquement si au moins 1 projet a un calc effectué.
   ========================================================================= */

.psa-overview-stats {
    margin:var(--space-16) 0 var(--space-24);
    padding:var(--space-16) var(--space-24);
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
}

.psa-overview-head {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:var(--space-12);
    margin-bottom:var(--space-16);
    padding-bottom:var(--space-10);
    border-bottom:1px solid var(--border);
}

.psa-overview-head h2 {
    margin:0;
    font-size:var(--text-base);
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--text-muted);
    font-weight:600;
}

.psa-overview-grid {
    display:grid;
    /* 4 colonnes fixes en desktop → grille 4×2 toujours pleine (8 stats).
       Responsive:2 colonnes en tablette, 1 en mobile. */
    grid-template-columns: repeat(4, 1fr);
    gap:var(--space-10);
}

@media (max-width: 1200px) {
    .psa-overview-grid {
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .psa-overview-grid {
        grid-template-columns:1fr;
    }
}

.psa-overview-stat {
    padding:var(--space-12) var(--space-16);
    background:var(--surface);
    border:1px solid var(--border);
    border-left:3px solid var(--border);
    border-radius:var(--radius-sm);
    display:flex;
    flex-direction:column;
    gap:var(--space-4);
}

.psa-overview-stat-label {
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--text-muted);
}

.psa-overview-stat-value {
    font-size:var(--text-2xl);
    font-weight:700;
    color:var(--text);
    line-height:1.15;
    font-variant-numeric:tabular-nums;
}

.psa-overview-stat-sub {
    font-size:var(--text-xs);
    color:var(--text-muted);
    line-height:1.3;
}

/* Heroes en accent jaune Pokeloutre */
.psa-overview-stat-hero {
    border-left:3px solid var(--primary);
    background:color-mix(in srgb, var(--primary) 5%, transparent);
}
.psa-overview-stat-hero .psa-overview-stat-value {
    color:var(--primary);
}

/* Pokeloutre (bleu) et Dépôt (brun-orange) pour distinguer les 2 univers */
.psa-overview-stat-pokeloutre { border-left-color:var(--planche); }
.psa-overview-stat-depot      { border-left-color:var(--warn); }

/* --- Chip "Net Pokeloutre" sur la card de l'index PSA --- */

.lpc-chip-net {
    background:color-mix(in srgb, var(--primary) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--primary) 50%, transparent);
    color:var(--primary);
    text-transform:none;
    font-weight:700;
    letter-spacing:0.2px;
    cursor:help; /* indique qu'il y a un tooltip */
}

/* Tooltip natif sur title= attribute — pas de CSS spécifique nécessaire
   (le navigateur s'en charge). On garde le selector pour pouvoir styler
   un tooltip custom plus tard si besoin. */


/* ============================================================
   DEBT-014b/c : Réconciliation + snapshots (.lp-depot-reconcile-*,
   .lp-snap-*) — psa_project ET listing_project. (ex-psa.css)
   ============================================================ */

/* =========================================================================
   DEBT-014b : Réconciliation net réel vs théorique (Listing carte)
   Bloc qui apparaît sous les 4 cartes bilan après un calc dépôt vente.
   ========================================================================= */

.lp-depot-reconcile {
    margin-top:var(--space-16);
    padding:var(--space-16) var(--space-16);
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius);
    display:flex;
    flex-direction:column;
    gap:var(--space-12);
}

.lp-depot-reconcile-row {
    display:grid;
    grid-template-columns:minmax(260px, 1.4fr) 1fr 1fr;
    gap:var(--space-16);
    align-items:stretch;
}

.lp-depot-reconcile-input,
.lp-depot-reconcile-result {
    display:flex;
    flex-direction:column;
    gap:var(--space-6);
    padding:var(--space-12) var(--space-16);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
}

.lp-depot-reconcile-input {
    border-left:3px solid var(--primary);
}

.lp-depot-reconcile-extra {
    border-left:3px solid var(--warn);
}

.lp-depot-reconcile-real {
    border-left:3px solid var(--ok);
}

.lp-depot-reconcile-label {
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--text-muted);
    font-weight:600;
}

.lp-depot-reconcile-value {
    font-size:var(--text-2xl);
    font-variant-numeric:tabular-nums;
    color:var(--text);
    line-height:1.1;
}

.lp-depot-reconcile-extra .lp-depot-reconcile-value {
    color:var(--warn);
}

.lp-depot-reconcile-real .lp-depot-reconcile-value {
    color:var(--ok);
}

.lp-depot-reconcile-hint {
    font-size:var(--text-xs);
    color:var(--text-muted);
    line-height:1.35;
}

.lp-depot-reconcile-input-wrap {
    display:flex;
    align-items:center;
    gap:var(--space-6);
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:0 var(--space-10);
}

.lp-depot-reconcile-input-wrap input[type="number"] {
    background:transparent;
    border:none;
    color:var(--text);
    font-size:var(--text-xl);
    font-variant-numeric:tabular-nums;
    padding:var(--space-8) 0;
    width:100%;
    outline:none;
    font-weight:600;
}

.lp-depot-reconcile-input-wrap input[type="number"]::-webkit-outer-spin-button,
.lp-depot-reconcile-input-wrap input[type="number"]::-webkit-inner-spin-button {
    /* Garde les flèches:utile pour ajuster au centime */
    opacity: 0.5;
}

.lp-depot-reconcile-currency {
    color:var(--text-muted);
    font-weight:600;
    font-size:var(--text-base);
}

.lp-depot-reconcile-note-field {
    display:flex;
    flex-direction:column;
    gap:var(--space-4);
}

.lp-depot-reconcile-note-field input[type="text"] {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text);
    padding:var(--space-8) var(--space-12);
    font-size:var(--text-base);
    outline:none;
}

.lp-depot-reconcile-note-field input[type="text"]:focus {
    border-color:var(--primary);
}

.lp-depot-reconcile-status {
    margin:0;
    font-size:var(--text-sm);
    color:var(--text-muted);
}

.lp-depot-reconcile-status.is-saved {
    color:var(--ok);
}

.lp-depot-reconcile-status.is-error {
    color:var(--bad);
}

/* Responsive : sur petit écran on empile */
@media (max-width: 900px) {
    .lp-depot-reconcile-row {
        grid-template-columns:1fr;
    }
}

/* =========================================================================
   DEBT-014c v2 : Snapshots INLINE (simplifié — tout server-side)
   Apparait DANS le form du calcul commission, pas en bloc séparé.
   ========================================================================= */

.lp-snap-inline {
    margin-top:var(--space-12);
    display:flex;
    flex-direction:column;
    gap:var(--space-8);
}

.lp-snap-save-form {
    display:flex;
    gap:var(--space-8);
    align-items:center;
    padding:var(--space-10) var(--space-12);
    background:var(--surface);
    border:1px solid var(--primary);
    border-radius:var(--radius-sm);
}

.lp-snap-save-form input[type="text"] {
    flex:1;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text);
    padding:var(--space-8) var(--space-12);
    font-size:var(--text-base);
    outline:none;
}

.lp-snap-save-form input[type="text"]:focus {
    border-color:var(--primary);
}

.lp-snap-status {
    margin:0;
    font-size:var(--text-sm);
    padding:var(--space-6) var(--space-10);
    border-radius:var(--radius-sm);
}

.lp-snap-status.is-saved {
    background:color-mix(in srgb, var(--ok) 10%, transparent);
    color:var(--ok);
}

.lp-snap-status.is-error {
    background:color-mix(in srgb, var(--bad) 10%, transparent);
    color:var(--bad);
}

.lp-snap-list {
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:var(--space-4);
    max-height:280px;
    overflow-y:auto;
}

.lp-snap-list:empty {
    display:none;
}

.lp-snap-item {
    display:grid;
    grid-template-columns:minmax(200px, 1.5fr) auto auto;
    gap:var(--space-12);
    align-items:center;
    padding:var(--space-8) var(--space-12);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    transition:border-color 120ms ease;
}

.lp-snap-item:hover {
    border-color:var(--text-muted);
}

.lp-snap-item-main {
    display:flex;
    gap:var(--space-12);
    align-items:baseline;
    min-width:0;  /* permet l'ellipsis */
}

.lp-snap-item-name {
    font-weight:600;
    font-size:var(--text-base);
    color:var(--text);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    flex:1 1 auto;
    min-width:0;
}

.lp-snap-item-value {
    font-size:var(--text-base);
    font-variant-numeric:tabular-nums;
    color:var(--text);
    flex:0 0 auto;
    white-space:nowrap;
}

.lp-snap-item-value.lp-snap-real {
    color:var(--ok);
}

.lp-snap-item-meta {
    font-size:var(--text-xs);
    color:var(--text-muted);
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.lp-snap-item-actions {
    display:flex;
    gap:var(--space-4);
    justify-content:flex-end;
}

.lp-snap-item-actions button {
    padding:var(--space-4) var(--space-10);
    font-size:var(--text-sm);
    background:transparent;
    border:1px solid var(--border);
    color:var(--text-muted);
    border-radius:var(--radius-sm);
    cursor:pointer;
    transition:all 120ms ease;
}

.lp-snap-item-actions button:hover {
    color:var(--text);
    border-color:var(--text-muted);
}

.lp-snap-item-actions .lp-snap-load:hover {
    border-color:var(--primary);
    color:var(--primary);
}

.lp-snap-item-actions .lp-snap-delete:hover {
    border-color:var(--bad);
    color:var(--bad);
}

@media (max-width: 700px) {
    .lp-snap-item {
        grid-template-columns:1fr;
        gap:var(--space-4);
    }
    .lp-snap-item-actions {
        justify-content:flex-start;
    }
}