/* ---------------------------------------------------------------------------
   Sino + painel de notificacoes — handoff `SIDEBAR_NOTIFICACOES_PORTAL.md`.

   Duas metades com temas opostos, de proposito: o sino vive dentro da sidebar escura e
   herda os tokens `--sb-*` de `sidebar_v2.css`; o painel e uma superficie clara por cima
   do conteudo, com paleta propria declarada aqui.

   Monta em `sino_notificacoes` / `painel_notificacoes` / `toast_notificacao`
   (`layouts/sidebar_v2.py`) e nos callbacks de `callbacks/notificacoes.py`.

   A ultima secao e o toast de notificacao nova — handoff `TOAST_NOTIFICACAO_WEB.md`.
   --------------------------------------------------------------------------- */

/* ================================================================== SINO */

/* O sino e o hamburguer andam juntos no canto direito do cabecalho. O grupo existe para a
   sidebar colapsada poder empilhar os dois sem mexer no `justify-content: center` que o
   `sidebar_v2.css` aplica ao cabecalho naquele estado. */
#sidebar.sidebar_v2 .acoes_header_sidebar {
    display: flex;
    align-items: center;
    gap: 14px;
}

#sidebar.sidebar_v2 .btn_sino_sidebar {
    position: relative;
    display: flex;
    padding: 0;
    border: none;
    background: none;
    color: var(--sb-icone-inativo);
}

#sidebar.sidebar_v2 .btn_sino_sidebar:hover,
#sidebar.sidebar_v2 .btn_sino_sidebar.aberto {
    color: var(--sb-verde);
}

/* A borda da cor do fundo da barra e o que separa o badge do icone quando os dois se
   tocam — sem ela o circulo vermelho encosta no desenho do sino. */
#sidebar.sidebar_v2 .badge_sino_notificacoes {
    position: absolute;
    top: -6px;
    right: -7px;
    min-width: 16px;
    height: 16px;
    box-sizing: border-box;
    padding: 0 3px;
    border-radius: 8px;
    border: 2px solid var(--sb-fundo);
    background: #C4553F;
    color: #fff;
    font: 800 9px/12px Manrope, sans-serif;
    text-align: center;
}

/* Colapsada, o cabecalho vira coluna: hamburguer em cima, sino embaixo, como no rail do
   handoff. A ordem visual e invertida em relacao a arvore porque expandida o sino vem
   primeiro (a esquerda do hamburguer) e no rail ele vem depois. */
@media (min-width: 992px) {
    #sidebar.sidebar_v2.collapsed .acoes_header_sidebar {
        flex-direction: column-reverse;
        gap: 16px;
    }
}

/* ================================================================ PAINEL */

.overlay_notificacoes {
    position: fixed;
    inset: 0;
    z-index: 1048;
    background: rgba(10, 25, 20, .25);
}

/* O painel mora **dentro** do `#sidebar` na arvore (ver `painel_notificacoes`), e o
   `#sidebar` e `position: fixed` com `z-index` proprio — ou seja, um contexto de
   empilhamento. Dentro dele, o `z-index` do painel so disputa com os irmaos da barra;
   contra o que esta fora, quem vale e o numero do `#sidebar`. Por isso aumentar o valor
   aqui nao resolve: o dropdown do Mantine (portal no `body`, `z-index: 2000`) continuava
   por cima, e o que se via era a setinha do filtro sobre a lista de notificacoes.

   Quem sobe e a barra inteira, e so enquanto o painel esta aberto — fechada, ela volta ao
   normal para nao passar por cima de modal. O veu e o toast sao irmaos do painel, entao
   sobem junto. */
:root:has(#painel_notificacoes:not([hidden])) #sidebar.sidebar_v2 {
    z-index: 2100;
}

/* `fixed` e nao `absolute`: ancora na viewport, entao o `overflow` da barra nao o corta.
   O `left` acompanha a largura da sidebar — as duas variaveis vivem no `:root` de
   `sidebar_v2.css` justamente por serem lidas de fora da barra. */
.painel_notificacoes {
    position: fixed;
    left: calc(var(--sb-largura) + 12px);
    top: 16px;
    bottom: 16px;
    z-index: 1049;
    width: 400px;
    max-width: calc(100vw - 300px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #D8E2DE;
    border-radius: 10px;
    box-shadow: 0 24px 64px rgba(10, 30, 24, .28);
    font-family: Manrope, sans-serif;
}

@media (min-width: 992px) {
    #sidebar.sidebar_v2.collapsed .painel_notificacoes {
        left: calc(var(--sb-largura-rail) + 12px);
    }
}

/* No mobile a sidebar vira gaveta e a largura fixa nao cabe: o painel ocupa a tela com
   margem, como qualquer folha modal. */
@media (max-width: 991px) {
    .painel_notificacoes {
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }
}

.cabecalho_painel_notif {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #E4ECE9;
}

.esquerda_cabecalho_notif {
    display: flex;
    align-items: center;
    gap: 8px;
}

.titulo_painel_notif {
    font: 800 14px Manrope, sans-serif;
    color: #122A23;
}

.pill_novas_notif {
    padding: 2px 8px;
    border: 1px solid #BFDCD2;
    border-radius: 12px;
    background: #EAF3F0;
    font: 700 11px Manrope, sans-serif;
    color: #2E8B6F;
}

.acoes_cabecalho_notif {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn_fechar_notif {
    display: flex;
    padding: 0;
    border: none;
    background: none;
    color: #93A6A0;
}

.btn_fechar_notif:hover {
    color: #122A23;
}

.link_ler_todas_notif {
    font: 700 12px Manrope, sans-serif;
    color: #2E8B6F;
}

.link_ler_todas_notif:hover {
    color: #25765D;
}

/* A rolagem mora no container e nao na lista porque o `LoadingOverlay` e irmao dela:
   os dois precisam estar dentro do mesmo bloco posicionado para o overlay cobrir so esta
   area, e nao a pagina. */
.area_lista_notif {
    flex: 1;
    overflow-y: auto;
}

/* ------------------------------------------------------------------ linha */

/* `display: flex` e `padding` repetem o que o `.nav-link` do Bootstrap traz, porque a
   linha com destino e um `dbc.NavLink` — um `<a class="nav-link item_notif">`. O
   `text-decoration` e o `color` sao os que precisam ser desfeitos: sem eles a linha inteira
   vira texto azul sublinhado. */
.item_notif {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    background: #fff;
    text-decoration: none;
    color: inherit;
}

.item_notif:hover,
.item_notif:focus {
    text-decoration: none;
    color: inherit;
}

.item_notif + .item_notif {
    border-top: 1px solid #E4ECE9;
}

.item_notif:hover {
    background: #F7FAF9;
}

.item_notif.nao_lida {
    background: #FBFDFC;
}

.icone_notif {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Uma classe por tipo visual, que e o que a coluna `tipo` da notificacao carrega. */
.icone_notif.tipo_relatorio,
.icone_notif.tipo_ok {
    background: #EAF3F0;
    border: 1px solid #BFDCD2;
    color: #2E8B6F;
}

.icone_notif.tipo_atencao {
    background: #FCF7EC;
    border: 1px solid #EAD9B0;
    color: #D9A13B;
}

.icone_notif.tipo_erro {
    background: #FDF6F4;
    border: 1px solid #F0D5D0;
    color: #C4553F;
}

.corpo_notif {
    flex: 1;
    min-width: 0;
}

.linha_titulo_notif {
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
}

.titulo_notif {
    font: 700 13px Manrope, sans-serif;
    color: #122A23;
}

/* Nao lida em 800; lida em 700. E a unica diferenca de peso da lista. */
.item_notif.nao_lida .titulo_notif {
    font-weight: 800;
}

.quando_notif {
    flex: none;
    font: 500 11px Manrope, sans-serif;
    color: #93A6A0;
}

.texto_notif {
    margin-top: 2px;
    font: 500 12px/1.5 Manrope, sans-serif;
    color: #6B7F78;
}

.acao_notif {
    display: inline-block;
    margin-top: 6px;
    font: 700 12px Manrope, sans-serif;
    color: #2E8B6F;
    padding: 0;
}

.acao_notif:hover {
    color: #25765D;
}

.ponto_nao_lida_notif {
    width: 8px;
    height: 8px;
    flex: none;
    margin-top: 5px;
    border-radius: 50%;
    background: #2E8B6F;
}

/* ------------------------------------------------------- vazio e rodape */

.vazio_notif {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 18px;
    text-align: center;
}

.circulo_vazio_notif {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #EAF3F0;
    color: #2E8B6F;
    display: flex;
    align-items: center;
    justify-content: center;
}

.texto_vazio_notif {
    font: 600 13px Manrope, sans-serif;
    color: #6B7F78;
}


/* ================================================================= TOAST */

/* Card que anuncia a notificacao recem-chegada, no canto inferior direito. So o contador
   do sino subindo nao chama atencao: o handoff pede tres sinais ao mesmo tempo — este
   card, o sino balancando e o anel pulsando no badge.

   `position: fixed` e nao um filho do painel: o toast aparece com o painel fechado, que e
   justamente o caso de quem esta trabalhando em outra tela. */
.toast_notif {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 60;
    width: 360px;
    overflow: hidden;
    border: 1px solid #D8E2DE;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(10, 25, 20, .16);
    animation: toastIn .28s cubic-bezier(.2, .8, .3, 1);
    font-family: Manrope, sans-serif;
}

@media (max-width: 575px) {
    /* No celular 360px de largura fixa encostaria nas duas bordas. */
    .toast_notif {
        right: 12px;
        left: 12px;
        width: auto;
    }
}

.conteudo_toast_notif {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
}

/* Mesma caixa do icone do painel, inclusive as cores por tipo: e a mesma notificacao,
   vista duas vezes. As classes `tipo_*` vem do callback, como na lista. */
.icone_toast_notif {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icone_toast_notif.tipo_relatorio,
.icone_toast_notif.tipo_ok {
    background: #EAF3F0;
    border: 1px solid #BFDCD2;
    color: #2E8B6F;
}

.icone_toast_notif.tipo_atencao {
    background: #FCF7EC;
    border: 1px solid #EAD9B0;
    color: #D9A13B;
}

.icone_toast_notif.tipo_erro {
    background: #FDF6F4;
    border: 1px solid #F0D5D0;
    color: #C4553F;
}

.corpo_toast_notif {
    flex: 1;
    min-width: 0;
}

.linha_titulo_toast_notif {
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
}

.titulo_toast_notif {
    font: 800 13px Manrope, sans-serif;
    color: #122A23;
}

.quando_toast_notif {
    flex: none;
    font: 500 11px Manrope, sans-serif;
    color: #93A6A0;
}

.texto_toast_notif {
    margin-top: 2px;
    font: 500 12px/1.5 Manrope, sans-serif;
    color: #6B7F78;
}

.acoes_toast_notif {
    display: flex;
    gap: 14px;
    margin-top: 8px;
}

.acao_toast_notif {
    font: 700 12px Manrope, sans-serif;
    color: #2E8B6F;
}

.acao_toast_notif:hover {
    color: #25765D;
}

.dispensar_toast_notif {
    font: 600 12px Manrope, sans-serif;
    color: #93A6A0;
}

.dispensar_toast_notif:hover {
    color: #6B7F78;
}

.trilho_vida_toast_notif {
    height: 3px;
    background: #EAF3F0;
}

.vida_toast_notif {
    height: 100%;
    width: 100%;
    background: #2E8B6F;
    transform-origin: left;
    animation: toastVida 30s linear forwards;
}

/* Os dois sinais no sino valem enquanto o toast estiver na tela, e por isso saem de um
   `:has` no toast em vez de uma classe que algum callback teria de pendurar e tirar do
   botao: o `className` do sino ja e Output do `toggle_painel_notificacoes`, e dois
   callbacks disputando a mesma propriedade so somariam corrida. */
:root:has(#toast_notificacao:not([hidden])) #sidebar.sidebar_v2 .btn_sino_sidebar {
    animation: sinoShake .9s ease both;
    transform-origin: top center;
}

/* Anel pulsando atras do badge. `::before` e nao um `<span>` a mais porque o elemento e
   so desenho — nao ha o que o callback escreva nele. */
:root:has(#toast_notificacao:not([hidden])) #sidebar.sidebar_v2 .badge_sino_notificacoes::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 8px;
    background: #C4553F;
    animation: ping 1.3s ease-out infinite;
    z-index: -1;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastVida {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@keyframes sinoShake {
    0%, 100% { transform: rotate(0); }
    15%      { transform: rotate(14deg); }
    30%      { transform: rotate(-11deg); }
    45%      { transform: rotate(8deg); }
    60%      { transform: rotate(-5deg); }
    75%      { transform: rotate(2deg); }
}

@keyframes ping {
    from { transform: scale(1); opacity: .7; }
    to   { transform: scale(2.2); opacity: 0; }
}

/* Quem pediu menos animacao no sistema recebe os tres sinais sem movimento: o toast
   continua aparecendo e sumindo na hora certa, so nao desliza, nao balanca e nao pulsa. */
@media (prefers-reduced-motion: reduce) {
    .toast_notif,
    :root:has(#toast_notificacao:not([hidden])) #sidebar.sidebar_v2 .btn_sino_sidebar,
    :root:has(#toast_notificacao:not([hidden])) #sidebar.sidebar_v2 .badge_sino_notificacoes::before {
        animation: none;
    }

    .vida_toast_notif {
        animation: none;
        transform: scaleX(0);
    }
}