/* =====================================================================
   Painel do sino (navbar) em Vidro. Carregado em TODAS as páginas (head.html), inclusive as
   que ainda usam Volt e não carregam identidade-glass.css: por isso os tokens --nv-* são
   próprios (mesmos valores do Vidro claro/noturno) e a cor só aparece nas declarações deles.
   Gatilho do escuro: <html data-theme="dark">. Mudou a paleta do Vidro? Atualize aqui também.
   ===================================================================== */
:root {
    --nv-tinta: #1D1D1F;
    --nv-grafite: #55555B;
    --nv-verde: #0B7A5A;
    --nv-acento: var(--lg-verde-escuro, #096A4D);   /* segue a paleta do Vidro; fora dele (Volt) cai no verde */
    --nv-ambar: #B45309;
    --nv-alerta: #C4254A;
    --nv-vidro-a: rgba(255,255,255,.82);
    --nv-vidro-b: rgba(255,255,255,.60);
    --nv-solido: rgba(255,255,255,.98);
    --nv-borda: rgba(255,255,255,.6);
    --nv-brilho: rgba(255,255,255,.9);
    --nv-sombra: rgba(20,40,60,.16);
    --nv-linha: rgba(20,40,60,.08);
    --nv-hover: rgba(20,40,60,.05);
    --nv-realce: rgba(11,122,90,.09);
    --nv-campo: rgba(255,255,255,.7);
    --nv-chip-ok: rgba(11,122,90,.14);
    --nv-chip-alerta: rgba(224,165,38,.22);
    --nv-chip-critico: rgba(196,37,74,.13);
    --nv-contraste: rgba(0,0,0,.35);
    --nv-fonte: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
}
:root[data-theme="dark"] {
    --nv-tinta: #F2F2F4;
    --nv-grafite: #A8A8B0;
    --nv-verde: #34D399;
    --nv-acento: var(--lg-verde-escuro, #34D399);
    --nv-ambar: #F0B84A;
    --nv-alerta: #FF6B88;
    --nv-vidro-a: rgba(34,41,52,.84);
    --nv-vidro-b: rgba(22,27,34,.72);
    --nv-solido: rgba(22,27,34,.99);
    --nv-borda: rgba(255,255,255,.14);
    --nv-brilho: rgba(255,255,255,.14);
    --nv-sombra: rgba(0,0,0,.55);
    --nv-linha: rgba(255,255,255,.09);
    --nv-hover: rgba(255,255,255,.07);
    --nv-realce: rgba(52,211,153,.12);
    --nv-campo: rgba(255,255,255,.08);
    --nv-chip-ok: rgba(52,211,153,.16);
    --nv-chip-alerta: rgba(240,184,74,.16);
    --nv-chip-critico: rgba(255,107,136,.16);
    --nv-contraste: rgba(255,255,255,.6);
}

html .dropdown-menu.notif-panel {
    width: 380px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; font-family: var(--nv-fonte); color: var(--nv-tinta);
    border: 1px solid var(--nv-borda); border-radius: 28px;
    background: linear-gradient(135deg, var(--nv-vidro-a), var(--nv-vidro-b));
    -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
    box-shadow: 0 18px 44px var(--nv-sombra), inset 0 1px 0 var(--nv-brilho);
}
html .dropdown-menu.notif-panel .notif-panel-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border: 0;
}
html .dropdown-menu.notif-panel .notif-panel-title { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--nv-tinta); }
html .dropdown-menu.notif-panel .notif-panel-count {
    flex: none; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
    color: var(--nv-verde); background: var(--nv-chip-ok); box-shadow: inset 0 1px 0 var(--nv-brilho);
}
html .dropdown-menu.notif-panel .notif-panel-list { max-height: 340px; padding: 0 8px 8px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
html .dropdown-menu.notif-panel .notif-item {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 36px 11px 12px; margin: 2px 0;
    border: 0; border-radius: 20px; background: transparent; box-shadow: none; text-decoration: none; color: var(--nv-tinta);
    transition: background-color .15s ease;
}
html .dropdown-menu.notif-panel .notif-item:hover { background: var(--nv-hover); }
html .dropdown-menu.notif-panel .notif-item:focus-visible { outline: 3px solid var(--nv-verde); outline-offset: -2px; }
html .dropdown-menu.notif-panel .notif-item.notif-item-unread { background: var(--nv-realce); box-shadow: none; }
html .dropdown-menu.notif-panel .notif-item.notif-item-unread:hover { background: var(--nv-realce); filter: brightness(1.04); }
html .dropdown-menu.notif-panel .notif-item.notif-item-unread::after {
    content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--nv-verde);
}
html .dropdown-menu.notif-panel .notif-item-icon {
    flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--nv-tinta); background: var(--nv-campo); box-shadow: inset 0 1px 0 var(--nv-brilho);
}
html .dropdown-menu.notif-panel .notif-item-icon.notif-tom-success { color: var(--nv-verde); background: var(--nv-chip-ok); }
html .dropdown-menu.notif-panel .notif-item-icon.notif-tom-warning { color: var(--nv-ambar); background: var(--nv-chip-alerta); }
html .dropdown-menu.notif-panel .notif-item-icon.notif-tom-danger { color: var(--nv-alerta); background: var(--nv-chip-critico); }
.notif-svg { width: 19px; height: 19px; display: block; }
html .dropdown-menu.notif-panel .notif-item-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
html .dropdown-menu.notif-panel .notif-item-title { font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--nv-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .dropdown-menu.notif-panel .notif-item-unread .notif-item-title { font-weight: 600; }
html .dropdown-menu.notif-panel .notif-item-time { font-size: 12.5px; color: var(--nv-grafite); }
html .dropdown-menu.notif-panel .notif-empty { padding: 32px 16px 36px; text-align: center; color: var(--nv-grafite); }
html .dropdown-menu.notif-panel .notif-empty .notif-svg { width: 30px; height: 30px; margin: 0 auto 10px; }
html .dropdown-menu.notif-panel .notif-panel-footer {
    display: block; padding: 14px 20px 16px; text-align: center; font-size: 14.5px; font-weight: 600; text-decoration: none;
    color: var(--nv-acento) !important; background: transparent; border-top: 1px solid var(--nv-linha);  /* !important: o Volt escuro pinta links de azul */
}
html .dropdown-menu.notif-panel .notif-panel-footer:hover { background: var(--nv-hover); color: var(--nv-acento) !important; }
html .dropdown-menu.notif-panel .notif-panel-footer:focus-visible { outline: 3px solid var(--nv-acento); outline-offset: -4px; border-radius: 0 0 28px 28px; }

/* Celular: o painel ocupa a largura da tela (alinhado à direita do sino ele sairia pela esquerda) */
@media (max-width: 575px) {
    html .dropdown-menu.notif-panel.show {
        position: fixed !important; top: 132px !important; left: 12px !important; right: 12px !important;
        width: auto; max-width: none; transform: none !important; margin: 0 !important;
    }
}
@media (prefers-reduced-transparency: reduce) {
    html .dropdown-menu.notif-panel { background: var(--nv-solido); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    html .dropdown-menu.notif-panel { background: var(--nv-solido); border-color: var(--nv-contraste); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    html .dropdown-menu.notif-panel .notif-item { transition: none; }
}