/*
 * Composants CSS partagés mobile-first — socle de la refonte (item 24).
 * Généralisés à partir des meilleurs patterns déjà observés dans les
 * templates existants, pour ne plus dupliquer les mêmes media queries
 * page par page. Dépend de tokens.css (variables --color-*/--space-*/...).
 */

/* ---------------------------------------------------------------------
   .stats-bar — grille auto-fit pour une rangée de tuiles de statistiques,
   s'empile naturellement sur petit écran sans media query dédiée par page.
   ------------------------------------------------------------------- */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

@media (max-width: 768px) {
    .stats-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
}

/* ---------------------------------------------------------------------
   .table-scroll — enveloppe une <table> large pour un défilement
   horizontal tactile plutôt qu'un débordement/tassement sur mobile.
   Pattern déjà éprouvé dans analyze.html, généralisé ici.
   ------------------------------------------------------------------- */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.table-scroll table {
    width: 100%;
    border-collapse: collapse;
}

@media (max-width: 768px) {
    .table-scroll table {
        min-width: 600px;
    }

    /* Modifier for tables that already drop columns on mobile (e.g. via
       .hide-mobile) — skip the forced min-width so they actually shrink
       to the viewport instead of just gaining a needless scrollbar. */
    .table-scroll.table-scroll--compact table {
        min-width: 0;
    }
}

/* ---------------------------------------------------------------------
   .chart-wrapper — conteneur à hauteur bornée pour un canvas Chart.js.
   À utiliser systématiquement avec la config JS `maintainAspectRatio:
   false` — ne jamais fixer la hauteur d'un canvas Chart.js directement
   ni laisser `maintainAspectRatio:true` sur mobile (cause du rendu cassé
   déjà constaté sur lap_detail.html).
   ------------------------------------------------------------------- */
.chart-wrapper {
    position: relative;
    width: 100%;
    height: 320px;
    min-height: 220px;
    max-height: 420px;
}

.chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 768px) {
    .chart-wrapper {
        height: 260px;
    }
}

@media (max-width: 480px) {
    .chart-wrapper {
        height: 220px;
    }
}

/* ---------------------------------------------------------------------
   .chart-tooltip-panel — tooltip externe pour un graphique Chart.js. Vit
   en flux normal, en sibling SOUS .chart-wrapper (jamais en position
   absolue par-dessus le canvas) : il ne peut donc jamais superposer le
   tracé, et ne partage aucune zone tactile avec le glisser-déposer du
   plugin de zoom déjà actif sur ces graphiques. Peuplé par
   createExternalTooltipHandler() (static/comdata/js/chart-external-tooltip.js)
   via options.plugins.tooltip.external.
   ------------------------------------------------------------------- */
.chart-tooltip-panel {
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    min-height: 2.75rem;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    font-size: 0.85rem;
    color: var(--color-text);
}

.chart-tooltip-panel.is-empty {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    font-style: italic;
}

.chart-tooltip-panel .ctp-title {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.chart-tooltip-panel .ctp-rows {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.chart-tooltip-panel .ctp-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.chart-tooltip-panel .ctp-swatch {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    flex: 0 0 auto;
}

@media (max-width: 480px) {
    .chart-tooltip-panel {
        font-size: 0.8rem;
        padding: var(--space-xs) var(--space-sm);
    }
}

/* ---------------------------------------------------------------------
   .tabs — rangée d'onglets desktop, avec bascule automatique vers un
   <select> déroulant sous 768px (.tabs-select). Généralisé à partir du
   pattern déjà existant dans analyze.html pour les infos véhicule.
   Marquage attendu :
     <div class="tabs" role="tablist"> <button class="tab-btn active" data-tab="...">…</button> ... </div>
     <select class="tabs-select">...</select>
   Le JS de la page doit synchroniser les deux (voir analyze.html).
   ------------------------------------------------------------------- */
.tabs {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 2px solid var(--color-border-light);
    margin-bottom: var(--space-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabs .tab-btn {
    background: none;
    border: none;
    padding: var(--space-sm) var(--space-md);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    min-height: var(--touch-target-min);
}

.tabs .tab-btn.active {
    color: var(--color-accent-end);
    border-bottom-color: var(--color-accent-start);
}

.tabs-select {
    display: none;
    width: 100%;
    margin-bottom: var(--space-lg);
}

@media (max-width: 768px) {
    .tabs {
        display: none;
    }

    .tabs-select {
        display: block;
    }
}

/* ---------------------------------------------------------------------
   .list-filter-bar — barre de recherche/filtres pour les pages de liste
   (sessions, pools, tracks, équipements, configurations, notes).
   ------------------------------------------------------------------- */
.list-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.list-filter-bar input[type="search"],
.list-filter-bar input[type="text"] {
    flex: 1 1 220px;
    min-height: var(--touch-target-min);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
}

@media (max-width: 768px) {
    /* Une seule ligne sur mobile plutôt qu'un empilement vertical (retour
       utilisateur : la barre prenait un "gros bloc" en colonne) — la
       recherche prend l'espace disponible, les filtres select se
       contentent de leur largeur de contenu. */
    .list-filter-bar {
        flex-wrap: nowrap;
    }

    .list-filter-bar input[type="search"],
    .list-filter-bar input[type="text"] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .list-filter-bar select {
        flex: 0 0 auto;
        width: auto;
        max-width: 40%;
    }
}

/* ---------------------------------------------------------------------
   select — base unique pour tous les <select> du site (remplace les
   nombreuses variantes locales .form-select/.form-control dispersées
   dans les templates). Flèche custom via appearance:none + SVG inline,
   couleur/radius/ombre alignés sur les tokens déjà utilisés par .btn et
   .action-menu-toggle. Les classes plus spécifiques (.tabs-select,
   .list-filter-bar select, .lap-type-select...) ne redéfinissent plus
   border/radius/padding : elles héritent de cette base et se limitent
   aux écarts de layout (largeur, marge, taille compacte).
   ------------------------------------------------------------------- */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
    width: auto;
    min-height: var(--touch-target-min);
    padding: var(--space-sm) calc(var(--space-lg) + 0.25rem) var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237f8c8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-sm) center;
    background-size: 14px;
    color: var(--color-text);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

select:hover {
    border-color: var(--color-accent);
}

select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(90, 111, 216, 0.15);
}

select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

select::-ms-expand {
    display: none;
}

/* ---------------------------------------------------------------------
   .action-menu — rangée d'actions par carte : une action principale
   toujours visible + un bouton "⋮" ouvrant un petit menu déroulant pour
   les actions secondaires (peu utilisées : suppression, réforme,
   définir par défaut...). Remplace l'ancien pattern "tous les boutons
   empilés en colonne sur mobile", qui prenait beaucoup de place pour des
   actions rarement utilisées.
   Marquage attendu :
     <div class="action-menu">
       <a/button class="btn ...">Action principale</a/button>
       <div class="action-menu-more">
         <button type="button" class="action-menu-toggle" aria-label="Plus d'actions">⋮</button>
         <div class="action-menu-dropdown">
           <a/button class="action-menu-item">…</a/button>
           <form>...<button class="action-menu-item">…</button></form>
         </div>
       </div>
     </div>
   Comportement (ouverture/fermeture/clic en dehors) géré par
   static/comdata/js/action-menu.js (chargé globalement par base.html).
   ------------------------------------------------------------------- */
.action-menu {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: var(--space-sm);
}

/* A whole card made clickable via data-card-href (see
   static/comdata/js/clickable_card.js) - just the pointer affordance,
   the click handling itself lives in that script. */
[data-card-href] {
    cursor: pointer;
}

.action-menu > .btn {
    flex: 1;
}

.action-menu-more {
    position: relative;
    flex: 0 0 auto;
}

.action-menu-toggle {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    color: var(--color-text);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.action-menu-toggle:hover {
    border-color: var(--color-accent-start);
    color: var(--color-accent-start);
}

.action-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 20;
    min-width: 180px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.action-menu-dropdown.open {
    display: flex;
    flex-direction: column;
}

.action-menu-dropdown form {
    margin: 0;
}

.action-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: none;
    background: none;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    min-height: var(--touch-target-min);
}

.action-menu-item + .action-menu-item {
    border-top: 1px solid var(--color-border-light);
}

.action-menu-item:hover {
    background: var(--color-bg-page);
}

.action-menu-item.danger {
    color: var(--color-danger);
}