* { box-sizing: border-box; }
/* L'attribut hidden l'emporte toujours, même sur un composant qui fixe son propre display. */
[hidden] { display: none !important; }
html, body { height: 100%; }
/* Gouttière de l'ascenseur toujours réservée : la largeur utile ne varie plus selon la
   longueur de la page (filtre "Toutes les equipes" vs une seule équipe, par exemple). */
html { overflow-y: scroll; }
body {
    margin: 0;
    background: var(--md-surface-dim);
    color: var(--md-on-surface);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--md-on-surface);
}
h1 { font-size: 1.6rem; margin: 4px 0 20px; }
h2 { font-size: 1.15rem; }

a { color: var(--md-primary); }

/* ==================== Contenu ==================== */
main {
    flex: 1;
    padding: 28px 5% calc(var(--footer-height) + 24px);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.nowrap { white-space: nowrap; }

/* Filtres (select) au-dessus des tableaux */
.filters {
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 20px;
}
.filters label { margin-left: 10px; }
.filters label:first-child { margin-left: 0; }
.filters select { min-width: 240px; }

table {
    width: auto;
    border-collapse: collapse;
    background: var(--md-surface);
    border-radius: var(--md-radius-md);
    overflow: hidden;
    box-shadow: var(--md-elevation-table);
}
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--md-outline-variant); }
thead th {
    background: var(--md-surface-container);
    color: var(--md-on-surface-variant);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
tbody tr { transition: background-color var(--md-motion); }
tbody tr:hover { background-color: var(--md-surface-container); }

#calendar-table th:first-child, #calendar-table td:first-child { text-align: center; }

/* Largeur et marges fixes : le tableau ne s'adapte plus au contenu de la pastille choisie. */
#calendar-table { width: 100%; max-width: 1100px; }
@media (min-width: 701px) {
    #calendar-table { table-layout: fixed; }
    #calendar-table td { white-space: normal; overflow-wrap: anywhere; }
    #calendar-table th:nth-child(1) { width: 8%; }
    #calendar-table th:nth-child(2) { width: 12%; }
    #calendar-table th:nth-child(3) { width: 10%; }
    #calendar-table th:nth-child(4) { width: 11%; }
    #calendar-table th:nth-child(5) { width: 19%; }
    #calendar-table th:nth-child(6) { width: 28%; }
    #calendar-table th:nth-child(7) { width: 12%; }
}

/* ---- Badge : étiquette d'état non interactive (remplace tag, status-chip, count-pill, team-chip, badge-home/away) ----
   Variantes d'état : --success --warning --danger --info --neutral (défaut) ; --team (couleur d'équipe) ; taille --lg. */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--md-radius-full);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
}
.badge--success { background: var(--status-success-bg); color: var(--status-success-fg); }
.badge--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.badge--danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.badge--info { background: var(--status-info-bg); color: var(--status-info-fg); }
.badge--neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.badge--team { background: var(--team); color: var(--team-on); }
.badge--lg { padding: 3px 12px; font-size: 0.85rem; }
.badge-group { display: inline-flex; flex-wrap: wrap; gap: 4px; }

footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    height: var(--footer-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    background: var(--inv-surface);
    color: var(--inv-on-surface);
    font-size: 0.82rem;
    text-align: center;
}
footer > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==================== Ajustements de thème ==================== */
body { letter-spacing: -0.003em; }
footer { border-top: 1px solid var(--md-outline-variant); }