/* =========================================================================
   1ʳᵉ Compagnie d’Arc – Sarrebourg
   Feuille de style : Résultats front membres
   Fichier  : assets/css/results.css
   Date     : 30/12/2025
   Version  : 1.1.2
   Description :
   - Mise en forme de la page résultats pour les membres
   - Habillage des filtres, onglets, tableaux et graphique de progression
   - Ajustements responsive mobile
   ========================================================================= */

/* Légère respiration sous le header global */
.results-page {
    padding-top: 2rem;
    padding-bottom: 3rem;
    background-color: #f5f5f5;
}

/* Carte principale de la page résultats */
.results-card {
    background-color: #ffffff;
}

/* Titre + intro */
.results-card header h1 {
    font-size: 1.9rem;
    font-weight: 600;
}

.results-card header p {
    font-size: 0.95rem;
}

/* Formulaires (filtres + progression) */
#results-filters,
#progress-form {
    background-color: #f9fafb;
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.03);
    margin-bottom: 1rem;
}

#results-filters .form-label-sm,
#progress-form .form-label-sm {
    font-size: 0.8rem;
    margin-bottom: 0.15rem;
}

#results-filters .form-control-sm,
#results-filters .form-select-sm,
#progress-form .form-control-sm,
#progress-form .form-select-sm {
    font-size: 0.85rem;
}

/* Onglets */
#resultsTabs {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 0.75rem;
}

#resultsTabs .nav-link {
    font-size: 0.9rem;
    padding: 0.4rem 0.9rem;
    border-radius: 0.75rem 0.75rem 0 0;
}

#resultsTabs .nav-link.active {
    background-color: #ffffff;
    border-color: #dee2e6 #dee2e6 #ffffff;
}

/* Tableaux */
.results-card table.table {
    font-size: 0.85rem;
}

.results-card table.table thead th {
    white-space: nowrap;
}

.results-card table.table td,
.results-card table.table th {
    vertical-align: middle;
}

/* Petits textes dans les cellules */
.results-card .table .small {
    font-size: 0.78rem;
}

/* Bouton PDF */
.results-card a.btn-outline-secondary.btn-sm {
    padding-inline: 0.5rem;
    font-size: 0.75rem;
}

/* Bloc info progression */
#progress-info {
    min-height: 1.2rem;
}

/* Canvas du graphique */
#progress-chart {
    max-height: 260px;
}

@media (max-width: 767.98px) {
    #progress-chart {
        display: block;
        width: 100% !important;
        height: 360px !important;
        max-height: none !important;
        margin-top: 0.5rem;
        margin-bottom: 0.75rem;
	}
	
    .results-page {
        padding-top: 1.5rem;
        padding-bottom: 2rem;
    }

    .results-card {
        padding: 1.1rem !important;
    }

/* =========================================================================
   Accessibilité / confort
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================================
   Mobile: affichage en cartes (Résultats + Classement)
   ========================================================================= */

@media (max-width: 767.98px) {

    /* Masque naturellement les tables via d-none/d-md-block côté HTML, mais on garde un fallback */
    #table-results, #table-ranking {
        font-size: 0.9rem;
    }

    #results-cards .card,
    #ranking-cards .card {
        border-radius: 0.85rem;
    }

    #results-cards .badge,
    #ranking-cards .badge {
        font-weight: 500;
    }

    #results-cards .badge.text-bg-light,
    #ranking-cards .badge.text-bg-light {
        border: 1px solid rgba(0, 0, 0, 0.08);
    }

    /* Boutons un peu plus grands pour le tactile */
    #results-cards .btn.btn-sm,
    #ranking-cards .btn.btn-sm {
        padding: 0.35rem 0.6rem;
    }
}

/* =========================================================================
   Mobile cards: Progression (détail sous le graphique)
   ========================================================================= */

@media (max-width: 767.98px) {
  .progress-card {
    border-radius: 12px;
  }

  .progress-card .badge.text-bg-light {
    border: 1px solid rgba(0,0,0,.08);
  }

  .progress-card .card-body {
    padding-top: .6rem;
    padding-bottom: .6rem;
  }

  /* Boutons un peu plus grands pour le tactile */
  #progress-cards .btn.btn-sm {
    padding: 0.35rem 0.6rem;
  }
}