/*
 * COP Academy — Moodle header customisations
 * ============================================
 * Obiettivo: allineare l'header Moodle all'aspetto dell'header WordPress.
 * Iniettato via local_cop_academy_theme → db/hooks.php (Moodle 4.3+ Hooks API).
 * Modifica liberamente questo file; è indipendente dal tema mb2nl.
 */


/* ═══════════════════════════════════════════════════════════════════════════
   BRAND TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --cop-dark:    #273E4D;
    --cop-accent:  #D3521F;
    --cop-border:  #e2e2e2;
    /* --tgsdb_cheight è gestita dinamicamente dal JS di mb2nl (tgsdb.js):
       la imposta su .toggle-sidebar in base a header height - scrollTop.
       Non forziamo il valore qui per non bloccare lo shrink dell'header. */
}


/* ═══════════════════════════════════════════════════════════════════════════
   0. EDITING MODE TOGGLE — nascosto per studenti (non-editing roles)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nasconde il toggle "Modalità di modifica" per chi non è docente/admin.
   Moodle aggiunge .editing al body solo quando l'editing è attivo;
   gli utenti senza il permesso non vedono comunque il pulsante,
   ma questo CSS agisce come ulteriore salvaguardia visiva. */
body:not(.editing) .editmode-switch-form,
body:not(.editing) [data-action="toggleeditingmode"],
body:not(.editing) .custom-switch.editmode {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   1. TOP BAR — nascosta (non c'è nell'header WordPress)
   ═══════════════════════════════════════════════════════════════════════════ */

.top-bar {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. HEADER PRINCIPALE — sfondo bianco, bordo sottile, nessuna ombra pesante
   ═══════════════════════════════════════════════════════════════════════════ */

.header-innner,
.header-inner2 {
    background-color: #ffffff !important;
    box-shadow: 0 1px 0 var(--cop-border) !important;
}

#main-header {
    box-shadow: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. TUTTI I TESTI SOTTO LE ICONE — nascosti (Cerca, Login, Notifiche, Messaggi…)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nasconde QUALSIASI testo/label sotto le icone dell'header:
   .text1 → Cerca, Login (mb2nl)
   Copre anche i plugin Moodle: Notifiche, Messaggi (.popover-region-toggle) */
.header-tools .text1,
.header-tools .popover-region-toggle .text1,
.theme-plugins .text1,
.theme-plugins .label,
.header-tools-link .text1 {
    display: none !important;
}

/* Resetta il layout flex column → centered icon only */
.header-tools .tool-search {
    display: inline-flex !important;
    flex-flow: row !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--cop-dark) !important;
    cursor: pointer;
}

.header-tools .tool-search i {
    font-size: 1.5rem !important;
    line-height: 1 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4A. STATO GUEST — loginbtn diventa icona persona WP, mtool-login nascosto
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reset pillola arancione */
body.notloggedin .header-tools .loginbtn {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--cop-dark) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    height: auto !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: opacity 0.15s !important;
}

body.notloggedin .header-tools .loginbtn:hover {
    background: none !important;
    opacity: 0.7;
}

/* Nasconde lucchetto e testo "Login" */
body.notloggedin .header-tools .loginbtn .text1,
body.notloggedin .header-tools .loginbtn .btn-icon {
    display: none !important;
}

/* Inietta SVG persona di WordPress tramite mask-image */
body.notloggedin .header-tools .loginbtn::before {
    content: '';
    display: block;
    width: 26px;
    height: 26px;
    background-color: var(--cop-dark);
    -webkit-mask-image: url('/local/cop_academy_theme/pix/person.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('/local/cop_academy_theme/pix/person.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    transition: opacity 0.15s;
}

body.notloggedin .header-tools .loginbtn:hover::before {
    opacity: 0.7;
}

/* Bottone mobile utente nascosto quando guest */
body.notloggedin .header-mtools-link.mtool-login {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4B. STATO LOGGATO — loginbtn nascosto, mtool-login styled come icona WP
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nasconde il loginbtn (modal login non serve quando sei loggato) */
body:not(.notloggedin) .header-tools .loginbtn {
    display: none !important;
}

/* mtool-login: sempre nascosto su desktop — userinitials è già nel .header-tools-link */
.header-mtools-link.mtool-login {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. COLORE ICONE HEADER — tutto in #273E4D come WordPress
   ═══════════════════════════════════════════════════════════════════════════ */

.header-tools .header-tools-link:not(.loginbtn),
.header-tools .popover-region-toggle {
    color: var(--cop-dark) !important;
}

/* Annulla il navcolor bianco che il tema mette per i dark header */
.tnavheader_dark #main-header .header-tools,
.tnavheader_transparent #main-header .header-tools {
    color: var(--cop-dark) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. USER INITIALS (utente loggato) — specchio di WP .wmb-avatar--user
   ═══════════════════════════════════════════════════════════════════════════ */

.header-tools .userinitials {
    background-color: #f0f0f0 !important;
    border: 2px solid #555 !important;
    box-shadow: none !important;
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. NAVIGAZIONE — colore e peso font allineati a WordPress
   ═══════════════════════════════════════════════════════════════════════════ */

/* Link navigazione principale */
.tnavheader_light #main-header .mb2mm-action,
.tnavheader_light #main-header .mb2mm-label {
    color: var(--cop-dark) !important;
    font-weight: 500 !important;
}

.tnavheader_light #main-header .mb2mm-action:hover {
    color: var(--cop-accent) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. MY COURSES DROPDOWN — specchio di WP .wmb-my-courses__*
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes copFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Garantisce che l'item "I miei corsi" sia allineato come gli altri item del menu */
.mb2mm li.mycourses.level-1.isparent {
    display: flex !important;
    align-items: center !important;
    position: relative;
}

/* Mostra il dropdown all'hover (sovrascrive eventuali hide del tema) */
.mb2mm li.mycourses.level-1.isparent:hover > .mb2mm-dd,
.mb2mm li.mycourses.level-1.isparent.is-open > .mb2mm-dd {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: copFadeIn 0.15s ease;
}

/* Posiziona i dropdown di primo livello appena sotto il testo (non in fondo all'header) */
@media only screen and (min-width: 992px) {
    .mb2mm .isparent.level-1 > .mb2mm-dd {
        top: 68%;
        left: 0;
    }
}

/* Badge contatore */
.mb2mm .mycourses .mb2mm-hlabel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--cop-accent);
    color: #fff !important;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Pannello dropdown */
.mb2mm .mycourses .mb2mm-dd {
    min-width: 280px;
    max-width: 340px;
    border-radius: 8px !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden;
    padding: 0;
    animation: copFadeIn 0.15s ease;
}

/* Freccia sopra il dropdown — nascosta */
.mb2mm .mycourses .mb2mm-ddarrow {
    display: none !important;
}

/* Righe corsi */
.mb2mm .mycourses .level-2 .mb2mm-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px !important;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.12s, color 0.12s;
}

.mb2mm .mycourses .level-2 .mb2mm-action .mb2mm-label {
    flex: 1;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal !important;
    text-transform: none !important;
}

.mb2mm .mycourses .level-2 .mb2mm-action::after {
    content: '→';
    font-size: 14px;
    opacity: 0.35;
    flex-shrink: 0;
    transition: opacity 0.12s, transform 0.12s;
}

.mb2mm .mycourses .level-2 .mb2mm-action:hover {
    background: #f7f9fc !important;
    color: var(--cop-accent) !important;
}

.mb2mm .mycourses .level-2 .mb2mm-action:hover::after {
    opacity: 1;
    transform: translateX(2px);
}

.mb2mm .mycourses .level-2:last-child .mb2mm-action {
    border-bottom: none;
}

/* Bottone "I miei corsi" nel header — stile pill outline */
.mb2mm .mycourses > .mb2mm-item > .mb2mm-action {
    border: 1.5px solid var(--cop-dark) !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
    font-weight: 600 !important;
    color: var(--cop-dark) !important;
    transition: background 0.15s, color 0.15s !important;
}

.mb2mm .mycourses > .mb2mm-item > .mb2mm-action:hover {
    background: var(--cop-dark) !important;
    color: #fff !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. LANGUAGE SELECTOR — solo bandiera, nessun testo né freccia
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nasconde "IT", "Italiano" e la freccia dropdown — resta solo la bandiera */
.mb2mm .lang-item .lang-shortname,
.mb2mm .lang-item .lang-fullname,
.mb2mm .lang-item .mb2mm-arrow,
.mb2mm .lang-item .mb2mm-toggle {
    display: none !important;
}

/* Bottone lingua: reset completo, nessun bordo né background */
.mb2mm .lang-item .mb2mm-action {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
}

/* Bandiera: dimensione coerente con le icone affiancate */
.mb2mm .lang-item .lang-flag {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    display: block !important;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #ccc;
    opacity: 0.9;
    overflow: hidden;
}

.mb2mm .lang-item .mb2mm-action:hover .lang-flag {
    opacity: 0.7;
}

/* Dropdown lingua: padding interno e bordo arrotondato */
.mb2mm .lang-item .mb2mm-dd {
    min-width: 160px !important;
    border-radius: 8px !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    padding: 6px 0 !important;
    overflow: hidden;
}

/* Freccia sopra il dropdown lingua — nascosta */
.mb2mm .lang-item .mb2mm-ddarrow {
    display: none !important;
}

/* Singole voci lingua */
.mb2mm .lang-item .mb2mm-dd .mb2mm-action {
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: var(--cop-dark) !important;
    transition: background 0.12s !important;
}

/* Mostra il nome della lingua dentro il dropdown */
.mb2mm .lang-item .mb2mm-dd .lang-shortname,
.mb2mm .lang-item .mb2mm-dd .lang-fullname {
    display: inline !important;
}

.mb2mm .lang-item .mb2mm-dd .mb2mm-action:hover {
    background: #f7f9fc !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. COERENZA DIMENSIONI E SPAZIATURE — tutti gli icon 26px, gap uniforme
   ═══════════════════════════════════════════════════════════════════════════ */

/* Gap uniforme tra tutti gli elementi della toolbar */
.header-tools.tools-pos2 {
    gap: 20px !important;
    align-items: center !important;
}

/* Search icon: forza 26px come la persona */
.header-tools .tool-search i.icon1 {
    font-size: 26px !important;
    line-height: 1 !important;
    width: 26px !important;
    display: block !important;
}

/* Persona (mask SVG): stessa dimensione del search */
.header-tools .loginbtn::before {
    width: 26px !important;
    height: 26px !important;
}

/* Allinea verticalmente tutti i tools link */
.header-tools .header-tools-link,
.header-tools .popover-region-toggle,
.mb2mm .lang-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Notifiche e Messaggi: icona 26px come search e persona */
.header-tools .popover-region-toggle i,
.header-tools .popover-region-toggle .icon,
.header-tools .header-tools-link i.icon1,
.header-tools .header-tools-link .icon1 {
    font-size: 26px !important;
    line-height: 1 !important;
    width: 26px !important;
    display: block !important;
}

/* Nasconde l'icona ri-user-3-line (icon1) su desktop */
.header-tools .header-tools-link i.icon1.ri-user-3-line,
.header-tools .header-tools-link .icon1.ri-user-3-line {
    display: none !important;
}

/* Nasconde btn-menu-logincontainer su tutte le dimensioni.
   Si usa l'ID per garantire priorità rispetto al JS di mb2nl
   che fa removeClass("d-none") sul button. */
#btn-menu-logincontainer,
.menu-extra-controls-login,
.header-mtools-link.mtool-login {
    display: none !important;
}

/* Header fisso a 110px — nessuno shrink al scroll.
   !important necessario per battere il CSS di mb2nl anche con .sticky-el. */
#master-header .flexcols,
#master-header.sticky-el .flexcols {
    height: 110px !important;
}

/* Logo fisso — proporzionato all'header */
#master-header .main-logo img {
    height: 70px !important;
    width: auto !important;
}
.btn.btn-primary {
    color: white;
}


.cm-type-facetoface input:not([type="checkbox"]):not([type="radio"]) {
    --mb2-btn-bw: 1px;
    font-weight: var(--mb2-pb-fwmedium);
    padding: var(--mb2-bs-btn-py) var(--mb2-btn-px);
    font-size: 1rem;
    border-radius: var(--mb2-btn-radius);
    line-height: 1.125;
    border-width: var(--mb2-btn-bw);
    box-shadow: none !important;
    text-decoration: none;
}

body:not(.path-admin) .cm-type-facetoface .generalbox a {
    background-color: var(--cop-accent);
    color: white;
    --mb2-btn-bw: 1px;
    font-weight: var(--mb2-pb-fwmedium);
    padding: var(--mb2-bs-btn-py) var(--mb2-btn-px);
    font-size: 1rem;
    border-radius: var(--mb2-btn-radius);
    line-height: 1.125;
    border-width: var(--mb2-btn-bw);
    box-shadow: none !important;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE: tutte le icone header spostate nel menu mobile
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {

    /* Nasconde la navigazione principale e il contenuto extra del menu mobile */
    #main-navigation .mb2mm > li:not(.mycourses),
    .mobilemenu_extra-content,
    .mobile-navbottom,
    .mobile-navbottom .extra-content {
        display: none !important;
    }

    /* Nasconde li.mycourses (dropdown) quando il JS ha già iniettato i link diretti */
    #main-navigation.cop-courses-injected .mb2mm > li.mycourses {
        display: none !important;
    }

    /* ── Lista corsi diretti nel burger ── */
    ul.cop-mobile-courses-list {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    ul.cop-mobile-courses-list .cop-mobile-course-item {
        border-bottom: 1px solid rgba(39,62,77,.08);
    }

    ul.cop-mobile-courses-list .cop-mobile-course-link {
        display: block;
        padding: 13px 20px 13px 28px;
        color: var(--cop-dark) !important;
        font-size: .95rem;
        font-weight: 500;
        text-decoration: none;
        position: relative;
    }

    ul.cop-mobile-courses-list .cop-mobile-course-link::before {
        content: '';
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--cop-accent);
    }

    ul.cop-mobile-courses-list .cop-mobile-course-link:hover {
        color: var(--cop-accent) !important;
        background: rgba(211,82,31,.05);
    }

    /* Nasconde la toggle-sidebar quando il burger menu è aperto (fino a 991px).
       La classe cop-burger-open è aggiunta dal JS tramite MutationObserver
       su #main-navigation.open (comportamento mb2nl). */
    body.cop-burger-open .sidebar-inner,
    body.cop-burger-open .toggle-sidebar,
    body.cop-burger-open .tgsdb-links,
    body.cop-burger-open .tgsdb-quicklinks {
        display: none !important;
    }

    /* Nasconde il bottone cerca nativo del menu mobile (sostituito dalle icone
       desktop spostate dal JS) */
    #btn-menu-searchcontainer {
        display: none !important;
    }

    /* Ogni tool spostato è visualizzato inline */
    .menu-extracontent-controls .cop-mobile-tool {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Reset stile su qualunque elemento interno (toggle popover, link nav, button) */
    .menu-extracontent-controls .cop-mobile-tool .popover-region-toggle,
    .menu-extracontent-controls .cop-mobile-tool .nav-link,
    .menu-extracontent-controls .cop-mobile-tool.tool-search {
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        color: inherit !important;
        cursor: pointer;
        gap: 4px;
    }

    /* Icone uniformi a 22 px come gli altri bottoni del menu mobile */
    .menu-extracontent-controls .cop-mobile-tool .icon,
    .menu-extracontent-controls .cop-mobile-tool i,
    .menu-extracontent-controls .cop-mobile-tool .popover-region-toggle .icon,
    .menu-extracontent-controls .cop-mobile-tool .popover-region-toggle i {
        font-size: 22px !important;
        width: 22px !important;
        height: 22px !important;
        line-height: 1 !important;
        display: block !important;
    }

    /* Badge notifiche rimane posizionato correttamente */
    .menu-extracontent-controls .cop-mobile-tool .count-container {
        position: relative;
    }

    /* Nasconde testi/label verbose — rimane solo l'icona */
    .menu-extracontent-controls .cop-mobile-tool .text1,
    .menu-extracontent-controls .cop-mobile-tool .sr-only-focusable,
    .menu-extracontent-controls .cop-mobile-tool .notification-popover-header,
    .menu-extracontent-controls .cop-mobile-tool .sr-only {
        display: none !important;
    }

    /* User initials (avatar) nel menu mobile */
    .menu-extracontent-controls .cop-mobile-tool .userinitials {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }
}

/* I link dentro l'editor TinyMCE non devono essere stilizzati come bottoni */
.cm-type-facetoface .tox-tinymce a,
.cm-type-facetoface .tox-editor-container a,
.cm-type-facetoface .tox .tox-edit-area a {
    background-color: transparent !important;
    color: revert !important;
    padding: 0 !important;
    font-weight: revert !important;
    font-size: revert !important;
    border-radius: 0 !important;
    line-height: revert !important;
    border-width: 0 !important;
    box-shadow: none !important;
    text-decoration: underline !important;
}


body.notloggedin .theme-plugins {
    display: none;
}


body.notloggedin .menu-toggle {
    display: none;
}