/* =========================================================
   Base Scoreboard CSS (neutral greyscale)
   NOTE: Bootstrap already provides many resets & utilities.
   Only keep what’s custom to your app.
   ========================================================= */

/* ---------- CSS Variables (override in skin files) ---------- */
:root {
  --bg: #ffffff;           /* page background */
  --fg: #111111;           /* primary text */
  --muted: #666666;        /* secondary text / icons */
  --line: #dddddd;         /* borders / dividers */
  --surface: #f7f7f7;      /* cards / table cells */
  --overlay: rgba(0,0,0,0.35);
}

/* ---------- Base / Reset ---------- */
html, body {
  height: 100%;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  font: 16px/1.5 Gotham, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Bootstrap already sets font-size, line-height on body via Reboot */
  /* If you prefer Bootstrap defaults, remove the font line above. */
}

/* ---------- Layout Containers ---------- */
.scoreboard-container {
  max-height: calc(100dvh - 240px);
  overflow-y: auto;
  overflow-x: hidden;
  
  padding: 0;
}

/* FIRST FOOTER (Total score) : positionné au-dessus du menu fixe */
#scoreTotalFooter {
  position: fixed;
  bottom: 60px;           /* hauteur du menu footer */
  width: 100%;
  z-index: 1030;          /* > .navbar (Bootstrap) */
  background-color: var(--overlay);
  backdrop-filter: saturate(120%) blur(6px);
}

/* SECOND FOOTER (Menu) */
#menuFooter {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  z-index: 1050;          
  background-color: #111; /* gris très foncé; surcharge via skin si besoin */
  /* ⚠️ Bootstrap a déjà .fixed-bottom; tu pourrais l’utiliser au lieu de ce bloc */
}

/* Offcanvas (bottom) */
.offcanvas.offcanvas-bottom {
  height: 80vh;
  /* Bootstrap gère déjà position & animation */
}

/* ---------- Header / Logo ---------- */
.logo {
  display: block;
  margin-inline: auto;
  max-width: 400px;
  max-height: 76px;
}

/* ---------- Spacers (utilitaires) ---------- */
/* ⚠️ Bootstrap offre déjà .mt-*, .pt-*, .spacer utilitaires possibles */
.spacer-90 { height: 90px; }

/* ---------- Table (Scoreboard) ---------- */
/* ⚠️ Bootstrap fournit .table, .table-borderless, .table-striped, etc.
   Si possible, utilise leurs classes plutôt qu’un style global sur <table> */
table {
  background-color: transparent;
  margin: 0 auto;        /* centrer horizontalement */
  border-width: 1px;     /* sans border-style, cela n’affiche rien */
  border-collapse: separate; /* comportement par défaut */
}

table th,
table td {
  vertical-align: middle;
  text-align: center;    /* ✅ utile si tu ne veux pas aligner à gauche */
  background-color: transparent;
  /* Bootstrap .table > th/td sont déjà vertical-align: top; tu changes ici */
}

/* Supprime les propriétés héritées inutiles provenant d’un UA stylesheet */
.scoreboard-table {
  box-sizing: border-box;
  white-space: normal;
  border-spacing: 2px;
  font: inherit;         /* laisse la font du body */
  color: inherit;
  table-layout: fixed; /* force largeur fixe */
  width: 100%;
}

.scoreboard-table th,
.scoreboard-table td {
  word-wrap: break-word;
}

/* Header collant */
.scoreboard-header {
  display: table-header-group; /* comportement natif des <thead> */
  position: sticky;
  top: 0;                      /* nécessaire pour le sticky */
  background-color: var(--bg); /* éviter l’effet transparent lors du scroll */
  z-index: 2;
  /*font-size: 5vw; /* 5% de la largeur de l’écran */
}

.player-name {
  display: inline-block;
  max-width: 80px;
  font-size: clamp(10px, 2vw, 14px); /* ajuste entre 10px et 14px */
  white-space: nowrap;
}

/* Lignes / corps */
.scoreboard-body {
  display: table-row-group; /* <tbody> natif */
  /*overflow-y: auto;         /* n’a pas d’effet sur display: table-row-group,
                               l’overflow doit être sur un conteneur parent */
  max-height: calc(100dvh - 240px);
}

/* Cellules typées */
.scoreboard-hole,
.scoreboard-score {
  background-color: transparent;
  min-width: 50px;
  /*max-width: 109px;*/
  max-height: 70px;
  /* .scoreboard-hole: font-stretch manquait les deux-points — retiré */
}

/* ---------- Buttons ---------- */
/* ⚠️ Tu redéfinissais .btn-primary / .btn-secondary (conflit avec Bootstrap).
   Recommandation: utilise des classes **custom** (.btn-score, .btn-hole)
   et garde .btn, .btn-outline-* Bootstrap pour cohérence globale. */

.btn-hole {
  /* bouton “trou” */
  padding: 4px;
  margin: 2px;
  width: 40px;           /* attention: width + min/max width plus bas, choisis-en un */
  min-width: 40px;
  max-width: 109px;
  max-height: 70px;
  font-size: 1rem;
  border-radius: 20px;
  background-color: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line);
}

.btn-score {
  /* bouton “score” (style outline) */
  padding: 4px;
  margin: 2px;
  min-width: 45px;
  /*max-width: 109px;*/
  max-height: 70px;
  font-size: 1rem;
  border-radius: 20px;
  background-color: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
}


.btn, button {
  touch-action: manipulation;        /* désactive double-tap zoom sur la plupart des navigateurs */
  -ms-touch-action: manipulation;    /* vieux Edge */
}

.btn-lg {
  border-radius: 20px;
}

/* Si tu veux VRAIMENT overrider les classes Bootstrap:
   ⚠️ Ceci remplace le look Bootstrap des .btn-primary/.btn-secondary  */
.btn-primary {
/*  padding: 4px;
  margin: 2px;
/*  min-width: 50px;
  max-width: 90px;
  max-height: 70px; */
  background-color: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
  /* ⚠️ Bootstrap gère déjà padding/border-radius/typography */
}
.btn-primary:hover {
  background-color: #eaeaea;  /* gris clair au hover */
  color: #0a0a0a;
}

.btn-secondary {
/*  padding: 4px;
  margin: 2px;
  min-width: 50px;
  max-width: 109px;
  max-height: 70px; */
  border-radius: 20px;
  background-color: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line);
}

/* Correction du sélecteur :hover (pas d’espace) */
.btn-secondary:hover {
  background-color: #eaeaea;  /* gris clair au hover */
  color: #0a0a0a;
}

/* Variante sombre (si nécessaire) */
.btn-dark {
  padding: 4px;
  margin: 2px;
  min-width: 50px;
  max-width: 109px;
  max-height: 70px;
  width: 40px;
  font-size: 1rem;
  border-radius: 20px;
  background-color: #2a2a2a;
  color: #f2f2f2;
  border: 1px solid #2a2a2a;
}



/* ---------- Offcanvas Hole Items ---------- */
/* Passe au neutre; les skins remettront la couleur */
.offcanvas-bottom.hole-item       { background-color: var(--surface); }
.offcanvas-bottom.hole-item.even  { background-color: #ececec; }
.offcanvas-body.hole-item         { padding-top: 0; }
.hole-item                        { color: var(--fg); }

/* ---------- Rules & Utilities ---------- */
.bottom-line {
  border: 0;
  border-bottom: 1px solid var(--line);
}

.truncate-5 {
  width: 5ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

/* Table borders (neutral) */
.tbody, td, tfoot, th, thead, tr {
  border-color: var(--line);
  border-style: none; /* aucun cadre; utilise .table-borderless de Bootstrap si possible */
}