/* Variabili CSS */
:root {
    /* Colori principali */
    --dark-bg: #202124;
    --dark-text: #f1f3f4;
    --dark-separator: #70757a;
    --dark-primary-color: #66bb6a;
    --dark-hover-color: #81c784;
    --dark-border-color: #8a8f98;
    --dark-input-focus-bg: #294f83;
    --dark-highlight-color: #1b314d;
    --dark-first-column-bg: #315f9f;
    --dark-bonus-bg: #264f78;
    --dark-total-text: #ffffff;
    --dark-total-bg: #245ed1;
    --dark-success-color: #66bb6a;
    --dark-error-color: #ef6c63;
    --dark-error-color-hover: #d9554d;
    --dark-info-color: #64b5f6;

    /* Colori per il keypad */
    --dark-keypad-bg: #202124;
    --dark-keypad-button-bg: #292a2d;
    --dark-keypad-button-border: #000000;
    --dark-keypad-button-shadow:
        -5px -5px 10px rgba(0, 0, 0, 0.15),
        -4px 4px 8px rgba(0, 0, 0, 0.10),
        7px 10px 14px rgba(0, 0, 0, 0.05);
    --dark-button-content-shadow:
        inset 0 -4px 0 rgba(0, 0, 0, 0.28),
        0 -4px 0 rgba(255, 255, 255, 0.06);
    --dark-button-text-color: #8f949b;
    --dark-button-text-shadow:
        0px 0px 1px rgba(255, 255, 255, 0.45),
        -1px -1px 1px rgba(0, 0, 0, 0.85);
}

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

/* Header */
body.dark-mode .header {
    background-color: var(--dark-bg);
}

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

/* Main */
body.dark-mode {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

body.dark-mode #numGiocatori {
    background: var(--dark-bg);
    color: var(--dark-text);
}

body.dark-mode table {
    background-color: var(--dark-bg);
}

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

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

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

body.dark-mode thead tr {
    background-color: var(--dark-bg);
}

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

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

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

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

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

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

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

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

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

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

body.dark-mode .popup-content {
    background-color: var(--dark-bg);
}

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

/* Keypad */
body.dark-mode .keypad {
    background: var(--dark-bg);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
}

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

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

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

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

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

body.dark-mode #gruppo-select, body.dark-mode #filtro-select, body.dark-mode #cloud-group-select {
    background: var(--dark-bg);
    color: var(--dark-text);
}

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

body.dark-mode .table-card,
body.dark-mode .elenco-partite,
body.dark-mode .statistiche-giocatori{
    box-shadow: 0 0 2px rgba(255,255,255,.5);
}

body.dark-mode .btn-elimina {
    background-color: var(--dark-error-color);
    color: var(--dark-text);
}

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

body.dark-mode .btn-modifica {
    background-color: var(--dark-primary-color);
    color: var(--dark-text);
}

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

body.dark-mode .btn-elimina i, body.dark-mode .btn-modifica i {
    color: var(--dark-text);
}

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

body.dark-mode .groups-list__item {
    background: var(--dark-bg);
}

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

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

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

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

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

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

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

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

body.dark-mode .notifica.error {
    background-color: var(--dark-error-color);
    color: var(--dark-text);
}

body.dark-mode .notifica.info {
    background-color: var(--dark-info-colorinfo-color);
    color: var(--dark-text);
}

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

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

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

body.dark-mode .main-menu li:hover {
    background: rgba(0, 0, 0, 0.3);
}

body.dark-mode #add-member-mail {
    background: var(--dark-bg);
    color: var(--dark-text);
    border: 1px solid var(--dark-border-color);
}

body.dark-mode .separator {
    background: var(--dark-separator);
}

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

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

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

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

/* Info */
body.dark-mode .menu {
    background-color: var(--dark-bg);
}

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

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

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

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

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