/* Home */
main.home-page {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--page-pad-x) var(--page-bottom-gap);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}


/* Struttura */
.index-shell {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 10px var(--page-pad-x) var(--page-bottom-gap);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.selettoreGiocatori {
  flex: 0 0 auto;
}

#numGiocatori {
  border: solid 1px;
  border-radius: 7px;
}

#numGiocatori:focus {
  outline: none;
  box-shadow: none;
}


/* Tabella */
#table-container {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: visible;
  box-sizing: border-box;
}

.table-card {
  height: 100%;
}

table {
  table-layout: fixed;
  zoom: 0.9;
}

thead th:first-child,
tbody td:first-child,
th.inpunt {
  width: var(--first-col-width);
  text-align: center;
  font-weight: bold;
}

th,
td {
  padding: 6px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

thead th:first-child,
tbody td:first-child {
  white-space: nowrap;
  word-break: break-word;
}

table#punteggi.dynamic-table th:not(:first-child),
table#punteggi.dynamic-table td:not(:first-child) {
  width: calc((100% - var(--first-col-width)) / var(--num-giocatori));
  transition: width 0.3s ease;
}

table#punteggi th.hidden-column,
table#punteggi td.hidden-column {
  display: none;
}

tbody tr.bonus,
tbody tr.bonus td,
tbody tr.totali,
tbody tr.totali td {
  font-weight: bold;
}

tbody tr:hover {
  background-color: unset;
}

tfoot tr,
tfoot tr td {
  font-weight: bold;
}


/* Input tabella */
thead th input[type="text"],
thead th input[type="text"]:focus {
  background: unset;
  padding: 6px;
}

input[type="number"],
input[type="text"] {
  width: 100%;
  padding: 2px;
  border: none;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  text-align: center;
  background-color: transparent;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

input[type="number"]:focus,
input[type="text"]:focus {
  outline: none;
  border-radius: 4px;
  box-shadow: none;
}


/* Stati */
.hidden-column {
  visibility: collapse;
  width: 0;
  padding: 0;
  border: none;
  opacity: 0;
  max-width: 0;
  transition:
    opacity 0.3s ease,
    max-width 0.3s ease;
}

.non-selezionabile {
  pointer-events: none;
  background-color: transparent;
}

.no-evidenziatura {
  background-color: inherit !important;
}


/* Select */
#gruppo-select,
#cloud-group-select {
  text-align: center;
}


/* Footer */
.footer {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

#reset,
#salva-partita,
#torna-indietro,
#cloudassign-btn {
  width: auto;
  padding: 10px 20px;
  margin: 10px 0;
  display: inline-block;
  border: none;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}