/* static/mystyle.css */

/* Importa il font Roboto da Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');


body {
    font-family: 'Roboto', sans-serif; /* Imposta Roboto come font principale, con sans-serif come fallback */
    font-size: 16px;
    background-color: #f8f9fa; /* Light gray background*/
    color: #343a40; /* Dark text color */
    padding-top: 56px; /* Altezza della navbar di default in Bootstrap */
}

.sidebar {
    background-color: #343a40; /* Dark background for sidebar */
    color: #f8f9fa; /* Light text color for sidebar */
    height: 100vh; /* Full height */
    padding-top: 20px;
    position: fixed; /* Keep sidebar fixed */
    left: 0;
    top: 56px; /* Inizia sotto la navbar */
    height: calc(100vh - 56px); /* Altezza rimanente */
    width: 250px; /* Fixed width for sidebar */
    overflow-y: auto; /* Aggiungi scroll se i link superano l'altezza */
}

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

.sidebar .nav-link:hover {
    background-color: #495057; /* Slightly lighter on hover */
}

.sidebar .user-id {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #495057;
    margin-bottom: 20px;
    font-size: 1.2em;
    font-weight: bold;
}

.sidebar .logout-button {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

.content {
    margin-left: 250px; /* Offset content by sidebar width */
    padding: 20px;
}

.card {
    margin-top: 20px;
}

/* Nuovi stili per la navbar e il sottomenu */
.navbar-brand-logo {
    height: 30px; /* Altezza del logo, puoi adattarla */
    margin-right: 10px; /* Spazio tra logo e testo */
}
.navbar-center-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #f8f9fa; /* Colore del testo per il titolo centrale */
    font-size: 2rem; /* Dimensione del font, puoi adattarla */
    font-weight: bold;
    white-space: nowrap; /* Evita che il testo vada a capo */
}

/* Stili per il sottomenu */
.sidebar .btn-toggle-nav {
    padding-left: 1rem; /* Indentazione per i sottomenu */
    background-color: #495057; /* Sfondo leggermente diverso per il sottomenu */
    border-radius: 0 0 0.25rem 0.25rem;
}
.sidebar .btn-toggle-nav a {
    color: #f8f9fa;
}
.sidebar .btn-toggle-nav a:hover {
    background-color: #6c757d;
}

/* Stile per il link attivo nella sidebar */
.sidebar .nav-link.active {
    background-color: #007bff; /* Blu di Bootstrap */
    color: white;
    font-weight: bold;
}
.sidebar .btn-toggle-nav a.active {
    background-color: #0056b3; /* Blu più scuro per il sottomenu attivo */
}

/* NUOVI STILI PER L'ELENCO PUNTATO */
.custom-list-container {
    padding: 20px;
    background-color: #f8f9fa; /* Sfondo leggero */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.custom-list-container h2 {
    color: #007bff; /* Colore del titolo */
    margin-bottom: 15px;
    font-size: 1.8rem;
}

.custom-list-container ul {
    list-style: none; /* Rimuove i bullet point predefiniti */
    padding-left: 0;
}

.custom-list-container ul li {
    position: relative; /* Per posizionare il bullet point personalizzato */
    padding-left: 25px; /* Spazio per il bullet point */
    margin-bottom: 8px;
    color: #343a40;
    font-size: 1.1rem;
}

.custom-list-container ul li:before {
    content: '•'; /* Bullet point personalizzato */
    position: absolute;
    left: 0;
    color: #007bff; /* Colore del bullet point */
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1;
}

.custom-list-container ul ul {
    margin-top: 5px;
    margin-left: 30px; /* Sposta il secondo livello a destra */
}

.custom-list-container ul ul li {
    font-size: 1rem; /* Dimensione del font per il secondo livello */
    margin-bottom: 5px;
}

.custom-list-container ul ul li:before {
    content: '–'; /* Bullet point diverso per il secondo livello */
    color: #6c757d; /* Colore diverso per il bullet point del secondo livello */
}