/*
=================================================
COMPONENTE 7 — NOTIFICAÇÕES
Version: 1.1.0
Atualizado em: 23/09/2026 - push no navegador (Web Push + PWA: manifest, service worker, inscrições, envio); tempo relativo corrigido (UTC)
Sininho + marcador de quantidade (header), lista de
notificações dentro do sheet. Paleta neutra por padrão
— só o marcador de "tem coisa nova" usa uma cor viva,
reaproveitada do vermelho de alerta já usado no sistema
(mesma família do status "Faltou").
=================================================
*/

/*
=================================================
"CHROME" DO SHEET (.jatai-hw-sheet*) — duplicado de
propósito
Essas classes já existem no C3 (componente3-aulas.css) —
mas o C3 só carrega os PRÓPRIOS arquivos pra aluna em
páginas específicas (homeworks, aulas, dashboard,
reposições — ver jatai_c3_assets_required()). O sino de
notificações mora no header, que aparece em TODA página,
inclusive Calendário e Acessos, onde o C3 não carrega pra
aluna. Resultado: o sheet até abria, só que sem nenhum
estilo (sem moldura, sem fundo escurecido) — parecia que
"não abria nada".

Como o C7 já carrega sem condição nenhuma de página (só
não carrega no wp-admin), a correção é ter essas poucas
regras aqui TAMBÉM, pra nunca depender de qual página é
ou de quem está logado. Se as duas folhas de estilo
carregarem juntas (gestora/teacher, ou aluna numa página
que já tem C3), não tem problema — são os mesmos valores,
só reaplicam a mesma coisa duas vezes, sem conflito.
=================================================
*/

.jatai-hw-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999998 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.jatai-hw-sheet__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
}

.jatai-hw-sheet__content {
    position: relative !important;
    width: 100% !important;
    max-width: 360px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
    text-align: center !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
    box-sizing: border-box !important;
}

.jatai-hw-sheet__titulo-linha {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.jatai-hw-sheet__titulo {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #353B46 !important;
}

.jatai-hw-sheet__fechar {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: none !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 26px !important;
    line-height: 1 !important;
    color: #8A92A1 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body button.jatai-notif-sino {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    color: #5B6372 !important;
    cursor: pointer !important;
    appearance: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: background .12s ease !important;
}

html body button.jatai-notif-sino:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

.jatai-notif-sino__marcador {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #d55d60 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/*
=================================================
LISTA DE NOTIFICAÇÕES (dentro do sheet)
=================================================
*/

.jatai-notif-lista {
    display: flex !important;
    flex-direction: column !important;
}

html body a.jatai-notif-item,
html body div.jatai-notif-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 14px 4px !important;
    border-top: 1px solid #E6EBF2 !important;
    text-decoration: none !important;
    cursor: default !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
}

html body a.jatai-notif-item {
    cursor: pointer !important;
}

.jatai-notif-lista .jatai-notif-item:first-child {
    border-top: none !important;
}

.jatai-notif-item__icone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #F0F3F8 !important;
    color: #5B6372 !important;
    margin-top: 2px !important;
}

/* Variante com foto (ex: rosto de quem se inscreveu) no lugar do
ícone genérico — a foto preenche o círculo inteiro, sem o fundo
creme nem o padding pensados pro SVG. */
.jatai-notif-item__icone--foto {
    background: transparent !important;
    overflow: hidden !important;
}

.jatai-notif-item__foto {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}

.jatai-notif-item__corpo {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

.jatai-notif-item__titulo {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1F2328 !important;
}

.jatai-notif-item__mensagem {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #5B6372 !important;
    line-height: 1.4 !important;
}

.jatai-notif-item__tempo {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #A3AAB7 !important;
    margin-top: 2px !important;
}

/* Não lida — pontinho vermelho sutil na esquerda do ícone, sem
precisar mudar o fundo do item inteiro (fica limpo, não grita). */
.jatai-notif-item--nao-lida .jatai-notif-item__icone {
    position: relative !important;
    background: #FBF0E4 !important;
    color: #A8763F !important;
}

.jatai-notif-item--nao-lida .jatai-notif-item__icone--foto {
    background: transparent !important;
}

.jatai-notif-item--nao-lida .jatai-notif-item__icone::after {
    content: "" !important;
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #d55d60 !important;
    border: 2px solid #ffffff !important;
}

.jatai-notif-vazio {
    display: block !important;
    padding: 30px 4px !important;
    text-align: center !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #A3AAB7 !important;
}

/*
=================================================
TEMA ESCURO
=================================================
O "chrome" do sheet (.jatai-hw-sheet*) é duplicado aqui de propósito
(mesmo motivo do bloco claro lá em cima: o C7 carrega em TODA página,
inclusive onde o C3 — dono original dessas classes — não carrega pra
aluna) — então a versão ESCURA dessas mesmas classes também precisa
estar duplicada aqui, senão o sino abria um sheet com moldura escura
em algumas páginas e clara em outras, dependendo se o C3 também tinha
carregado ali.
*/

html[data-jatai-tema="escuro"] body .jatai-hw-sheet__content {
    background: #1C1C1E !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important;
}

[data-jatai-tema="escuro"] .jatai-hw-sheet__titulo {
    color: #F2F2F2 !important;
}

[data-jatai-tema="escuro"] .jatai-hw-sheet__fechar {
    color: #98989D !important;
}

/* Sino + marcador (header) */
html[data-jatai-tema="escuro"] body button.jatai-notif-sino {
    color: #98989D !important;
}

html[data-jatai-tema="escuro"] body button.jatai-notif-sino:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Marcador (vermelho) já contrasta bem em qualquer fundo — só a
borda branca sólida em volta dele, pensada pra "recortar" contra o
sino claro, precisa virar da cor do próprio sino no escuro, senão
sobra um aro branco estranho. */
[data-jatai-tema="escuro"] .jatai-notif-sino__marcador {
    border-color: #1C1C1E !important;
}

/* Lista de notificações (dentro do sheet) */
html[data-jatai-tema="escuro"] body a.jatai-notif-item,
html[data-jatai-tema="escuro"] body div.jatai-notif-item {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

[data-jatai-tema="escuro"] .jatai-notif-item__icone {
    background: #2C2C2E !important;
    color: #98989D !important;
}

[data-jatai-tema="escuro"] .jatai-notif-item__icone--foto {
    background: transparent !important;
}

[data-jatai-tema="escuro"] .jatai-notif-item__titulo {
    color: #F2F2F2 !important;
}

[data-jatai-tema="escuro"] .jatai-notif-item__mensagem {
    color: #98989D !important;
}

[data-jatai-tema="escuro"] .jatai-notif-item__tempo {
    color: #6E6E73 !important;
}

/* Não lida — pontinho vermelho + ícone com o "aceso" próprio */
[data-jatai-tema="escuro"] .jatai-notif-item--nao-lida .jatai-notif-item__icone {
    background: rgba(217, 164, 65, 0.2) !important;
    color: #E4C989 !important;
}

[data-jatai-tema="escuro"] .jatai-notif-item--nao-lida .jatai-notif-item__icone--foto {
    background: transparent !important;
}

[data-jatai-tema="escuro"] .jatai-notif-item--nao-lida .jatai-notif-item__icone::after {
    border-color: #1C1C1E !important;
}

[data-jatai-tema="escuro"] .jatai-notif-vazio {
    color: #6E6E73 !important;
}

/*
=================================================
PUSH NO NAVEGADOR — convite "Ativar notificações"
(só aparece no app instalado na tela de início,
enquanto a pessoa ainda não decidiu) + botão avulso
do shortcode [jatai_botao_notificacoes_push].
=================================================
*/

.jatai-push-convite {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    z-index: 2147482000 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 14px 16px !important;
    background: #ffffff !important;
    border: 0.5px solid #E4E8EF !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(31, 35, 40, 0.18) !important;
    box-sizing: border-box !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    animation: jatai-push-descer .28s cubic-bezier(.32, .72, 0, 1) !important;
}

@keyframes jatai-push-descer {
    from { transform: translateY(-16px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.jatai-push-convite__icone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #F6ECE6 !important;
    color: #A85A3D !important;
}

.jatai-push-convite__corpo {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex: 1 1 200px !important;
    min-width: 0 !important;
}

.jatai-push-convite__titulo {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #1F2328 !important;
}

.jatai-push-convite__texto {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    color: #5B6372 !important;
}

.jatai-push-convite__acoes {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
}

.jatai-push-convite button,
button.jatai-push-botao {
    -webkit-appearance: none !important;
    appearance: none !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    border-radius: 999px !important;
    padding: 9px 16px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.jatai-push-convite button.jatai-push-convite__dispensar {
    background: transparent !important;
    border: none !important;
    color: #8A92A1 !important;
}

.jatai-push-convite button.jatai-push-convite__ativar,
button.jatai-push-botao {
    background: #A85A3D !important;
    border: none !important;
    color: #ffffff !important;
}

.jatai-push-convite button:disabled,
button.jatai-push-botao:disabled {
    opacity: .6 !important;
    cursor: default !important;
}

button.jatai-push-botao[hidden] {
    display: none !important;
}

button.jatai-push-botao:disabled {
    background: #E6EBF2 !important;
    color: #5B6372 !important;
    opacity: 1 !important;
}

html[data-jatai-tema="escuro"] body .jatai-push-convite {
    background: #1C1C1E !important;
    border-color: #2C2C2E !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

html[data-jatai-tema="escuro"] body .jatai-push-convite__icone {
    background: #2C2C2E !important;
}

html[data-jatai-tema="escuro"] body .jatai-push-convite__titulo {
    color: #F2F2F2 !important;
}

html[data-jatai-tema="escuro"] body .jatai-push-convite__texto {
    color: #AEAEB2 !important;
}

html[data-jatai-tema="escuro"] body button.jatai-push-botao:disabled {
    background: #2C2C2E !important;
    color: #AEAEB2 !important;
}