/* Variabili CSS */
:root {
    /* Colori principali */
    --background-color: #ffffff;
    --text: #000000;
    --separator: #000000;
    --primary-color: #4CAF50;
    --hover-color: #45a049;
    --border-color: #000000;
    --input-focus-bg: #d0e2f0;
    --highlight-color: #f0f8ff;
    --first-column-bg: #8cb3f4;
    --bonus-bg: #d0e2f0;
    --total-text: #ffffff;
    --total-bg:#1459db;
    --success-color: #4CAF50;
    --error-color: #f44336;
    --error-color-hover: #cc392e;
    --info-color: #2196f3;

    /* Colori per il Keypad */
    --keypad-button-bg: #f4f5f6;
    --keypad-button-border: #888888;
    --keypad-button-shadow: 
        -6px -5px 15px rgba(255, 255, 255, 0.75),
        -6px 5px 7px rgba(255, 255, 255, 0.65),
        10px 15px 30px rgba(255, 255, 255, 0.55),
        2px 2px 2px rgba(0, 0, 0, 0.5);
    --button-content-shadow: 
        inset 0 -4px 0 #dddddd,
        0 -4px 0 #f4f5f6;
    --button-text-color: #888888;
    --button-text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
}

/* HTML */
html, body, body#body {
    background-color: var(--background-color);
    color: var(--text);
}

/* Header */
.header {
    background-color: var(--background-color);
}

.material-symbols-rounded {
    color: var(--text);
}

/* Main */
body {
    background-color: var(--background-color);
    color: var(--text);
}

#numGiocatori {
    background: var(--background-color);
    color: var(--first-column-text);
}

table {
    background-color: var(--background-color);
}

thead th:first-child, tbody td:first-child, th, th.inpunt {
    background-color: var(--first-column-bg) !important;
}

th, td {
    border: solid 0.5px var(--border-color);
}

#score-table th, #score-table td {
    border: solid 1px var(--border-color);
}

thead tr {
    background-color: var(--background-color);
}

table#punteggi.dynamic-table th,
table#punteggi.dynamic-table td {
    border: 1px solid var(--border-color);
}

tbody tr.bonus, tbody tr.bonus td {
    background-color: var(--bonus-bg) !important;
    border-top: 2px solid var(--border-color);
}

tbody tr.totali, tbody tr.totali td {
    color: var(--total-text);
    background-color: var(--total-bg) !important;
    border-top: 2px solid var(--border-color);
}

tfoot tr, tfoot tr td {
    color: var(--total-text);
    background-color: var(--total-bg) !important;
    border-top: 2px solid var(--border-color);
}

input[type="number"],
input[type="text"] {
    color: var(--text);
}

input[type="number"]:focus,
input[type="text"]:focus {
    background-color: var(--input-focus-bg);
}

tfoot input[type="number"],
tfoot input[type="text"],
.totali input[type="number"],
.totali input[type="text"] {
    color: var(--total-text);
}

.colonna-evidenziata {
    background-color: var(--highlight-color);
}

.cella-selezionata {
    background-color: var(--input-focus-bg) !important;
}

.elenco-partite {
    border-bottom: 2px var(--border-color);
}

.popup-content {
    background-color: var(--background-color);
}

.chiudi-popup {
    color: var(--text);
}

/* Keypad */
.keypad {
    background:#fff;
    box-shadow:0 -2px 8px rgba(0,0,0,.2);
}

.keypad .keys > .button {
    border: 3px solid var(--keypad-button-border);
    background-color: var(--keypad-button-bg);
    box-shadow: var(--keypad-button-shadow);
}

.button__content {
    box-shadow: var(--button-content-shadow);
}

.button__text {
    background-color: var(--button-text-color);
    text-shadow: var(--button-text-shadow);
}

.delete .button__text {
    color: var(--button-text-color);
}

/* Statistiche Page */
.statistiche-filtro {
    background: var(--first-column-bg);
    border: solid 1px var(--border-color);
    box-shadow: 0 0 2px rgba(0,0,0,.5);
}

#gruppo-select, #filtro-select, #cloud-group-select {
    background: var(--background-color);
    color: var(--first-column-text);
}

.table-card, .elenco-partite, .table-container-partite, .table-container-giocatori {
    border: solid 0.5px var(--border-color);
}

.table-card,
.elenco-partite,
.statistiche-giocatori{
    box-shadow: 0 0 2px rgba(0,0,0,1);
}

.btn-elimina {
    background-color: var(--error-color);
    color: var(--background-color);
}

.btn-elimina:hover {
    background-color: var(--error-color-hover);
}

.btn-modifica {
    background-color: var(--primary-color);
    color: var(--background-color);
}

.btn-modifica:hover {
    background-color: var(--hover-color);
}

.btn-elimina i, .btn-modifica i {
    color: var(--background-color);
}

/* Groups Page */
.groups-panel {
    background: var(--first-column-bg);
    border: solid 1px var(--border-color);
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
}

.groups-list__item {
    background: var(--background-color);
}

.groups-panel__body input {
    color: var(--text);
    background: var(--background-color);
    border: solid 1px var(--border-color) !important;
    opacity: 0.7;
}

.groups-panel__body input:focus {
    color: var(--text);
    background: var(--background-color);
    border: solid 1px var(--text) !important;
    opacity: 1;
}

.groups-list__item {
    border: solid 1px var(--border-color);
}

.offline-banner {
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #fff3cd;
  color: #5c3b00;
}

/* Account Page */
.account-panel{
  background: var(--first-column-bg);
  border: solid 1px var(--border-color);
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

/* Privacy Page */
.privacy-panel {
    background: var(--first-column-bg);
    border: solid 1px var(--border-color);
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
}

.account-panel__title{
  border-bottom: 1px solid var(--separator);
}

/* Notifiche */
.notifica.success {
    background: var(--success-color);
    color: var(--background-color);
}

.notifica.error {
    background-color: var(--error-color);
    color: var(--background-color);
}

.notifica.info {
    background-color: var(--info-color);
    color: var(--background-color);
}

/* Menu */
.main-menu {
    background: var(--first-column-bg);
    border: solid 1px var(--text);
}

.main-menu ul li, .main-menu ul li a, .main-menu ul li a:visited {
    color: var(--text);
}

.main-menu button {
    color: var(--text);
}

.main-menu li:hover {
    background: rgba(255, 255, 255, 0.5);
}

#add-member-mail {
    background: var(--background-color);
    color: var(--text);
    border: 1px solid var(--border-color);
}

.separator {
    background: var(--text);
}

/* Slider switch */
.slider {
    background-color: rgba(127, 127, 127, 0.35);
    border: 1px solid rgba(127, 127, 127, 0.25);
}

.slider::before {
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.switch input:checked + .slider {
    background-color: var(--total-bg);
    border-color: var(--total-bg);
}

.switch input:focus-visible + .slider {
    box-shadow: 0 0 0 3px rgba(11, 107, 203, 0.22);
}

/* Info */
.menu {
    background-color: var(--background-color);
}

/* Button */
#salva-partita,
#torna-indietro,
#cloud-assign-btn,
.btn,
.btn--primary,
.account-btn {
    background-color: var(--primary-color);
    color: var(--background-color);
    font-family: inherit;
}

#reset,
#delete-account-btn,
.btn--danger {
    background-color: var(--error-color);
    color: var(--background-color);
}

#salva-partita:hover,
#torna-indietro:hover,
#cloud-assign-btn:hover,
.btn:hover,
.btn--primary:hover,
.btn--danger:hover,
#login-btn:hover,
#delete-account-btn:hover {
    background-color: var(--hover-color);
}

#reset:hover,
#delete-account-btn:hover,
.btn--danger:hover {
    background-color: var(--error-color-hover);
}

#toggle-dark-mode, #esporta-dati, #importa-dati-button {
    color: var(--text);
}