/* Composants réutilisables (gabarits naturedex/components/, balises {% load components %}). */

/* Étoiles de difficulté : {% difficulty_stars %} */
.nd-stars {
    white-space: nowrap;
}

.nd-stars--easy { color: #73d216; }
.nd-stars--average { color: #f57900; }
.nd-stars--hard { color: #ef2929; }
.nd-stars--insane { color: #5c3566; }

/* Stades de vie observés : {% stage_strip %} */
.nd-stage-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.nd-stage {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nd-radius-pill);
    background: #eef1f5;
    color: #92a0ae;
    border: var(--nd-border-soft);
}

.nd-stage.is-active {
    background: linear-gradient(180deg, #d7f4df 0%, #b9ebc9 100%);
    color: #0d6b32;
    border-color: rgba(13, 107, 50, 0.18);
}

.nd-stage-strip--sm {
    gap: 0.4rem;
}

.nd-stage-strip--sm .nd-stage {
    width: 2rem;
    height: 2rem;
}

/* Jauge de progression : {% progress_gauge %}, élément <progress> natif (aucun style en ligne).
   Couleur de la barre : --nd-gauge-fill. Les pseudo-éléments WebKit et Firefox restent
   dans des règles séparées (un sélecteur inconnu invalide toute la règle). */
.nd-gauge {
    --nd-gauge-fill: linear-gradient(90deg, #52b788 0%, #2d6a4f 100%);
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 0.65rem;
    border: 0;
    border-radius: var(--nd-radius-pill);
    background: rgba(var(--nd-ink-rgb), 0.08);
    overflow: hidden;
}

.nd-gauge::-webkit-progress-bar {
    border-radius: inherit;
    background: transparent;
}

.nd-gauge::-webkit-progress-value {
    border-radius: inherit;
    background: var(--nd-gauge-fill);
}

.nd-gauge::-moz-progress-bar {
    border-radius: inherit;
    background: var(--nd-gauge-fill);
}

/* Pastille d'information (date, lieu, méthode…) : <span class="badge rounded-pill nd-pill"> */
.nd-pill {
    background: #eef6ee;
    color: #1f5133;
    border: 1px solid rgba(31, 81, 51, 0.08);
}

/* Tuile de statistique : libellé discret et valeur */
.nd-stat {
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    background: rgba(246, 250, 246, 0.95);
    border: 1px solid rgba(17, 24, 39, 0.06);
}

/* Carte d'une espèce : naturedex/components/species_card.html */
.nd-species-card {
    width: 100%;
    min-height: 100%;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 30px rgba(18, 43, 25, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.nd-species-card.is-observed {
    position: relative;
    border-width: 3px;
    border-color: rgba(25, 135, 84, 0.72);
    background: linear-gradient(180deg, #ffffff 0%, #eefaf1 100%);
    box-shadow: 0 14px 34px rgba(18, 43, 25, 0.14), 0 0 0 4px rgba(25, 135, 84, 0.16);
}

.nd-species-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(18, 43, 25, 0.16);
}

.nd-species-card .card-body {
    min-height: 15.5rem;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.nd-species-card .nd-stage-strip {
    margin: 0.65rem 0 0.45rem;
}

.nd-species-card__media {
    background: #edf3ee;
    overflow: hidden;
}

.nd-species-card__image-link {
    display: block;
    height: 100%;
}

.nd-species-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* image entière (règle `.card img` de base.css) */
    transition: transform 0.2s ease;
}

.nd-species-card:hover .nd-species-card__image {
    transform: scale(1.04);
}

.nd-species-card__status {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    left: auto;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: var(--nd-radius-pill);
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    background: rgba(25, 135, 84, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 0.35rem 0.85rem rgba(var(--nd-ink-rgb), 0.16);
    backdrop-filter: blur(2px);
}

.nd-species-card__title {
    min-height: 3rem;
    margin-bottom: 0.35rem;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
}

.nd-species-card__scientific {
    min-height: 2.5rem;
    display: -webkit-box;
    overflow: hidden;
    color: #6b7280;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.25;
}

.nd-species-card__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
}

.nd-species-card__actions .btn {
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border-radius: var(--nd-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Écrans tactiles : boutons de 44 px (voir base.css). */
@media (pointer: coarse) {
    .nd-species-card__actions {
        flex-wrap: wrap;
    }

    .nd-species-card__actions .btn {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* Bande de vignettes photo */
.nd-photo-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Vignettes recadrées en carré : sélecteurs plus forts que `.card img` (base.css, contain). */
.nd-photo-strip .nd-photo-strip__thumb {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 0.85rem;
    background: #edf3ee;
}

/* Carte d'une observation : naturedex/components/observation_card.html */
.nd-observation-card {
    border: 1px solid rgba(17, 24, 39, 0.06);
    border-radius: 1.3rem;
    background: #fff;
    box-shadow: 0 14px 40px rgba(var(--nd-ink-rgb), 0.09);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.nd-observation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 54px rgba(var(--nd-ink-rgb), 0.14);
}

.nd-observation-card.is-pending {
    background: #fff8e1;
    border-color: rgba(255, 193, 7, 0.34);
}

.nd-observation-card.is-rejected {
    background: #fff1f2;
    border-color: rgba(220, 53, 69, 0.22);
}

.nd-observation-card.is-needs-changes {
    background: #fff8e8;
    border-color: rgba(255, 193, 7, 0.3);
}

.nd-observation-card.is-out-of-score {
    background: #e2e6ea;
    border-color: rgba(73, 80, 87, 0.34);
    opacity: 0.74;
}

.nd-observation-card .nd-observation-card__preview {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 1rem;
    background: #edf3ee;
}

/* Au-dessus du lien qui couvre la carte (.stretched-link) : liens, boutons,
   et éléments dont l'infobulle (title) doit rester visible au survol. */
.nd-observation-card__above,
.nd-observation-card .nd-stage,
.nd-observation-card .nd-photo-strip__thumb {
    position: relative;
    z-index: 2;
}

/* Écrans tactiles : zone de clic du nom de l'espèce agrandie, sans décaler la carte. */
@media (pointer: coarse) {
    a.nd-observation-card__above {
        padding-block: 0.75rem;
        margin-block: -0.75rem;
    }
}

.nd-observation-card__media {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Renommage en place (tribu, personnes) */
.nd-inline-rename {
    max-width: 420px;
}

.nd-inline-rename--sm {
    max-width: 360px;
}