/* ═══════════════════════════════════════════════════════════════════════════
   POPOVER PANELS — Notifiche & Messaggi
   Selettori ricavati dai template Mustache di Moodle:
     lib/templates/popover_region.mustache
     message/output/popup/templates/notification_content_item.mustache
     message/output/popup/templates/message_content_item.mustache
   Stile brand COP Academy: dark #273E4D, accent #D3521F
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Pannello contenitore (data-region="popover-region-container") ───────── */

[data-region="popover-region-container"] {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    min-width: 340px !important;
    max-width: 380px !important;
}

/* ── Header: .popover-region-header-container ───────────────────────────── */

.popover-region-header-container {
    background-color: #273E4D !important;
    color: #ffffff !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: none !important;
}

.popover-region-header-container .popover-region-header-text {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    letter-spacing: 0.02em;
}

.popover-region-header-container .popover-region-header-actions a {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 12px !important;
    text-decoration: none !important;
    transition: color 0.15s;
}

/* ── Badge contatore non letti (.count-container) ───────────────────────────
   Tondo per 1 cifra, pill per 2 cifre (es. "99").
   height = diametro, min-width = diametro, border-radius = metà altezza. */

.count-container {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 8px !important;
    background-color: #D3521F !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: -4px !important;
    right: -6px !important;
}


/* Solo la X di chiusura — check e rotellina restano invariati */
[data-action="close-notification-popover"] .icon,
[data-action="close-notification-popover"] img,
[data-action="close-notification-popover"] i {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

.popover-region-header-container .popover-region-header-actions a:hover {
    color: #ffffff !important;
}

/* ── Contenuto scrollabile: .popover-region-content-container ────────────── */

.popover-region-content-container {
    background: #ffffff !important;
    max-height: 420px !important;
    overflow-y: auto !important;
    padding: 0 !important;
}

.popover-region-content-container::-webkit-scrollbar {
    width: 4px;
}

.popover-region-content-container::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 4px;
}

/* ── Singolo item notifica: .content-item-container.notification ─────────── */

.content-item-container {
    display: block !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 12px 18px !important;
    transition: background 0.12s !important;
    text-decoration: none !important;
    color: inherit !important;
}

.content-item-container:hover {
    background-color: #f7f9fc !important;
    text-decoration: none !important;
}

/* Non letto: barra accent a sinistra */
.content-item-container.unread {
    border-left: 3px solid #D3521F !important;
    background-color: #fff8f5 !important;
    padding-left: 15px !important;
}

/* Testo notifica */
.content-item-container .notification-message {
    color: #273E4D !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    margin-bottom: 4px !important;
}

/* Timestamp */
.content-item-container .timestamp {
    color: #888 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
}

/* ── Singolo item messaggio: .content-item ───────────────────────────────── */

.content-item-container .content-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Avatar mittente */
.content-item-container .profile-image-container img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0;
}

/* Nome mittente */
.content-item-container .content-item-body h3 {
    color: #273E4D !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 0 3px !important;
}

/* Testo anteprima messaggio */
.content-item-container .content-item-body p {
    color: #666 !important;
    font-size: 12px !important;
    margin: 0 !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Badge contatore non letti */
.content-item-container .unread-count-container {
    margin-left: auto;
    flex-shrink: 0;
}

.content-item-container [data-region="unread-count"] {
    background-color: #D3521F !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    min-width: 20px;
    height: 20px;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 5px !important;
}

/* ── Footer "Vedi tutti": .see-all-link / .popover-region-footer-container ── */

.see-all-link {
    text-decoration: none !important;
    display: block !important;
}

.popover-region-footer-container {
    background-color: transparent !important;
    border-top: 1px solid #eee !important;
    padding: 11px 18px !important;
    text-align: center !important;
}

.popover-region-seeall-text {
    color: #D3521F !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: opacity 0.15s;
}

.see-all-link:hover .popover-region-seeall-text {
    opacity: 0.75 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HEADER ICONS — dimensioni e spaziature
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * COP Academy — Header Icons: dimensioni e spaziature
 * =====================================================
 * Modifica questo file per personalizzare autonomamente ogni icona
 * dell'header a destra (cerca, notifiche, messaggi, avatar/omino, burger).
 *
 * Il file è diviso in due macro-sezioni:
 *   A) DESKTOP  — icone in .header-tools (visibili ≥ 992px)
 *   B) MOBILE   — icone spostate in .menu-extracontent-controls (< 992px)
 *                 + burger button
 *
 * I popover di Moodle sono identificati dall'attributo data-region:
 *   data-region="popover-region-notifications"  → Notifiche
 *   data-region="popover-region-messages"        → Messaggi
 *
 * Per attivare una regola: rimuovi i commenti /* e * / attorno al valore.
 */


/* ═══════════════════════════════════════════════════════════════════════════
   A) DESKTOP  (viewport ≥ 992px)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── A1. CERCA ──────────────────────────────────────────────────────────────
   Elemento: button.tool-search dentro .header-tools
   L'icona è un <i class="icon1"> dentro il button */

.header-tools .tool-search {
    /* padding: 0 8px; */        /* spazio interno sinistro/destro */
    /* margin: 0; */
}

.header-tools .tool-search i.icon1 {
    /* font-size: 24px; */       /* dimensione icona */
    /* color: #273E4D; */        /* colore icona */
}


/* ── A2. NOTIFICHE ──────────────────────────────────────────────────────────
   Elemento: [data-region="popover-region-notifications"]
   Il toggle è [data-region="popover-region-toggle-notifications"] */

.header-tools [data-region="popover-region-notifications"] {
    /* padding: 0 8px; */
    /* margin: 0; */
}

.header-tools [data-region="popover-region-toggle-notifications"] {
    padding-left: 16px !important;
    /* padding: 0; */
}

.header-tools [data-region="popover-region-toggle-notifications"] .icon {
    /* font-size: 24px; */
    /* width: 24px; */
    /* height: 24px; */
    /* color: #273E4D; */
}


/* ── A3. MESSAGGI ───────────────────────────────────────────────────────────
   Elemento: [data-region="popover-region-messages"] */

.header-tools [data-region="popover-region-messages"] {
   
    /* margin: 0; */
}

.header-tools [data-region="popover-region-messages"] .popover-region-toggle {
    padding-left: 16px !important;
    /* padding: 0; */
}

.header-tools [data-region="popover-region-messages"] .popover-region-toggle .icon {
    /* font-size: 24px; */
    /* width: 24px; */
    /* height: 24px; */
    /* color: #273E4D; */
}


/* ── A4. AVATAR / OMINO (utente loggato) ────────────────────────────────────
   Elemento: .header-tools-link.tool-login
   Contiene .userinitials (cerchio con le iniziali) */

.header-tools .header-tools-link.tool-login {
    /* padding: 0 8px; */
    /* margin: 0; */
}

.header-tools .header-tools-link.tool-login .userinitials {
    /* width: 34px; */           /* diametro del cerchio */
    /* height: 34px; */
    /* font-size: 13px; */       /* dimensione testo iniziali */
    /* border-radius: 50%; */
    /* background-color: #f0f0f0; */
    /* border: 2px solid #555; */
    /* color: #333; */
}

/* Avatar ospite (non loggato): SVG persona iniettato via ::before */
body.notloggedin .header-tools .header-tools-link.tool-login .loginbtn::before {
    /* width: 26px; */
    /* height: 26px; */
}


/* ── A5. GAP TRA LE ICONE ───────────────────────────────────────────────────
   Distanza uniforme tra tutti gli elementi della toolbar desktop */

.header-tools.tools-pos2 {
    /* gap: 20px; */
}


/* ═══════════════════════════════════════════════════════════════════════════
   B) MOBILE  (viewport < 992px)
   Le icone desktop vengono spostate in .menu-extracontent-controls dal JS;
   ogni elemento riceve la classe .cop-mobile-tool.
   I popover mantengono i loro data-region originali.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {

    /* ── B0. BURGER BUTTON ──────────────────────────────────────────────────
       Il tasto hamburger che apre il menu mobile */

    .show-menu {
        /* padding: 0 12px; */
        /* color: #273E4D; */
    }

    .show-menu .icon1 {
        /* font-size: 24px; */
    }


    /* ── B1. CERCA (mobile) ─────────────────────────────────────────────────
       Elemento spostato: button.tool-search con classe .cop-mobile-tool */

    .menu-extracontent-controls .cop-mobile-tool.tool-search {
        /* padding: 0 6px; */
    }

    .menu-extracontent-controls .cop-mobile-tool.tool-search i.icon1 {
        /* font-size: 22px; */
        /* width: 22px; */
        /* height: 22px; */
        /* color: #273E4D; */
    }


    /* ── B2. NOTIFICHE (mobile) ─────────────────────────────────────────────
       Elemento spostato: [data-region="popover-region-notifications"]
       con classe .cop-mobile-tool */

    .menu-extracontent-controls [data-region="popover-region-notifications"] {
        /* padding: 0 6px; */
    }

    .menu-extracontent-controls [data-region="popover-region-toggle-notifications"] .icon {
        /* font-size: 22px; */
        /* width: 22px; */
        /* height: 22px; */
    }


    /* ── B3. MESSAGGI (mobile) ──────────────────────────────────────────────
       Elemento spostato: [data-region="popover-region-messages"]
       con classe .cop-mobile-tool */

    .menu-extracontent-controls [data-region="popover-region-messages"] {
        /* padding: 0 6px; */
    }

    .menu-extracontent-controls [data-region="popover-region-messages"] .popover-region-toggle .icon {
        /* font-size: 22px; */
        /* width: 22px; */
        /* height: 22px; */
    }


    /* ── B4. AVATAR / OMINO (mobile) ────────────────────────────────────────
       Elemento spostato: .header-tools-link.tool-login con .cop-mobile-tool */

    .menu-extracontent-controls .cop-mobile-tool.header-tools-link.tool-login {
        /* padding: 0 6px; */
    }

    .menu-extracontent-controls .cop-mobile-tool.header-tools-link.tool-login .userinitials {
        /* width: 28px; */
        /* height: 28px; */
        /* font-size: 11px; */
    }


    /* ── B5. GAP TRA LE ICONE MOBILE ────────────────────────────────────────
       Distanza tra tutti i bottoni nel menu mobile */

    .menu-extracontent-controls {
        /* gap: 4px; */
    }

}