html, body {
height: 100%;
}

body {
    margin: 0;
    overflow-x: hidden;
}

body {
    background: white;
}

/* inizio grafico */
.grafico-wrapper {
    width: 400px;
    position: relative;
    font-family: Arial, sans-serif;
}

.grafico {
    width: 100%;
    height: 20px;

    background: #FF0000;
    background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 255, 0, 1) 50%, rgba(25, 135, 84, 1) 100%);

        border-radius: 10px;
        overflow: hidden;
    }

.marker {
    position: absolute;
    top: -6px;
    bottom: 12px;
    width: 2px;
    background: #000;
    transform: translateX(-50%);
}

/* variante compatta senza etichette sfavorevole/favorevole (es. tabelle) */
.grafico-wrapper.no-labels .marker {
    bottom: -6px;
}

/* 👇 etichette sotto */
.labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 12px;
    color: #555;
}
/* fine grafico */

/* OVERVIEW BOX */
.overview-box {
    background: #fff;
    border-radius: 18px;
    padding: 30px 20px;
    height: 100%;
    min-height: 240px;

    width: 88%;
    margin-left: auto;
    margin-right: auto;

    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.overview-box .box-title {
    font-weight: 600;
    font-size: 1.16rem;
    color: #6c757d;
    margin-bottom: 10px;
}

.overview-box .box-value {
    font-weight: 1000;
    font-size: 3.75rem;
    color: #000;
    margin-bottom: 16px;
}

.overview-box .box-value.text-verde { color: #0faf55; }
.overview-box .box-value.text-azzurro { color: #12aedd; }
.overview-box .box-value.text-fucsia { color: #d63384; }
.overview-box .box-value.text-rossa { color: #dc3545; }
.overview-box .box-value.text-arancio { color: #fd7e14; }

/* numero secondario, più piccolo del box-value principale */
.overview-box .box-value-md {
    font-weight: 1000;
    font-size: 3rem;
    color: #000;
    margin-bottom: 6px;
}

.overview-box .box-text {
    font-size: 0.95rem;
    color: #333;
}

/* la barra multicolore, adattata alla larghezza del box */
.overview-box .grafico-wrapper {
    width: 100%;
}

/* barra di avanzamento monocolore, bordi arrotondati */
.overview-box .box-progress {
    width: 100%;
    height: 14px;
    border-radius: 10px;
    background: #e9ecef;
    overflow: hidden;
}

.overview-box .box-progress-fill {
    height: 100%;
    border-radius: 10px;
}

.overview-box .box-progress-fill.bg-verde { background: #198754; }
.overview-box .box-progress-fill.bg-azzurro { background: #0d6efd; }
.overview-box .box-progress-fill.bg-fucsia { background: #d63384; }
/* fine overview box */

/* variante a larghezza piena, per i box che devono estendersi quanto le colonne sovrastanti */
/* le due colonne sovrastanti (col-md-6) contengono ciascuna un box all'88%: il margine
   residuo del 6% per colonna equivale, su una col-12, a un margine del 3% per lato */
.overview-box.overview-box-wide {
    width: 94%;
    margin-left: auto;
    margin-right: auto;
}

/* variante a larghezza piena per righe a 3 colonne (col-md-4): margine per lato = 2% */
.overview-box.overview-box-wide-3col {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}

/* variante compatta, senza il padding verticale/min-height standard */
.overview-box.overview-box-compact {
    padding: 16px 20px;
    min-height: 0;
    height: auto;
}

.overview-box .box-title.text-arancio { color: #fd7e14; }
.overview-box .box-title.text-verde { color: #198754; }

/* etichette colorate (miri_c) */
.label-chip {
    display: inline-block;
    padding: 6px 14px;
    margin: 4px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
}
.label-chip.bg-rossa { background: #dc3545; }
.label-chip.bg-arancio { background: #fd7e14; }
.label-chip.bg-verde { background: #198754; }
.label-chip.bg-gialla { background: #ffc107; color: #212529; }

/* TOGGLE MENU MOBILE (sostituisce la vecchia topbar nera) */
.mobile-menu-toggle {
    padding: 12px 16px;
}

/* SIDEBAR */
/* altezza fissa pari allo schermo: resta ferma mentre la parte destra (.main) scorre con la pagina */
.sidebar {
    width: 260px;
    flex: 0 0 260px;
    background: linear-gradient(180deg, #04274e 0%, #021a36 100%);
    border-right: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
}

/* logo, medico, separatori e box in fondo non si comprimono: lo spazio residuo va al menu */
.sidebar > * {
    flex-shrink: 0;
}

/* logo di testa */
.sidebar-logo {
    padding: 20px 15px 15px;
    text-align: center;
}

/* separatore sotto il logo */
.sidebar-separator {
    margin: 0 15px;
    border: 0;
    border-top: 1px solid #375e83;
    opacity: 1;
}

/* medico loggato */
.sidebar-doctor {
    padding: 15px 15px 5px;
    text-align: center;
}

.sidebar-doctor-name {
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
}

.sidebar-doctor-subtitle {
    color: #b5cfe4;
    font-size: 0.85rem;
}

/* contenitore della sezione menu (search + link): occupa lo spazio residuo della sidebar,
   cosi il logo di coda resta sempre visibile */
.sidebar > .sidebar-menu {
    padding: 5px 0 10px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* le voci principali restano fisse; se lo spazio non basta si comprime solo il menu utente */
.sidebar-menu > .sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    flex-wrap: nowrap;
}

.sidebar-nav > * {
    flex-shrink: 0;
}

/* menu utente (paziente selezionato): rientrato rispetto alle voci principali, con scroll proprio.
   direction: rtl sposta la scrollbar sul lato sinistro; il contenuto torna ltr subito sotto */
.sidebar-nav > .sidebar-user-menu {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    direction: rtl;
    margin: 0 0 6px 16px;
    padding-left: 6px;
}

.sidebar-user-menu > * {
    direction: ltr;
}

/* scrollbar molto fine (Chrome, Edge, Safari) */
.sidebar-user-menu::-webkit-scrollbar {
    width: 6px;
}

.sidebar-user-menu::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-user-menu::-webkit-scrollbar-thumb {
    background: #476f90;
    border-radius: 3px;
}

/* Firefox non supporta ::-webkit-scrollbar: usa le proprieta standard.
   Vanno limitate qui perche nei Chrome recenti scrollbar-color/width disattivano le regole ::-webkit-scrollbar */
@supports not selector(::-webkit-scrollbar) {
    .sidebar-nav > .sidebar-user-menu {
        scrollbar-width: thin;
        scrollbar-color: #476f90 transparent;
    }
}

/* logo di coda */
.sidebar-footer {
    padding: 15px;
    text-align: center;
}

/* search */
.sidebar .search {
    padding: 15px;
}

.sidebar .nav-link {
    color: #fff;
    padding: 10px 15px;
}

.sidebar .nav-link:hover {
    background: #163354;
}

/* MAIN */
.main {
    padding: 25px;
    width: 100%;
    background: #f8fbff;
    color: #15375f;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    background: #fff;
}

/* BIG BUTTONS */
.big-btn {
    background: #fff;
    border-radius: 18px;
    padding: 25px 15px;
    text-align: center;

    height: 260px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    transition: 0.2s;
}

.big-btn:hover {
    transform: translateY(-4px);
}

.big-btn i {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.border-fucsia { border-bottom: 16px solid #d63384; color: #d63384; font-weight:bold; font-size:30px;}
.border-arancio { border-bottom: 16px solid #fd7e14; color: #fd7e14;font-weight:bold; font-size:30px;}
.border-verde { border-bottom: 16px solid #198754; color: #198754;font-weight:bold; font-size:30px;}
.border-blu { border-bottom: 16px solid #0d6efd; color: #0d6efd;font-weight:bold; font-size:30px;}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 15px;
}

.search-box i {
    color: #fff;
    font-size: 1rem;
}

.search-box input {
    outline: none;
    width: 100%;
    font-size: 0.95rem;
    color: #fff;

    background: #163354;
    border: 1px solid #405772;
    border-radius: 50px;
    padding: 10px 12px;

    transition: 0.2s ease;
}

.search-box input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.search-box input:focus {
    border-color: #5c7f9e;
    box-shadow: 0 0 0 3px rgba(64, 87, 114, 0.35);
}

/* LAYOUT */
.layout {
    display: flex;
    min-height: 100vh;
}

/* APP SHELL (barre laterali esterne) */
.app-shell {
    display: flex;
    min-height: 100%;
    --side-bar-fade-width: 50px;
}

/* la banda perde la larghezza della sfumatura adiacente, cosi il contenuto non si restringe */
.side-bar {
    width: calc(7.5% - var(--side-bar-fade-width));
    flex: 0 0 calc(7.5% - var(--side-bar-fade-width));
    background: #0d213c;
}

/* raccordo sfumato tra le bande laterali e il contenuto */
.side-bar-fade {
    width: var(--side-bar-fade-width);
    flex: 0 0 var(--side-bar-fade-width);
    background: linear-gradient(to right, #0e213b, #0d1f36);
}

.side-bar-fade-right {
    background: linear-gradient(to right, #0d1f36, #0e213b);
}

.app-content {
    width: 85%;
    flex: 1 1 85%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* sotto i 992px le barre laterali vengono rimosse, il contenuto torna al 100% */
@media (max-width: 991px) {
    .side-bar {
        display: none;
    }

    .side-bar-fade {
        display: none;
    }

    .app-content {
        width: 100%;
        flex: 1 1 100%;
    }
}

/* MOBILE */
@media (max-width: 991px) {
    .sidebar {
        display: none;
    }
}

/* login */
.login-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.login-card {
    width: 100%;
    max-width: 900px;

    background: #fff;
    border-radius: 18px;
    padding: 35px 40px;

    box-shadow: 0 3px 15px rgba(0,0,0,0.08);

    display: flex;
    flex-direction: column;
    gap: 6px;
}
.login-card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.login-label {
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    margin-top: 10px;
}

.login-btn {
    display: inline-block;
    border: none;
    border-radius: 50px;
    padding: 12px 44px;
    font-weight: 600;

    background: #0d213c;
    color: #fff;

    transition: 0.2s;
}

.login-btn:hover {
    color: #fff;
    opacity: 0.9;
    transform: translateY(-2px);
}

.input-group-custom {
    display: flex;
    align-items: center;

    background: none;
    border: 1px solid #dcdcdc;

    border-radius: 10px;
    padding: 10px 14px;

    transition: 0.2s;
}

.input-group-custom input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 0.9rem;
}

/* focus */
.input-group-custom:focus-within {
    border-color: #0d213c;
}


/* barra di sinistra di navivazione */
.sidebar-nav {
    padding: 10px 15px;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 12px;
    margin-bottom: 6px;

    border: 1px solid transparent;
    border-radius: 10px;
    color: #fff;
    font-weight: 500;
    font-size: 1.08rem;

    transition: 0.2s ease;
}

.sidebar-nav .nav-link i {
    font-size: 1.1rem;
    color: #fff;
}

/* hover elegante */
.sidebar-nav .nav-link:hover {
    background: #163354;
    border-color: #405772;
    color: #fff;
    transform: translateX(3px);
}

.sidebar-nav .nav-link:hover i {
    color: #fff;
}

/* voce di menu attiva */
.sidebar-nav .nav-link.active {
    background: #0a468f;
    border-color: #0a468f;
    color: #fff;
}

.sidebar-nav .nav-link.active i {
    color: #fff;
}

/* logout */
.sidebar-nav .nav-link.text-danger {
    margin-top: 10px;
    color: #fff;
}

.sidebar-nav .nav-link.text-danger:hover {
    background: #163354;
    border-color: #405772;
    color: #fff;
}

.sidebar-nav .nav-link.text-danger:hover i {
    color: #fff;
}

/* sotto-voci del menu utente (la voce attiva usa lo stesso stile delle voci principali) */
.sidebar-nav .sub-nav-link {
    padding-left: 30px;
    font-size: 0.92rem;
}


/* voci selezionate del menu utente (nome del paziente e sotto-voce corrente): stesso stile,
   quello dell'ex box "Termina visita" in fondo alla sidebar */
.sidebar-user-menu .nav-link.active {
    background: #163354;
    border-color: #405772;
    border-radius: 12px;
}

.sidebar-user-menu .patient-nav-name {
    font-weight: 700;
}
/* fine barra di sinistra */

/* MOSAIC INTRO (home) */
.mosaic-intro-wrapper {
    padding: 40px 20px;
    text-align: center;
    /* spazio per veder arrivare le tessere da fuori, senza generare scroll orizzontale */
    overflow-x: clip;
}

.mosaic-intro {
    display: grid;
    grid-template-columns: repeat(var(--grid), 1fr);
    grid-template-rows: repeat(var(--grid), 1fr);
    gap: 0;

    width: min(90%, 420px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;

    border-radius: 18px;
}

.mosaic-tile {
    background-image: url('../img/mosaic-intro.png');
    background-size: calc(var(--grid) * 100%) calc(var(--grid) * 100%);

    --tx: 0px;
    --ty: 0px;
    --rot: 0deg;
    /* scala finale della tessera: >1 la fa sovrapporre di poco alle vicine (vedi variante cartella) */
    --scala-finale: 1;

    opacity: 0;
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.4);
    animation: mosaicTileIn 0.85s cubic-bezier(.22,.68,.32,1) forwards;
}

/* "lancio" da fuori: parte lontana e ruotata, supera leggermente il punto finale
   (piccolo rimbalzo in stile "atterraggio") e poi si assesta */
@keyframes mosaicTileIn {
    0% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.4);
    }
    65% {
        opacity: 1;
    }
    80% {
        transform: translate(calc(var(--tx) * -0.04), calc(var(--ty) * -0.04))
                   rotate(calc(var(--rot) * -0.08)) scale(1.06);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(var(--scala-finale));
    }
}

/* installazione "solo_cartella": logo della cartella clinica, rettangolare (1797x1254) */
.mosaic-intro--cartella {
    width: min(90%, 600px);
    aspect-ratio: 1797 / 1254;
}

/* le tessere hanno misure non intere (es. 75 x 52,3px): gli arrotondamenti lasciano sottili
   fughe chiare tra una tessera e l'altra, coperte facendole sovrapporre di circa 1px */
.mosaic-intro--cartella .mosaic-tile {
    background-image: url('../img/cartella-intro.png');
    --scala-finale: 1.025;
}

/* chi preferisce meno movimento vede l'immagine comparire senza animazione */
@media (prefers-reduced-motion: reduce) {
    .mosaic-tile {
        opacity: 1;
        transform: scale(var(--scala-finale));
        animation: none;
    }
}
/* fine mosaic intro */

/* LANDING PAGE (home, "/") - nessuna barra di navigazione */
.landing-page .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    background: #eef6fb;
}

.landing-tagline {
    max-width: 640px;
    margin: 28px auto 0;

    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.4;
    color: #0d213c;
}

.landing-cta {
    display: inline-block;
    margin-top: 26px;
    padding: 12px 44px;

    border-radius: 50px;
    background: #0d213c;
    color: #fff;
    font-weight: 600;
    text-decoration: none;

    transition: 0.2s;
}

.landing-cta:hover {
    color: #fff;
    opacity: 0.9;
    transform: translateY(-2px);
}
/* fine landing page */

/* LOGIN PAGE (/login) - nessuna barra di navigazione */
.login-page .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    text-align: center;
}
/* fine login page */


/* titoli dei gruppi nel form di inserimento dati (pacchetto/dati_categoria): barra azzurra, titolo navy;
   dal 3° livello il percorso padre sta sopra in piccolo */
.card-header.gruppo-titolo {
    background-color: #eaf7fc;
    border-left: 5px solid #12aedd;
    border-bottom: 1px solid #cfeaf5;
    padding: 12px 18px;
}
.gruppo-titolo-nome {
    color: #163354;
    font-size: 1.15rem;
    font-weight: 700;
}
.gruppo-titolo-percorso {
    color: #6c7a8c;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

/* sottosezioni dentro un blocco (es. FFQ > Caffè, Alcolici...): sottotitolo con riga, una sola intestazione per blocco */
.gruppo-sezione {
    color: #163354;
    font-size: 0.98rem;
    font-weight: 700;
    padding-bottom: 6px;
    margin-bottom: 12px;
    border-bottom: 1px solid #cfeaf5;
}
.gruppo-sezione-campi + .gruppo-sezione {
    margin-top: 28px;
}

/* pacchetto/dati: stacco tra le sezioni, stessa grafica dei titoli dei blocchi nelle pagine interne */
.dati-gruppo + .dati-gruppo {
    margin-top: 32px;
}
.dati-gruppo-titolo {
    background: #eaf7fc;
    border-left: 5px solid #12aedd;
    border-radius: 4px;
    color: #163354;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 14px;
    padding: 10px 16px;
}