/* Boutons du tableau "Tables" */
.btn-join-table {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 1rem);
  height: calc(100% - 1rem);
  margin: 0.5rem;
  box-sizing: border-box;
  padding: clamp(0.2rem, 0.5dvh, 0.35rem) clamp(0.35rem, 0.9dvw, 0.55rem);
  font-family: "cooper", Georgia, "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: clamp(0.75rem, 1.3dvw, 0.95rem);
  letter-spacing: -0.02em;
  color: var(--custom-white);
  white-space: nowrap;
  background-color: var(--custom-green);
  background-image: var(--gradient-green);
  border: 0.05rem solid #222;
  border-radius: 0.35rem;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2),
    0 -1px 0 rgba(255, 255, 255, 0.4),
    1px 0 0 rgba(255, 255, 255, 0.2),
    -1px 0 0 rgba(255, 255, 255, 0.2);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease,
    background 0.1s ease;
}

.btn-join-table:hover:not(.btn-disabled):not(:disabled) {
  color: var(--custom-white-hover);
  background-image: var(--gradient-green-hover);
  transform: scaleX(0.99) scaleY(0.96);
}

.btn-join-table.btn-disabled,
.btn-join-table:disabled {
  background: #888;
  color: #eee;
  cursor: default;
  opacity: 0.8;
  pointer-events: none;
  box-shadow: none;
  border: 0.1rem solid #032300;
  transform: none;
}

/* Style pour bouton Join déjà ouvert : reprend le style hover */
.btn-already-open {
  background: var(--gradient-green);
  cursor: default;
  opacity: 1;
  box-shadow: 0 4px 15px rgba(74, 158, 255, 0.5);
  border: 1px solid #4a9eff;
  transform: translateY(-2px);
}

.btn-already-open:hover {
  background: var(--gradient-green);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(74, 158, 255, 0.5);
}