/*
 * SPORTCOM - foglio di stile dell'applicazione.
 *
 * Volutamente corto. Bootstrap 5 fa il lavoro; qui stanno solo i colori della
 * societa' attiva e le poche strutture che Bootstrap non ha gia'.
 */

:root {
    /* Sovrascritti a runtime dal layout con i colori della societa' attiva. */
    --sc-primario: #0d6efd;
    --sc-secondario: #6c757d;

    --sc-barra-h: 56px;
}

body {
    /* Sfondo appena staccato dal bianco: le card si leggono senza bordi pesanti. */
    background-color: #f6f7f9;
}

/* ---------------------------------------------------------------- struttura */

.sc-navbar {
    background-color: var(--sc-primario);
}

.sc-navbar .navbar-brand,
.sc-navbar .nav-link {
    color: rgba(255, 255, 255, .9);
}

.sc-navbar .nav-link:hover,
.sc-navbar .nav-link:focus,
.sc-navbar .nav-link.active {
    color: #fff;
}

.sc-contenuto {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

/* Segnaposto quadrato con le iniziali, quando la societa' non ha un logo. */
.sc-stemma {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background-color: var(--sc-secondario);
    border-radius: .5rem;
}

.sc-stemma-sm { width: 32px; height: 32px; font-size: .8rem; }
.sc-stemma-lg { width: 72px; height: 72px; font-size: 1.6rem; border-radius: .75rem; }

/* --------------------------------------------------------- scelta societa' */

/*
 * I "pulsantoni" della schermata di scelta: devono essere grandi e cliccabili
 * anche col pollice, perche' questa e' la prima schermata che si vede da
 * telefono con l'app installata.
 */
.sc-scelta-societa .card {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .08);
    transition: transform .12s ease, box-shadow .12s ease;
}

.sc-scelta-societa .card:hover,
.sc-scelta-societa .card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
}

/* L'intera card e' il bersaglio del click, non solo il titolo. */
.sc-scelta-societa .stretched-link::after {
    border-radius: inherit;
}

/* -------------------------------------------------------------- accessibile */

/*
 * Chi naviga da tastiera deve vedere dove si trova. Bootstrap toglie l'outline
 * in diversi punti: qui viene rimesso in modo uniforme.
 */
:focus-visible {
    outline: 2px solid var(--sc-primario);
    outline-offset: 2px;
}

/* Il testo scorrevole delle tabelle non deve far scorrere l'intera pagina. */
.table-responsive {
    overflow-x: auto;
}

/* ------------------------------------------------------------------- stampa */

@media print {
    .sc-navbar,
    .sc-no-stampa {
        display: none !important;
    }

    body {
        background: #fff;
    }
}