html {
    font-size: 16px;
    height: 100%;
}

body {
    margin: 0;
    min-width: 0;
    height: 100%;
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    overflow-x: hidden;
    background-color: #f8f9fa;
}


/* ============================= */
/* FOCUS BOOTSTRAP               */
/* ============================= */

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white,
                0 0 0 0.25rem #258cfb;
}


/* ============================= */
/* HEADER                        */
/* ============================= */

header {
    flex: 0 0 auto;
}


/* ============================= */
/* CONTENUTO PRINCIPALE          */
/* ============================= */

.page-container {
    flex: 1 1 auto;

    width: 100%;
    min-height: 0;

    margin: 0;
    padding: 6px 14px;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/* Toolbar Indietro / Home */

.page-toolbar {
    flex: 0 0 auto;

    display: flex;
    flex-wrap: wrap;

    gap: 8px;
    margin-bottom: 10px;
}


/* ============================= */
/* CONTAINER DELLE PAGINE        */
/* ============================= */

.page-container > .container,
.page-container > .container-fluid {

    width: 100%;
    max-width: 100% !important;

    margin: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;

    min-height: 0;
}


/* Override di eventuali max-width inline */

.page-container .container {
    max-width: 100% !important;
}


/* ============================= */
/* SPAZI VERTICALI               */
/* ============================= */

.page-container h1,
.page-container h2,
.page-container h3,
.page-container h4,
.page-container h5,
.page-container h6 {
    margin-top: 0;
}

.page-container .py-3,
.page-container .py-4,
.page-container .py-5 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.page-container .mt-4 {
    margin-top: 0.75rem !important;
}

.page-container .mb-4 {
    margin-bottom: 0.75rem !important;
}

.page-container .mb-3 {
    margin-bottom: 0.65rem !important;
}

.page-container hr {
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
}


/* ============================= */
/* CARD                          */
/* ============================= */

.card {
    width: 100%;
}

.card-body {
    padding: 12px 16px;
}


/* ============================= */
/* FORM                          */
/* ============================= */

input,
select,
textarea,
button {
    max-width: 100%;
}

.form-control,
.form-select {
    min-height: 38px;
}


/* ============================= */
/* IMMAGINI                      */
/* ============================= */

img,
video,
canvas {
    max-width: 100%;
    height: auto;
}


/* ============================= */
/* TABELLE                       */
/* ============================= */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
}


/* ============================= */
/* FOOTER                        */
/* ============================= */

.site-footer {
    flex: 0 0 auto;

    width: 100%;

    border-top: 1px solid #dee2e6;
    background-color: #ffffff;

    color: #6c757d;

    padding: 5px 10px;

    font-size: 0.85rem;

    position: relative;
    z-index: 20;
}


/* ============================= */
/* PAGINA ELENCO GIOCATORI       */
/* ============================= */

/*
   Solo questa pagina può scorrere
   quando l'elenco diventa lungo.
*/

body:has(a[href*="ModificaGiocatore"]) .table-responsive {
    max-height: calc(100vh - 230px);
    overflow-y: auto;
}


/* ============================= */
/* DESKTOP                       */
/* ============================= */

@media (min-width: 1200px) {

    .page-container {
        padding-left: 24px;
        padding-right: 24px;
    }

}


/* ============================= */
/* TABLET                        */
/* ============================= */

@media (max-width: 991.98px) {

    .page-container {
        padding: 8px 12px;
    }

}


/* ============================= */
/* SMARTPHONE                    */
/* ============================= */

@media (max-width: 767.98px) {

    html {
        font-size: 15px;
    }

    .page-container {
        padding: 6px 8px;
    }

    .page-toolbar {
        margin-bottom: 6px;
    }

    .card-body {
        padding: 10px;
    }

    h1 {
        font-size: 1.7rem;
    }

    h2 {
        font-size: 1.45rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .btn {
        min-height: 40px;
    }

    .form-control,
    .form-select {
        min-height: 42px;
        font-size: 16px;
    }

    .table {
        font-size: 0.88rem;
    }

    .navbar-brand {
        font-size: 1.1rem;
    }

    .site-footer {
        padding: 4px 8px;
        font-size: 0.78rem;
    }

}


/* ============================= */
/* TELEFONI PICCOLI              */
/* ============================= */

@media (max-width: 420px) {

    .page-container {
        padding: 5px;
    }

    .card-body {
        padding: 8px;
    }

    .table {
        font-size: 0.8rem;
    }

}

/* ===================================== */
/* COMPATTA LE PAGINE PER EVITARE SCROLL */
/* ===================================== */

.page-toolbar {
    gap: 6px;
    margin-bottom: 6px;
}

.page-toolbar .btn {
    padding: 3px 8px;
    min-height: auto;
    font-size: 0.82rem;
}

.page-container h1 {
    font-size: 1.55rem;
    margin-bottom: 4px;
}

.page-container h2 {
    font-size: 1.45rem;
    margin-bottom: 3px;
}

.page-container h3 {
    font-size: 1.25rem;
}

.page-container h4,
.page-container h5 {
    font-size: 1rem;
}

.page-container small,
.page-container .text-muted {
    font-size: 0.78rem;
}

.page-container .card {
    margin-bottom: 8px !important;
}

.page-container .card-body {
    padding: 8px 12px;
}

.page-container .row {
    --bs-gutter-y: 0.55rem;
}

.page-container .form-label {
    margin-bottom: 3px;
    font-size: 0.82rem;
}

.page-container .form-control,
.page-container .form-select {
    min-height: 30px;
    height: 30px;
    padding: 3px 8px;
    font-size: 0.82rem;
}

.page-container .form-check {
    margin-top: 6px !important;
}

.page-container .form-check-label {
    font-size: 0.82rem;
}

.page-container hr {
    margin-top: 7px;
    margin-bottom: 7px;
}

.page-container .mt-1 {
    margin-top: 2px !important;
}

.page-container .mt-2 {
    margin-top: 4px !important;
}

.page-container .mt-3 {
    margin-top: 6px !important;
}

.page-container .mt-4 {
    margin-top: 8px !important;
}

.page-container .mb-1 {
    margin-bottom: 2px !important;
}

.page-container .mb-2 {
    margin-bottom: 4px !important;
}

.page-container .mb-3 {
    margin-bottom: 6px !important;
}

.page-container .mb-4 {
    margin-bottom: 8px !important;
}

.page-container .py-3,
.page-container .py-4,
.page-container .py-5 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.page-container .btn {
    min-height: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 0.82rem;
}

.site-footer {
    padding: 3px 8px;
    font-size: 0.72rem;
}

/* Elenco partecipanti Prossima Partita */
/* Scroll interno elenco partecipanti */
.partecipanti-scroll {
    max-height: calc(100vh - 330px);
    min-height: 100px;
    overflow-y: auto;
    overflow-x: auto;
}

/* Mantiene l'intestazione visibile durante lo scroll */
.partecipanti-scroll thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

/* Spazio inferiore per evitare che il contenuto finisca sotto il footer */
.page-container {
    padding-bottom: 45px;
}

/* Scroll interno Classifica */
.classifica-scroll {
    max-height: calc(100vh - 260px);
    min-height: 120px;
    width: 100%;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.classifica-scroll table {
    min-width: 650px;
}

/* Intestazione sempre visibile durante lo scroll */
.classifica-scroll thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

/* Scroll orizzontale tabelle Storico */
.storico-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.storico-scroll table {
    min-width: 420px;
}

/* Scroll verticale dell'intero elenco dello Storico */
.storico-lista-scroll {
    max-height: calc(100vh - 190px);
    min-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}
/* Scroll interno elenco giocatori */
.giocatori-scroll {
    max-height: calc(100vh - 260px);
    min-height: 120px;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Intestazione sempre visibile durante lo scroll */
.giocatori-scroll thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

/* Sfondo area centrale */
.page-container {
    position: relative;
    min-height: calc(100vh - 110px);

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.68),
            rgba(255, 255, 255, 0.68)
        ),
        url('/images/calcetto-bg.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    padding-bottom: 45px;
}