/* ── CARTE modpack ─────────────────────────────────────────────────── */
a.modpack-card,
div.modpack-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    padding: 0.875rem 1.25rem;
    text-decoration: none;
    color: var(--text-light);
    transition: color var(--duration-slow);
    cursor: pointer;
}

[data-theme="dark"] a.modpack-card,
[data-theme="dark"] div.modpack-card {
    color: var(--text-dark);
}

a.modpack-card:hover,
div.modpack-card:hover {
    text-decoration: none;
}

/* ── ICÔNE modpack ─────────────────────────────────────────────────── */
.modpack-add-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pill-bg-light);
    color: var(--violet);
    border: 2px solid var(--border-light);
    transition: border-color var(--duration-slow);
}

[data-theme="dark"] .modpack-add-icon {
    background: var(--pill-bg-dark);
    color: var(--violet-light);
    border-color: var(--border-dark);
}

/* ── NOM DU modpack ────────────────────────────────────────────────── */
.modpack-name {
    font-weight: 600;
    font-size: 0.95rem;
    min-width: 12rem;
}

/* ── ESPACE FLEXIBLE ───────────────────────────────────────────── */
.modpack-space {
    flex: 1;
}

/* ── PILLS COMMUNES ────────────────────────────────────────────── */
.modpack-number,
.modpack-used,
.modpack-dep {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;

}

/* ── NUMBER ───────────────────────────────────────────────────── */
.modpack-number {
    background: var(--pill-bg-light);
    color: var(--violet);
}

[data-theme="dark"] .modpack-number {
    background: var(--pill-bg-dark);
    color: var(--violet-light);
}

/* ── DÉPENDANCES ───────────────────────────────────────────────── */
.modpack-deps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;

}

.modpack-dep {
    background: rgba(245, 158, 11, 0.10);
    color: #92400e;
    text-decoration: none;
}

.modpack-dep:hover {
    background: rgba(245, 158, 11, 0.20);
    text-decoration: none;
}

[data-theme="dark"] .modpack-dep {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
}

[data-theme="dark"] .modpack-dep:hover {
    background: rgba(245, 158, 11, 0.25);
    color: #fcd34d;
}

/* ── UTILISÉ / NON UTILISÉ ─────────────────────────────────────── */
.modpack-used {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.modpack-used.non-utilise {
    background: rgba(107, 114, 128, 0.1);
    color: var(--muted-light);
}

[data-theme="dark"] .modpack-used.non-utilise {
    color: var(--muted-dark);
}

/* ── SUPPRIMER ─────────────────────────────────────────────────── */
.modpack-delete {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    text-decoration: none;
    transition: background var(--duration-fast), color var(--duration-fast);
}

.modpack-delete:hover {
    background: rgba(239, 68, 68, 0.18);
    text-decoration: none;
    color: #ef4444;
}

[data-theme="dark"] .modpack-delete {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

[data-theme="dark"] .modpack-delete:hover {
    background: rgba(239, 68, 68, 0.22);
    color: #fca5a5;
}