/* xdt-codes/style.css — styles spécifiques (shared.css chargé en premier) */

.app-container {
    max-width: 1000px; margin: 0 auto; padding: 2rem 1.5rem;
    display: flex; flex-direction: column; gap: 1.5rem;
}

#codes-grid, #codes-expired-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 720px) {
    #codes-grid, #codes-expired-grid { grid-template-columns: 1fr; }
}

.code-card { gap: .8rem; }

.code-value {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    letter-spacing: .03em;
    word-break: break-all;
}

.copy-btn {
    margin-left: auto; flex-shrink: 0;
    background: rgba(255,255,255,.06); border: 1px solid var(--border-color);
    color: var(--text-muted); border-radius: 8px; padding: .4rem .6rem;
    cursor: pointer; transition: all .2s;
}
.copy-btn:hover { color: var(--primary); border-color: var(--border-color-active); }
.copy-btn.copied { color: var(--success); border-color: var(--success); }

.rewards-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.reward-pill {
    background: rgba(255,255,255,.04); border: 1px solid var(--border-color);
    color: var(--text-muted); font-size: .76rem; padding: .25rem .6rem; border-radius: 999px;
}

.deadline-full { color: var(--text-muted); font-size: .72rem; }
.countdown-soon { color: var(--gold) !important; font-weight: 700; }

.kind-special { filter: drop-shadow(0 0 6px rgba(0,242,254,.4)); }

/* ---------- Code réclamé (utilisateur connecté) ---------- */
.code-card.claimed { opacity: .5; }
.code-card.claimed:hover { opacity: .75; }
.copy-btn.is-claimed { color: var(--success); border-color: var(--success); background: rgba(0,230,118,.1); }
.claimed-badge {
    display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
    color: var(--success); font-size: .74rem; font-weight: 600;
}

/* ---------- Section codes expirés (admin uniquement) ---------- */
.codes-expired-card { border-color: rgba(255,23,68,.25); }
.codes-expired-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--danger); }
.codes-expired-title i { color: var(--danger); }
.codes-admin-only {
    font-size: .68rem; color: var(--text-muted); font-weight: 400;
    background: rgba(255,255,255,.05); padding: .15rem .55rem; border-radius: 999px;
}
.code-card.expired { border-color: rgba(255,23,68,.2); opacity: .8; }