@import url('https://fonts.googleapis.com/css2?family=Anaheim&display=swap');

/* Variabili di colore e spaziatura */
:root {
    --primary-color: #2563eb;
    --sidebar-bg: #9e9e9e;
    --footer-bg: #f1f1f1;
    --header-height: 60px;
    --footer-height: 60px;
    --text-color: #000;
    /* Colori per gradienti delicati */
    --header-start: #BA1817;
    --header-end: #C42827;
    --sidebar-start: #ffffff;
    --sidebar-end: #f7f7f7;
    --footer-start: #f1f1f1;
    --footer-end: #eaeaea;
    --header-celeste-start: #a7e0ff; /* Celeste più chiaro */
    --header-celeste-end: #90caf9; /* Celeste leggermente più scuro */
    /* Variabili per font e dimensioni */
    --font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base: 16px; /* Font base */
    --line-height-base: 1.5;
    --bs-tooltip-bg: #171f25;
    --bs-tooltip-color: #fff;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-arrow-border-color: #171f25; 
}

.container-fluid, .container {
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-top: 2rem;
}

body.modal-open {
    padding-right: 0 !important;
}

.profileNav a {
    color: #3ba3f8;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.profileNav a.nav-link:hover {
    color: #333333;
    background-color: #f0f0f0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.profileNav a.nav-link.active {
    background: linear-gradient(to bottom right, #f5fcff, #bde8ff);
    color: #038cd7;
    font-weight: 600;
    border-left: 4px solid #038cd7;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
}

.page-item.active .page-link {
    border: 0 !important;
    background-color: #3ba3f8 !important;
    color: #FFFFFF !important;
}

.page-item:not(:first-child) .page-link, .page-item:first-child .page-link {
    color: #3ba3f8;
}

#manageStructure > :first-child .nav-link {
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

a {
    text-decoration: none;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

h1 {
    line-height: 1;
}

.order-6 {
    order: 6 !important;
}

.order-7 {
    order: 7 !important;
}

.btn-custom, .btn-custom-edit, #cardHeaderButton, .card-header-button {
    border: 1px solid #3ba3f8;
    color: #3ba3f8 !important;
}

.btn-custom:hover, .btn-custom-edit:hover, #cardHeaderButton:hover, .card-header-button:hover {
    background-color: #3ba3f8;
    color: #FFFFFF !important;
}

.btn-custom i::before, .btn-custom-edit i::before {
    line-height: unset;
}

.btn-custom-create {
    background-color: #3ba3f8;
    color: #FFFFFF;
}

.btn-custom-create:hover {
    border: 1px solid #3ba3f8;
    color: #3ba3f8;
}

.btn-danger:hover {
    background-color: transparent !important;
    border-color: #DC3545 !important;
    color: #DC3545 !important;
}

.validation {
    position: absolute;
}

@media (max-width: 767.98px) {
    .btn-custom {
        width: 100% !important;
        justify-content: center;
        padding: 0.3rem 1rem !important; 
    }

    .no-validation {
        position: unset!important;
    }
}
 
.max-w-100 {
    max-width: 100% !important;
}

.tooltip.show {
    opacity: 1 !important;
}

.tooltip .tooltip-arrow::before {
    border-bottom-color: #171f25 !important;
    opacity: 1 !important;
}

.tooltip .tooltip-inner {
    background-color: #171f25 !important;
    color: #fff !important;
    opacity: 1 !important; /* forzi l'opacity al 100% */
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow: auto; /* Assicura che non ci siano scroll aggiuntivi */
}

#pageWrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
}

.main-content {
    background-color: #ffffff;
    overflow-y: auto; /* Scroll per il contenuto principale */
    height: 100%;
}

@media (min-width: 768px) {
    .main-content > .flex-grow-1 {
        padding: 20px; /* Spaziatura interna */
        box-sizing: border-box;
    }
}

div.background {
    position: relative;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, #129de1, #5bbefb);
    padding: 0;
}

.login-wrapper {
    min-height: 100vh;
}

.login-wrapper > :first-child {
    z-index: 9999;
}

    .login-wrapper > :first-child > :nth-child(2) {
        background: rgb(18 157 225 / 65%);
        padding: 3rem;
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        text-shadow: 1px 1px 1px #00000059;
    }

.login-icon::before {
    vertical-align: -0.200em !important;
    line-height: unset !important;
}

.login-form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.login-form-label {
    min-width: 80px;
}

.login-validation {
    text-shadow: none;
}

#register .login-form-label {
    min-width: 142px;
}

div.checkbox .login-btn {
    flex: 1;
    --bs-bg-opacity: 1;
    background-color: transparent;
    color: #FFFFFF;
    text-shadow: none;
}

div.checkbox .login-btn:hover {
    background-color: #FFFFFF !important;
    color: #3ba3f8 !important;
}

#forgot-password:hover {
    text-decoration: underline;
}

/* HEADER */
.app-header {
    background: linear-gradient(to right, #038cd7, #3ba3f8);
    z-index: 1000;
    position: relative;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.app-header .search-container input {
    border-radius: 20px;
    padding-left: 1rem;
    padding-right: 2.5rem;
    transition: box-shadow 0.3s ease;
}

.app-header .search-container input:focus {
    box-shadow: 0 0 5px rgba(0,0,0,0.15);
}

.app-header .search-container .bi-search {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
    cursor: pointer;
    font-size: 1rem;
}

/* FOOTER */
.footer {
    background-color: #171f25;
    z-index: 1000;
    position: relative;
}

    .footer .container {
        text-align: center; /* Centra il contenuto */
    }

    .footer a {
        color: #fff; /* Colore dei link */
        text-decoration: none; /* Rimuove le sottolineature */
        transition: color 0.3s ease; /* Transizione per il colore */
    }

    .footer a:hover {
        color: #038cd7;
    }

/* SIDEBAR */

/* Larghezza base della sidebar */


    .sidebar .nav-link i {
        margin-right: 8px;
        font-size: 1.1rem;
        color: #555;
        transition: color 0.3s ease;
    }

    .sidebar .nav-link:hover {
        background: #f0f0f0;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        transform: translateY(-1px);
    }

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

.sidebar .nav-link.active {
    background: linear-gradient(to bottom right, #f5fcff, #bde8ff);
    color: #038cd7;
    font-weight: 600;
    border-left: 4px solid #038cd7;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
}

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

.sidebar-content h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

#sidebarCollapse {
    display: flex;
    flex-direction: column;
}

.sidebar-content {
    flex-grow: 1;
}

.collapse:not(.show) {
    display: none !important;
}

.main-content {
    transition: all 0.3s ease-in-out; /* Anima lo spazio del contenuto principale */
} 

.sidebar .nav-link {
    padding: .5rem 0 .5rem 1rem;
    color: #555555;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; 
}

.sidebar.collapsed .nav-link {
    opacity: 0; /* Gradualmente nasconde i link */
    visibility: hidden;
}


/* Profilo e icone */
.sidebar-profile svg {
    width: 50px;
    height: 50px;
    fill: currentColor;
    margin-right: 10px;
}

/* Nav-link globale */
.nav-link {
    text-decoration: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.app-header .nav-link:hover {
    color: #171f25 !important;
    transform: translateX(2px);
}

.app-header .nav-link.active {
    color: #171f25 !important;
}

.app-header .navbar-toggler-icon {
    transition: transform 0.3s ease;
}

.app-header .navbar-toggler:hover .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='none' viewBox='0 0 30 30'%3E%3Cpath d='M4 7h22M4 15h22M4 23h22' stroke='%23171f25' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    transform: translateX(2px);
}

/* Stile globale per il main */
.main-content {
    font-family: 'Anaheim', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #333;
    background-color: #ffffff;
}

    .main-content h1,
    .main-content h2,
    .main-content h3,
    .main-content h4,
    .main-content h5,
    .main-content h6,
    .main-content p,
    .main-content label {
        margin-bottom: 0.5rem; /* Ridotto per uniformare gli spazi */
    }

    .main-content table {
        font-size: 16px;
        font-weight: 300;
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1rem; /* Spaziatura ridotta */
    }

    .main-content th,
    .main-content td {
        padding: 0.75rem;
        border-bottom: 1px solid #ddd;
        text-align: left;
    }

    .main-content .btn {
        font-size: 16px;
        font-family: 'Anaheim', sans-serif;
        font-weight: 300;
        padding: 0.5rem 1rem;
        border-radius: 5px;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .main-content .btn-primary {
        background-color: #1b6ec2;
        color: #fff;
        border: none;
    }

        .main-content .btn-primary:hover {
            background-color: #155a9c;
            color: #fff;
        }

    .main-content > *:not(:last-child) {
        margin-bottom: 1rem; /* Uniforma lo spazio tra gli elementi */
    }

    .main-content:hover {

    }

/* Pulsanti Principali */
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

    .btn-primary:hover {
        background-color: #155a9c;
        border-color: #145388;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

/* Dropdown nel header */
.app-header .dropdown-menu {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.app-header .dropdown-item {
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease;
}

    .app-header .dropdown-item:hover {
        background-color: #f0f0f0;
    }

/* Alert Messaggi */
.alert {
    margin-top: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


/* Contenitore Avatar Utente */
.user-avatar-container {
    position: relative;
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .user-avatar-container:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    }

/* Immagine Utente */
.user-avatar {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 2px solid #ffffff;
    transition: box-shadow 0.3s ease;
}

/* Contenitore Informazioni Profilo */
.sidebar-profile-info {
    max-width: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(to bottom right, #fefefe, #f7f7f7);
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 0.5rem;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

    .sidebar-profile-info:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        transform: translateY(-2px);
    }

/* Testo Nome e Ruolo Profilo */
.profile-name,
.profile-role {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

.profile-name {
    font-weight: 600;
    color: #333;
}

.profile-role {
    color: #666;
    font-size: 0.85rem;
}

/* Miglioramento Pulsanti Principali (Toggle Sidebar) */
.btn-primary {
    background: linear-gradient(to bottom right, #1e90ff, #1b6ec2);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

    .btn-primary:hover {
        background: linear-gradient(to bottom right, #1b6ec2, #155a9c);
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        transform: translateY(-1px);
    }

    .btn-primary:active {
        transform: translateY(1px);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

/* Miglioramento link di navigazione (Ciao, Gestione Utenti) */
.app-header .nav-link {
    display: inline-block;
    font-weight: 500;
}

/* Uniformare l'header */

    .app-header .navbar-brand img {
        transition: transform 0.2s ease;
    }

    .app-header .navbar-brand:hover img {
        transform: scale(1.05);
    }
/* Font globale */
.font-global {
    font-family: 'Anaheim', sans-serif; /* Sostituisci con il font globale */
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

/* Layout della riga */
.course {
    display: flex;
    align-items: center; /* Allinea gli elementi verticalmente al centro */
    padding: 10px 0; /* Spaziatura verticale */
    border-bottom: 1px solid #ddd; /* Divider per ogni riga */
}

.course a, #manageStructure a {
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    color: #3ba3f8;
    transition: color 0.3s ease;
}

.dropdown-item button.btn.btn-link, .dropdown-item button.btn.btn-link i {
    --bs-btn-color: #dc3545;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
}

.dropdown-menu li:hover .dropdown-item button.btn.btn-link, .dropdown-menu li:hover .dropdown-item button.btn.btn-link i {
    color: #333333;
}

.dropdown-menu li.border-bottom:hover .dropdown-item {
    color: #3ba3f8;
}

#manageStructure a.active, #manageStructure a:hover {
    color: #333333;
    --bs-bg-opacity: 1;
    --bs-light-rgb: 248, 249, 250;
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

.course a:hover, .card .card-header a:hover, .card .card-body .course a:hover {
    color: #333333;
}

.form-control-lg {
    padding: .4rem 1rem;
    min-height: unset;
    line-height: 1;
}

.course .btn {
    font-size: 0.875rem; /* Font del bottone più piccolo */
    padding: 0.25rem 0.5rem; /* Dimensione compatta */
    border-radius: 4px;
    transition: all 0.2s ease; /* Animazione su hover */
}

.course .text-end {
    text-align: right; /* Allinea i contenuti a destra */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='%23ffffff' viewBox='0 0 30 30'%3E%3Cpath d='M4 7h22M4 15h22M4 23h22' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.5em 1.5em;
}

.input-group-append:hover button {
    background-color: #171f25;
    color: #FFFFFF;
}


.card-header a {
    --bs-text-opacity: 1;
    color: #333333;
}

table.fc-col-header {
    margin: 0 !important;
}

div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr {
    margin-left: 0;
    margin-right: 0;
    flex-wrap: wrap;
    margin-top: calc(-1* var(--bs-gutter-y));
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
}

    div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr div.fc-toolbar-chunk {
        text-align: center;
        flex: 0 0 auto;
        width: 100%;
    }

    div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > :first-child, 
    div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > :nth-child(2) {
        margin-bottom: 1rem !important;
    }

.fc .fc-button-primary {
    background-color: #3ba3f8 !important;
    border: 1px solid #FFFFFF !important;
}

.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: #038eff !important;
}

.fc .fc-button-primary:hover, .fc .fc-button-primary:not(:disabled).fc-button-active:hover {
    background-color: transparent !important;
    border: 1px solid #3ba3f8 !important;
    color: #3ba3f8 !important;
}

.fc-day-today,
.fc-col-today {
    background-color: #F8F8F8 !important;
}

a.fc-col-header-cell-cushion {
    color: #3ba3f8 !important;
}

@media (min-width: 992px) {
    #sidebarCollapse {
            transition: width .3s ease;
        }

        div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr div.fc-toolbar-chunk {
            flex: 0 0 auto;
            width: 33.33333333%;
            margin-bottom: 0 !important;
        }

        div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > :first-child {
            text-align: left !important;
        }

        div.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > :nth-child(3) {
            text-align: right !important;
        }
    }

    @media (min-width: 768px) {

        .container-fluid, .container {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            padding-top: 3rem;
            padding-bottom: 3rem;
            margin-top: 2rem;
        }

        .order-md-6 {
            order: 6 !important;
        }

        .order-md-7 {
            order: 7 !important;
        }

        .btn-custom {
            line-height: 1.2 !important;
        }
    } 

@media (min-width: 1024px) {
    .container-fluid, .container {
        padding-left: 3.5rem;
        padding-right: 3.5rem;
        padding-top: 3rem;
        padding-bottom: 3rem;
        margin-top: 2rem;
    }
}