/* ESS Records – Frontend styles */

:root {
    --ess-primary:      #3d1a6b;   /* violet foncé */
    --ess-primary-dark: #2b1150;
    --ess-primary-light:#5a2d9a;
    --ess-accent:       #7b3fb5;   /* violet moyen pour hover */
    --ess-bg:           #f7f5fa;   /* fond très légèrement violacé */
    --ess-border:       #d8cfe8;
    --ess-text:         #1c1c2e;
    --ess-muted:        #6b5f80;
    --ess-radius:       6px;
    --ess-shadow:       0 2px 8px rgba(61,26,107,.10);
}

/* Wrapper principal */
.ess-records {
    font-family: inherit;
    color: var(--ess-text);
    max-width: 900px;
    margin: 0 auto;
}

/* ------------------------------------------------------------------ */
/* Filtres                                                              */
/* ------------------------------------------------------------------ */

.ess-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    background: var(--ess-bg);
    border: 1px solid var(--ess-border);
    border-radius: var(--ess-radius);
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: var(--ess-shadow);
}

.ess-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ess-filter-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ess-muted);
}

/* Pills */
.ess-filter-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ess-pill {
    padding: 6px 16px;
    border: 2px solid var(--ess-border);
    border-radius: 20px;
    background: #fff;
    color: var(--ess-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1.4;
}
.ess-pill:hover {
    border-color: var(--ess-primary);
    color: var(--ess-primary);
}
.ess-pill.active {
    background: var(--ess-primary);
    border-color: var(--ess-primary);
    color: #fff;
}


/* Groupe Type (Club / Meeting) — pleine largeur, séparateur visuel */
.ess-type-group {
    flex: 0 0 100%;
    padding-bottom: 14px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--ess-border);
}
.ess-type-group .ess-filter-label { display: none; }
.ess-type-group .ess-pill {
    padding: 7px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 24px;
}

.ess-no-cat {
    font-size: 13px;
    color: var(--ess-muted);
    font-style: italic;
}

/* ------------------------------------------------------------------ */
/* Tableau                                                              */
/* ------------------------------------------------------------------ */

.ess-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--ess-radius);
    box-shadow: var(--ess-shadow);
}

.ess-records-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #fff;
    table-layout: fixed; /* garantit les largeurs en % même sur petit écran */
}

/* En-tête */
.ess-records-table thead tr th {
    background: var(--ess-primary);
    color: #fff;
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .04em;
}
.ess-records-table thead tr th:nth-child(2) {
    text-align: center;
}

/* Corps */
.ess-records-table tbody tr {
    border-bottom: 1px solid var(--ess-border);
    transition: background .1s;
}
.ess-records-table tbody tr:hover { background: #f3eeff; }
.ess-records-table tbody tr:last-child { border-bottom: none; }

.ess-records-table td {
    padding: 10px 16px;
    vertical-align: middle;
}

.ess-discipline {
    font-weight: 600;
    color: var(--ess-text);
    border-right: 2px solid var(--ess-border);
    width: 40%;
}

.ess-perf {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: var(--ess-primary);
    text-align: center;
    white-space: nowrap;
    background: #f7f5fa;
    font-size: 15px;
    width: 20%;
    border-right: 2px solid var(--ess-border);
}

.ess-athlete {
    color: var(--ess-text);
    width: 40%;
}

.ess-year {
    font-size: 12px;
    color: var(--ess-muted);
    font-weight: normal;
}

/* État vide */
.ess-empty {
    text-align: center;
    padding: 32px;
    color: var(--ess-muted);
    font-style: italic;
    background: var(--ess-bg);
    border-radius: var(--ess-radius);
    border: 1px dashed var(--ess-border);
    margin-top: 8px;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {
    .ess-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 12px;
    }
    .ess-filter-pills { flex-wrap: wrap; }
    .ess-pill { font-size: 12px; padding: 5px 12px; }

    /* Table : 3 colonnes visibles sans scroll horizontal */
    .ess-table-wrapper { overflow-x: visible; }

    .ess-records-table { font-size: 12px; }

    .ess-records-table th,
    .ess-records-table td {
        padding: 7px 6px;
        word-break: break-word;  /* coupe les mots longs plutôt que d'élargir */
    }

    .ess-discipline { width: 30%; }
    .ess-perf       { width: 24%; font-size: 12px; white-space: normal; }
    .ess-athlete    { width: 46%; }

    /* Cache l'année de naissance sur mobile pour gagner de la place */
    .ess-year { display: none; }
}