/**
 * Rinasce nel Suono - Custom Colors
 * Colori brand - elearn.rinascerenelsuono.com
 */

:root {
    /* Colori principali Vibrasonic */
    --vibrasonic-primary: #1a1a1a; /* Nero principale */
    --vibrasonic-secondary: #d4af37; /* Oro/dorato */
    --vibrasonic-gold: #c9a42e; /* Oro barre titolo (breadcrumb, dashboard) */
    --vibrasonic-accent: #8b7355; /* Marrone/beige */
    --vibrasonic-text: #333333;
    --vibrasonic-light: #f5f5f5;
    --vibrasonic-white: #ffffff;
    /* Override tema: niente viola, usa nero/oro Rinasce nel Suono */
    --primaryColor: #1a1a1a;
    --secondaryColor: #d4af37;
}

/* Override colori principali */
.default__button {
    background-color: var(--vibrasonic-primary);
    color: var(--vibrasonic-white);
    border-color: var(--vibrasonic-primary);
}

.default__button:hover {
    background-color: var(--vibrasonic-secondary);
    border-color: var(--vibrasonic-secondary);
    color: var(--vibrasonic-white);
}

/* Header: sfondo bianco */
.headerarea,
.header__area.sticky {
    background-color: #ffffff !important;
}
/* Link menu desktop: scuro, hover oro */
.headerarea__main__menu nav ul > li > a {
    color: #1a1a1a !important;
}
.headerarea__main__menu nav ul > li:hover > a {
    color: #d4af37 !important;
}
/* Nome utente / Login in header: scuro, hover oro */
.headerarea__login a {
    color: #1a1a1a !important;
}
.headerarea__login a:hover {
    color: #d4af37 !important;
}
/* Logo: niente effetti, solo dimensioni */
.headerarea .headerarea__left__logo img,
.headerarea .mobile-logo img {
    max-height: 50px;
    width: auto;
    display: block;
    filter: none;
}
.headerarea .mobile-logo img {
    max-height: 45px;
}
/* Pulsanti header: oro; CORSI e ADMIN verdi */
.headerarea__button a.default__button,
.headerarea__button a {
    background-color: #d4af37 !important;
    border-color: #d4af37 !important;
    color: #1a1a1a !important;
}
.headerarea__button a.default__button:hover,
.headerarea__button a:hover {
    background-color: #c9a42e !important;
    border-color: #c9a42e !important;
    color: #1a1a1a !important;
}
/* Area Corsi (studenti) e Admin: sempre verdi in desktop */
.headerarea__button a[href*="student/dashboard.php"],
.headerarea__button a[href*="admin/dashboard.php"] {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
}
.headerarea__button a[href*="student/dashboard.php"]:hover,
.headerarea__button a[href*="admin/dashboard.php"]:hover {
    background-color: #218838 !important;
    border-color: #218838 !important;
    color: #fff !important;
}

/* Menu mobile (hamburger) - visibile e cliccabile */
.mob_menu_wrapper {
    display: none;
}
@media (max-width: 991px) {
    .mob_menu_wrapper {
        display: block !important;
    }
    /* Barra mobile (logo + hamburger) bianca come header */
    .mob_menu_wrapper,
    .headerarea .mob_menu_wrapper {
        background-color: #ffffff !important;
        padding: 12px 0;
    }
    .mobile-aside-button {
        display: inline-block;
        padding: 10px;
        color: #1a1a1a;
        font-size: 28px;
        line-height: 1;
    }
    .mobile-aside-button:hover {
        color: #d4af37;
    }
}

/* Menu mobile: voci UNA SOTTO L'ALTRA, full-width, cliccabili – override globale li { display: inline-block } */

/* Pulsante AREA CORSI nel menu mobile (studenti) - ben evidente */
/* Pulsante AREA CORSI nel menu mobile: sempre in cima, verde ben evidente */
body .mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-area-corsi,
.mobile-menu-area-corsi {
    display: block !important;
    width: 100% !important;
    padding: 18px 24px !important;
    margin: 0 0 24px 0 !important;
    background-color: #28a745 !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4) !important;
    order: -1 !important; /* sopra tutto nel flex */
    flex-shrink: 0 !important;
}
body .mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-area-corsi:hover,
.mobile-menu-area-corsi:hover {
    background-color: #218838 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(40, 167, 69, 0.5) !important;
}

/* Sidebar Area Corsi (dashboard studente) - su mobile chiusa di default, toggle evidente */
.student-sidebar-toggle {
    display: none;
    width: 100%;
    padding: 14px 20px;
    margin-bottom: 0;
    background-color: #28a745;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-align: left;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}
.student-sidebar-toggle i:first-child {
    font-size: 1.3rem;
}
.student-sidebar-toggle .student-sidebar-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
}
.student-dashboard-sidebar.student-sidebar-open .student-sidebar-chevron {
    transform: rotate(180deg);
}
@media (max-width: 991px) {
    .student-sidebar-toggle {
        display: flex;
    }
    .student-dashboard-sidebar .student-sidebar-nav {
        display: none;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(0,0,0,0.08);
    }
    .student-dashboard-sidebar.student-sidebar-open .student-sidebar-nav {
        display: block;
    }
}
@media (min-width: 992px) {
    .student-sidebar-toggle {
        display: none !important;
    }
    .student-dashboard-sidebar .student-sidebar-nav {
        display: block !important;
    }
}

/* Lista richieste aiuto su mobile - card leggibili */
.help-requests-mobile {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.help-request-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 14px 16px;
}
.help-request-card__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.95rem;
}
.help-request-card__row:last-child {
    margin-bottom: 0;
}
.help-request-card__label {
    font-weight: 600;
    color: #495057;
    min-width: 72px;
}
.help-request-card__value {
    flex: 1;
    word-break: break-word;
}
.help-request-card__row--status {
    align-items: center;
}

.headerarea__left__logo img {
    max-height: 50px;
    width: auto;
}

/* Topbar: nera, testo bianco */
.topbararea,
.topbararea--2 {
    background-color: #000000;
    color: #ffffff;
}
.topbararea__left ul li,
.topbararea__left ul li a,
.topbararea__text p {
    color: #ffffff !important;
}
.topbararea__right .topbar__list ul li a {
    color: #ffffff !important;
}
.topbararea__right .topbar__list ul li a:hover {
    color: #d4af37 !important;
}
.topbararea__right .topbar__icon i {
    color: #d4af37 !important;
}

/* Links */
a {
    color: var(--vibrasonic-primary);
}

a:hover {
    color: var(--vibrasonic-secondary);
}

/* Footer */
.footerarea {
    background-color: var(--vibrasonic-primary);
    color: var(--vibrasonic-white);
}

.footerarea__heading h3,
.footerarea__content p,
.footerarea__list ul li a,
.footerarea__right__content span {
    color: var(--vibrasonic-white);
}

.footerarea__list ul li a:hover {
    color: var(--vibrasonic-secondary);
}

.footerarea__copyright__content p,
.footerarea__copyright__list ul li a {
    color: var(--vibrasonic-white);
}

/* Footer compatto: testo e link sempre visibili */
.footerarea__copyright__wrapper p,
.footerarea__copyright__wrapper p a,
.footerarea__copyright__wrapper .footerarea__copyright__list ul li a {
    color: #fff !important;
}
.footerarea__copyright__wrapper p a:hover,
.footerarea__copyright__wrapper .footerarea__copyright__list ul li a:hover {
    color: var(--vibrasonic-secondary) !important;
}

/* Dashboard */
.dashboard__nav__title h6 {
    color: var(--vibrasonic-primary);
}

.dashboard__nav ul li a.active {
    color: var(--vibrasonic-secondary);
}

/* Hero area */
.heroarea__content__heading {
    color: var(--vibrasonic-primary);
}

/* Course cards */
.coursearea__heading h3 a {
    color: var(--vibrasonic-primary);
}

.coursearea__heading h3 a:hover {
    color: var(--vibrasonic-secondary);
}

.coursearea__price__text {
    color: var(--vibrasonic-secondary);
}

/* Homepage - card corsi ordinate: immagine, categoria, titolo, prezzo, pulsante */
.home-courses .coursearea__wraper {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.home-courses .coursearea__img {
    width: 100% !important;
    height: 200px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    background-color: #f0f0f0;
    flex-shrink: 0;
}

.home-courses .coursearea__img img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    display: block;
}

.home-courses .coursearea__content {
    padding: 18px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.home-courses .coursearea__list {
    margin-bottom: 10px;
}

.home-courses .coursearea__list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.home-courses .coursearea__list li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #6c757d;
    background: #f8f9fa;
    padding: 4px 10px;
    border-radius: 20px;
}

.home-courses .coursearea__list li i {
    font-size: 0.85rem;
    opacity: 0.9;
}

.home-courses .coursearea__heading {
    margin-bottom: 10px;
}

.home-courses .coursearea__heading h3 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.35;
    font-weight: 600;
}

.home-courses .coursearea__heading h3 a {
    text-decoration: none;
}

.home-courses .coursearea__price {
    margin-bottom: 14px;
    font-size: 1.15rem;
    font-weight: 700;
}

.home-courses .coursearea__price__text {
    color: var(--vibrasonic-secondary);
    letter-spacing: 0.02em;
}

.home-courses .coursearea__button {
    margin-top: auto;
}

.home-courses .coursearea__button .default__button {
    width: 100%;
    text-align: center;
    padding: 10px 16px;
}

@media (max-width: 767px) {
    .home-courses .coursearea__img,
    .home-courses .coursearea__img img {
        height: 200px !important;
    }
    .home-courses .coursearea__content {
        padding: 14px 16px 18px;
    }
}

/* Catalogo corsi - immagine contenuta e prezzo in evidenza */
.courses-catalog .coursearea__img {
    height: 200px !important;
    max-height: 200px !important;
    min-height: 200px !important;
    overflow: hidden !important;
    background-color: #f0f0f0;
}

.courses-catalog .coursearea__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

@media (max-width: 767px) {
    .courses-catalog .coursearea__img {
        height: 180px !important;
        max-height: 180px !important;
        min-height: 180px !important;
    }
}

/* Prezzo / Gratuito - grafica migliorata */
.courses-catalog .coursearea__price--catalog {
    margin: 12px 0 14px 0;
    min-height: 36px;
    display: flex;
    align-items: center;
}

.courses-catalog .coursearea__price__value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--vibrasonic-primary);
    letter-spacing: 0.02em;
}

.courses-catalog .coursearea__price__badge--free {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-radius: 50px;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

/* Fix per login form - assicura visibilità */
.loginarea__wraper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.loginarea__wraper form {
    display: block !important;
}

.loginarea__wraper .login__form {
    display: block !important;
    margin-top: 25px;
}

.loginarea__wraper .common__login__input {
    display: block !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: transparent;
    border: 1px solid var(--borderColor);
    font-size: 14px;
    font-weight: 400;
    height: 52px;
    padding: 3px 20px;
    border-radius: 5px;
    color: var(--contentColor);
}

/* Barra titolo (breadcrumb) - viola del tema, ridotta su tutte le pagine */
.breadcrumbarea {
    padding-top: 50px !important;
    padding-bottom: 30px !important;
    background-color: #5F2DED !important;
    background: #5F2DED !important;
}
.breadcrumbarea .breadcrumb__title h2,
.breadcrumbarea .breadcrumb__content__wraper .breadcrumb__title__heading {
    color: #ffffff !important;
}
.breadcrumbarea .breadcrumb__inner ul li {
    color: rgba(255,255,255,0.85) !important;
}
.breadcrumbarea .breadcrumb__inner ul li a {
    color: #ffffff !important;
}
.breadcrumbarea .breadcrumb__inner ul li a:hover {
    color: #d4af37 !important;
}
.breadcrumbarea .breadcrumb__inner ul li:not(:last-child)::after {
    color: rgba(255,255,255,0.6) !important;
}
@media (min-width: 768px) and (max-width: 991px) {
    .breadcrumbarea {
        padding-top: 40px !important;
        padding-bottom: 25px !important;
    }
}
@media (max-width: 767px) {
    .breadcrumbarea {
        padding-top: 30px !important;
        padding-bottom: 20px !important;
    }
}
.breadcrumb__content__wraper .breadcrumb__title h2 {
    font-size: 32px !important;
    line-height: 1.3 !important;
}
@media (max-width: 767px) {
    .breadcrumb__content__wraper .breadcrumb__title h2 {
        font-size: 26px !important;
    }
}

/* Login page - riduce spazio sopra il form */
body.login-page .breadcrumbarea {
    padding-top: 30px !important;
    padding-bottom: 20px !important;
}

body.login-page .loginarea {
    padding-top: 20px !important;
}

/* Profile page - riduce altezza breadcrumb */
.breadcrumbarea.profile-breadcrumb {
    padding-top: 50px !important;
    padding-bottom: 30px !important;
}

@media (max-width: 767px) {
    .breadcrumbarea.profile-breadcrumb {
        padding-top: 30px !important;
        padding-bottom: 20px !important;
    }
}

/* Courses page - riduce altezza breadcrumb */
.breadcrumbarea.courses-breadcrumb {
    padding-top: 50px !important;
    padding-bottom: 30px !important;
}

@media (max-width: 767px) {
    .breadcrumbarea.courses-breadcrumb {
        padding-top: 30px !important;
        padding-bottom: 20px !important;
    }
}

/* Nascondi pulsante dark/light mode ovunque */
.mode_switcher,
#light--to-dark-button,
.light--to-dark-button {
    display: none !important;
    visibility: hidden !important;
}

/* Area studente: header compatto e immagine piccola */
.dashboardarea--student .dashboardarea__img {
    min-height: 0 !important;
}
.dashboardarea--student .dashboardarea__inner {
    padding: 16px 24px !important;
    min-height: 0 !important;
}
.dashboardarea--student .dashboardarea__left__img {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin-right: 14px !important;
    flex-shrink: 0;
}

.dashboardarea--student .dashboardarea__left__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    padding: 2px !important;
}

@media (max-width: 767px) {
    .dashboardarea--student .dashboardarea__left__img {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        margin-right: 10px !important;
    }
}

/* Area studente: copertina corsi più piccola (card compatte) */
.student-dashboard-content .coursearea__img,
.student-dashboard-content .coursearea__wraper .coursearea__img {
    height: 120px !important;
    max-height: 120px !important;
    min-height: 0 !important;
    overflow: hidden;
    flex-shrink: 0;
}

.student-dashboard-content .coursearea__img img,
.student-dashboard-content .coursearea__wraper .coursearea__img img {
    width: 100% !important;
    height: 100% !important;
    max-height: 120px !important;
    object-fit: cover;
    display: block;
}

.student-dashboard-content .coursearea__img--placeholder {
    min-height: 120px !important;
    height: 120px !important;
}

@media (max-width: 767px) {
    .student-dashboard-content .coursearea__img,
    .student-dashboard-content .coursearea__wraper .coursearea__img,
    .student-dashboard-content .coursearea__img--placeholder {
        height: 100px !important;
        max-height: 100px !important;
        min-height: 0 !important;
    }
    .student-dashboard-content .coursearea__img img,
    .student-dashboard-content .coursearea__wraper .coursearea__img img {
        max-height: 100px !important;
    }
}

/* Area admin: immagine profilo circolare nella barra viola */
.dashboardarea__inner.admin__dashboard__inner .dashboardarea__left__img {
    width: 140px !important;
    height: 140px !important;
    min-width: 140px !important;
    min-height: 140px !important;
    max-width: 140px !important;
    max-height: 140px !important;
    margin-right: 20px !important;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.dashboardarea__inner.admin__dashboard__inner .dashboardarea__left__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 3px solid rgba(255, 255, 255, 0.3) !important;
    padding: 0 !important;
    display: block;
}

/* Posizionamento per sovrapposizione al bordo inferiore */
/* Barra titolo dashboard: viola del tema */
body .dashboardarea__inner.admin__dashboard__inner,
.dashboardarea__img .dashboardarea__inner.admin__dashboard__inner {
    position: relative;
    overflow: visible;
    padding: 40px !important;
    padding-bottom: 20px !important;
    background-color: #5F2DED !important;
    background: #5F2DED !important;
    color: #ffffff !important;
}
.dashboardarea__inner.admin__dashboard__inner h4,
.dashboardarea__inner.admin__dashboard__inner h5,
.dashboardarea__inner.admin__dashboard__inner .dashboard__table__heading h4,
.dashboardarea__inner.admin__dashboard__inner .dashboardarea__left__content h4,
.dashboardarea__inner.admin__dashboard__inner .dashboardarea__left__content h5,
.dashboardarea__inner.admin__dashboard__inner .dashboardarea__left__content ul li {
    color: #ffffff !important;
}
.dashboardarea__inner.admin__dashboard__inner .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}
/* Contenuti in card/tabella sotto la barra: sfondo chiaro per leggibilità */
.dashboardarea__inner.admin__dashboard__inner .dashboard__table {
    background-color: #ffffff !important;
    color: #333 !important;
    padding: 1.25rem !important;
    border-radius: 8px !important;
    margin-top: 1rem !important;
}
.dashboardarea__inner.admin__dashboard__inner .dashboard__table__heading h4 {
    color: #1a1a1a !important;
}
.dashboardarea__inner.admin__dashboard__inner .dashboard__table table,
.dashboardarea__inner.admin__dashboard__inner .dashboard__table .text-muted,
.dashboardarea__inner.admin__dashboard__inner .card,
.dashboardarea__inner.admin__dashboard__inner .card-body,
.dashboardarea__inner.admin__dashboard__inner .form-check-label {
    color: #333 !important;
}
.dashboardarea__inner.admin__dashboard__inner .dashboard__table .text-muted {
    color: #6c757d !important;
}
.dashboardarea__inner.admin__dashboard__inner .card-header {
    background-color: #f8f9fa !important;
    color: #1a1a1a !important;
    border-color: #eee;
}
.dashboardarea__inner.admin__dashboard__inner .card-body {
    background-color: #fff !important;
}
.dashboardarea__inner.admin__dashboard__inner .table {
    color: #333 !important;
}
.dashboardarea__inner.admin__dashboard__inner .table thead th {
    background-color: #f8f9fa !important;
    color: #1a1a1a !important;
    border-color: #dee2e6;
}
.dashboardarea__inner.admin__dashboard__inner .table tbody td,
.dashboardarea__inner.admin__dashboard__inner .table tbody th {
    color: #333 !important;
}
.dashboardarea__inner.admin__dashboard__inner .table tbody td a {
    color: #0d6efd !important;
}
.dashboardarea__inner.admin__dashboard__inner .alert {
    color: inherit;
}
.dashboardarea__inner.admin__dashboard__inner .star,
.dashboardarea__inner.admin__dashboard__inner .dashboardarea__left__content .dashboardarea__star span {
    color: #ffffff !important;
}
/* Pulsante nella barra (es. "Vai ai miei corsi") su sfondo viola */
.dashboardarea__inner.admin__dashboard__inner .default__button {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #5F2DED !important;
}
.dashboardarea__inner.admin__dashboard__inner .default__button:hover {
    background-color: rgba(255,255,255,0.9) !important;
    border-color: rgba(255,255,255,0.9) !important;
    color: #5F2DED !important;
}

.dashboardarea__inner.admin__dashboard__inner .dashboardarea__left__img {
    margin-bottom: -25px !important;
}

@media (min-width: 768px) and (max-width: 991px) {
    .dashboardarea__inner.admin__dashboard__inner .dashboardarea__left__img {
        width: 120px !important;
        height: 120px !important;
        min-width: 120px !important;
        min-height: 120px !important;
        max-width: 120px !important;
        max-height: 120px !important;
        margin-bottom: -20px !important;
    }
}

@media (max-width: 767px) {
    .dashboardarea__inner.admin__dashboard__inner .dashboardarea__left__img {
        width: 100px !important;
        height: 100px !important;
        min-width: 100px !important;
        min-height: 100px !important;
        max-width: 100px !important;
        max-height: 100px !important;
        margin-right: 16px !important;
        margin-bottom: -15px !important;
    }
}

/* Descrizione corso (HTML dall’editor) */
.course-detail-description {
    line-height: 1.6;
}
.course-detail-description p {
    margin-bottom: 0.75rem;
}
.course-detail-description p:last-child {
    margin-bottom: 0;
}
.course-detail-description strong,
.course-detail-description b {
    font-weight: 700;
}
.course-detail-description ul,
.course-detail-description ol {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
}
.course-detail-description li {
    margin-bottom: 0.25rem;
}
.course-detail-description h2,
.course-detail-description h3 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.course-detail-description h2 { font-size: 1.35rem; }
.course-detail-description h3 { font-size: 1.15rem; }
.course-detail-description a {
    color: var(--vibrasonic-secondary, #d4af37);
    text-decoration: underline;
}

/* Tabella studenti admin - più comoda e leggibile */
.dashboard__table--students {
    width: 100% !important;
    max-width: 100% !important;
}
.table-responsive {
    width: 100% !important;
    overflow-x: auto;
}
.dashboard__table--students .table-responsive {
    -webkit-overflow-scrolling: touch;
}
.admin-students-table {
    width: 100% !important;
    min-width: 1200px;
    margin-bottom: 0;
    font-size: 0.9375rem;
}
.admin-students-table thead th .sortable-th:hover {
    color: var(--vibrasonic-primary, #5F2DED) !important;
}
.admin-students-table thead th {
    font-weight: 600;
    padding: 0.85rem 0.75rem;
    border-bottom-width: 2px;
    white-space: nowrap;
}
.admin-students-table tbody td {
    padding: 0.75rem;
    vertical-align: middle;
}
.admin-students-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.03);
}
.admin-students-table .fw-mono {
    font-variant-numeric: tabular-nums;
}
.admin-students-table .btn-group-sm .btn {
    padding: 0.35rem 0.5rem;
}
/* Dettagli corsi: tooltip CSS al passaggio del mouse (elenco corsi visibile) */
.admin-students-table .student-courses-dettagli-wrapper {
    position: relative;
    display: inline-block;
}
.admin-students-table .student-courses-dettagli {
    cursor: help;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.admin-students-table .student-courses-dettagli:hover {
    color: var(--vibrasonic-primary, #5F2DED) !important;
}
.admin-students-table .student-courses-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: #2d2d2d;
    color: #ffffff !important;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
    max-width: 320px;
    min-width: 180px;
    z-index: 1060;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    pointer-events: none;
    transition: visibility 0.15s, opacity 0.15s;
    text-align: left;
}
.admin-students-table .student-courses-tooltip-item {
    display: block;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff !important;
    text-align: left;
}
.admin-students-table .student-courses-tooltip-item:last-child {
    border-bottom: none;
}
.admin-students-table .student-courses-tooltip-item:first-child {
    padding-top: 0;
}
.admin-students-table .student-courses-tooltip-title {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
    color: #ffffff !important;
}
.admin-students-table .student-courses-tooltip-prog-line {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    padding-left: 0;
}
.admin-students-table .student-courses-semaforo {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.admin-students-table .student-courses-semaforo--green {
    background: #22c55e;
}
.admin-students-table .student-courses-semaforo--yellow {
    background: #eab308;
}
.admin-students-table .student-courses-semaforo--red {
    background: #ef4444;
}
.admin-students-table .student-courses-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #2d2d2d;
}
.admin-students-table .student-courses-dettagli-wrapper:hover .student-courses-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Overlay fine video: copre "More from Vibrasonic" di Vimeo (non mostrarlo mai) */
.video-end-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    border-radius: inherit;
}
.video-end-overlay__content {
    text-align: center;
    color: #fff;
    padding: 1.5rem;
    max-width: 360px;
}
.video-end-overlay__icon {
    font-size: 3rem;
    color: #28a745;
    margin-bottom: 0.75rem;
}
.video-end-overlay__title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
}
.video-end-overlay__text {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

@media (max-width: 991px) {
    .admin-students-table {
        font-size: 0.875rem;
    }
    .admin-students-table thead th,
    .admin-students-table tbody td {
        padding: 0.6rem 0.5rem;
    }
}

/* Progressione step sotto Stato: ben visibile */
.admin-progression-badge {
    display: inline-block;
    margin-top: 2px;
    padding: 2px 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #0d6efd;
    background: #e7f1ff;
    border-radius: 4px;
    border: 1px solid rgba(13, 110, 253, 0.35);
}
.admin-progression-badge:hover {
    background: #cfe2ff;
}

/* Admin sidebar: compressa di default, apri/chiudi con pulsante */
.admin-sidebar-col {
    transition: flex 0.25s ease, max-width 0.25s ease, width 0.25s ease;
}
.admin-sidebar-col.admin-sidebar-col--collapsed {
    flex: 0 0 72px !important;
    max-width: 72px !important;
    min-width: 72px !important;
    width: 72px !important;
}
/* Quando la sidebar è chiusa, la colonna contenuto si allarga per tutta la pagina */
.admin-sidebar-col.admin-sidebar-col--collapsed + .col-xl-9,
.admin-sidebar-col.admin-sidebar-col--collapsed + .col-lg-9,
.admin-sidebar-col.admin-sidebar-col--collapsed + [class*="col-"] {
    flex: 1 1 0%;
    min-width: 0;
    max-width: none !important;
}
/* Area tabella: padding ridotto per usare tutto lo spazio a destra */
.dashboardarea .dashboard .container-fluid.full__width__padding {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
.full__width__padding {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
@media (min-width: 992px) {
    .dashboardarea .dashboard .container-fluid.full__width__padding {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}
/* Row dashboard: 100% larghezza (Bootstrap di default usa margin negativi che limitano) */
.dashboard .container-fluid.full__width__padding .row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* dashboard__content__wraper e tabella: usano tutto lo spazio disponibile */
.dashboard .dashboard__content__wraper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
.dashboard .dashboard__table,
.dashboard .dashboard__table--students .table-responsive,
.dashboard .admin-students-table {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
.dashboard .admin-students-table {
    table-layout: auto;
}
/* Colonna contenuto: niente padding laterale eccessivo così la tabella arriva ai bordi */
.dashboard .row > .col-xl-9,
.dashboard .row > .col-lg-9,
.dashboard .row > [class*="col-"]:not(.admin-sidebar-col) {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Pagina studenti: pulsante "Menu" piccolino, subito sotto la barra viola (non una barra nera) */
.admin-sidebar-overlay-toggle {
    position: fixed;
    left: 12px;
    top: 200px;
    z-index: 1045;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 6px 10px;
    background: var(--vibrasonic-primary, #1a1a1a);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: background 0.2s;
    line-height: 1.2;
}
.admin-sidebar-overlay-toggle:hover {
    background: var(--vibrasonic-secondary, #d4af37);
    color: #1a1a1a;
}
.admin-sidebar-overlay-toggle i {
    font-size: 1rem;
}
.admin-sidebar-overlay-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.admin-sidebar-overlay-backdrop.admin-sidebar-overlay-backdrop--visible {
    opacity: 1;
    pointer-events: auto;
}
/* Sidebar overlay: fuori dal flusso, appare sopra la tabella (nessuno spostamento) */
.admin-sidebar-overlay-col {
    position: fixed !important;
    left: -320px;
    top: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    z-index: 1050;
    transition: left 0.3s ease;
    background: var(--vibrasonic-light, #f5f5f5);
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    overflow-y: auto;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.admin-sidebar-overlay-col.admin-sidebar-overlay-open {
    left: 0;
}
.admin-sidebar-overlay-col .admin-sidebar-wrapper {
    width: 100% !important;
    min-width: 280px;
    height: 100%;
    padding: 1rem 0;
}
.admin-sidebar-overlay-col .dashboard__nav__title,
.admin-sidebar-overlay-col .admin-sidebar-label,
.admin-sidebar-overlay-col .dashboard__nav a {
    display: flex !important;
    visibility: visible !important;
}
.admin-sidebar-overlay-col .admin-sidebar-toggle-text {
    display: inline !important;
}

.admin-sidebar-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transition: width 0.25s ease, max-width 0.25s ease;
    position: relative;
    background: var(--vibrasonic-light, #f5f5f5);
    border-radius: 8px;
    padding: 0.75rem 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.admin-sidebar-wrapper.admin-sidebar-collapsed {
    width: 72px !important;
    max-width: 72px !important;
    min-width: 72px !important;
    padding: 0.35rem 0;
}
.admin-sidebar-wrapper.admin-sidebar-collapsed .dashboard__inner {
    width: 72px !important;
    max-width: 72px !important;
    min-width: 72px !important;
    overflow: hidden;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}
.admin-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border: none;
    background: var(--vibrasonic-primary, #1a1a1a);
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
}
.admin-sidebar-toggle:hover {
    background: var(--vibrasonic-secondary, #d4af37);
    color: #fff;
}
.admin-sidebar-wrapper.admin-sidebar-collapsed .admin-sidebar-toggle {
    padding: 0.5rem;
    justify-content: center;
}
.admin-sidebar-wrapper.admin-sidebar-collapsed .admin-sidebar-toggle-text {
    display: none;
}
/* Quando chiusa: nascondi completamente la barra del benvenuto */
.admin-sidebar-wrapper.admin-sidebar-collapsed .dashboard__nav__title {
    display: none !important;
}
.admin-sidebar-wrapper.admin-sidebar-collapsed .dashboard__nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    min-height: 44px;
}
.admin-sidebar-wrapper.admin-sidebar-collapsed .dashboard__nav a svg {
    flex-shrink: 0;
    margin: 0;
    width: 22px;
    height: 22px;
}
.admin-sidebar-wrapper.admin-sidebar-collapsed .dashboard__nav .admin-sidebar-label,
.admin-sidebar-wrapper.admin-sidebar-collapsed .dashboard__nav .badge {
    display: none !important;
}
.admin-sidebar-wrapper .dashboard__nav a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.admin-sidebar-wrapper .dashboard__nav a svg {
    flex-shrink: 0;
}
.admin-sidebar-wrapper.admin-sidebar-collapsed .dashboard__nav {
    width: 72px;
}
@media (max-width: 991px) {
    .admin-sidebar-col.admin-sidebar-col--collapsed {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        order: 2;
    }
    .admin-sidebar-wrapper.admin-sidebar-collapsed {
        width: 100%;
    }
    /* Su mobile: tabella prima (sopra), menu sotto; entrambi a tutta larghezza */
    .dashboard .row {
        flex-direction: column;
    }
    .dashboard .row .admin-sidebar-col {
        order: 2;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }
    .dashboard .row .admin-sidebar-col + [class*="col-"] {
        order: 1;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }
    .dashboard .container-fluid.full__width__padding {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .dashboard__content__wraper,
    .dashboard__table--students .table-responsive,
    .dashboard__table,
    .admin-students-table {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* MOBILE OFF-CANVAS MENU – layout verticale, full-width, link ben separati e cliccabili */
body .mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-wrap .mobile-navigation ul.mobile-menu,
body .mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-wrap .mobile-navigation ul.mobile-menu-stack,
body .mobile-off-canvas-active .header-mobile-aside-wrap ul.mobile-menu,
body .mobile-off-canvas-active .header-mobile-aside-wrap ul.mobile-menu-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1rem 0 !important;
}

body .mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-wrap .mobile-navigation ul.mobile-menu li,
body .mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-wrap .mobile-navigation ul.mobile-menu-stack li,
body .mobile-off-canvas-active .header-mobile-aside-wrap ul.mobile-menu li,
body .mobile-off-canvas-active .header-mobile-aside-wrap ul.mobile-menu-stack li {
  display: block !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Voci menu: solo testo + icona, niente box grigi */
body .mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-wrap .mobile-navigation ul.mobile-menu li a,
body .mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-wrap .mobile-navigation ul.mobile-menu-stack li a,
body .mobile-off-canvas-active .header-mobile-aside-wrap ul.mobile-menu li a,
body .mobile-off-canvas-active .header-mobile-aside-wrap ul.mobile-menu-stack li a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 12px 0 !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  background: transparent !important;
  border: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-wrap .mobile-navigation ul.mobile-menu li a:hover,
body .mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-wrap .mobile-navigation ul.mobile-menu-stack li a:hover,
body .mobile-off-canvas-active .header-mobile-aside-wrap ul.mobile-menu li a:hover,
body .mobile-off-canvas-active .header-mobile-aside-wrap ul.mobile-menu-stack li a:hover {
  background: transparent !important;
  color: #d4af37 !important;
}

body .mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-wrap .mobile-navigation ul.mobile-menu li a i,
body .mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-wrap .mobile-navigation ul.mobile-menu-stack li a i,
body .mobile-off-canvas-active .header-mobile-aside-wrap ul.mobile-menu li a i,
body .mobile-off-canvas-active .header-mobile-aside-wrap ul.mobile-menu-stack li a i {
  margin-right: 12px !important;
  font-size: 18px !important;
  flex: 0 0 auto !important;
}

body .mobile-off-canvas-active .header-mobile-aside-wrap {
  padding: 20px 16px !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Pulsante AREA CORSI sempre primo (sopra la lista) */
body .mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-area-corsi {
  order: -1 !important;
  margin-bottom: 24px !important;
}
/* ADMIN in menu mobile: verde grande come AREA CORSI, in cima se presente */
body .mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-admin {
  order: -2 !important;
  margin-bottom: 12px !important;
}
body .mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-wrap {
  order: 0 !important;
  flex: 1 1 auto !important;
}

/* Area personale + Logout: separazione visiva dal resto del menu */
body .mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-wrap .mobile-navigation ul.mobile-menu li.mobile-menu-area-personale-sep,
body .mobile-off-canvas-active .header-mobile-aside-wrap ul.mobile-menu li.mobile-menu-area-personale-sep {
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(0,0,0,0.12) !important;
}

/* Lezione: video Vimeo – visibile, dimensionato, play cliccabile */
.lesson-video-wrapper {
  width: 100%;
}
.lesson-video-wrapper .ratio.ratio-16x9 {
  position: relative;
  width: 100%;
  min-height: 200px;
  background: #111;
  overflow: visible; /* evita che tagli il pulsante play di Vimeo */
}
/* Non aggiungere ::before qui: usa quello di Bootstrap per il ratio; evita che copra il player */
.lesson-video-wrapper .ratio.ratio-16x9 > iframe#vimeo-player-iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  z-index: 1;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.lesson-video-wrapper .ratio.ratio-16x9 .video-end-overlay {
  z-index: 2;
}
/* Se Bootstrap ratio usa ::before, tienilo dietro al player e non cliccabile */
.lesson-video-wrapper .ratio.ratio-16x9::before {
  pointer-events: none !important;
  z-index: 0 !important;
}