/*
   Notificações (toastr) — desenho do canvas "Notificações G360 — claro e escuro".

   Cartão neutro (branco no claro, #252c37 no escuro) com a cor do tipo só no
   mosaico do ícone, como os atalhos do Início; título a negrito, mensagem por
   baixo, ✕ e barra de tempo fina. O toastr não tem sítio para um ícone, por isso
   o mosaico é o ::before do cartão e o glifo (Tabler) é o ::after, pintado por
   máscara na cor do tipo.

   Autónoma de propósito: o _LayoutLogin também usa o toastr e não carrega o
   tema.css, por isso os tokens --nt-* vivem aqui. O escuro só acende nas páginas
   com data-theme="dark" (ver tema.css).

   O theme.css legado estiliza o toastr com #toast-container > div (1,0,1) e as
   cores com .toast-success {…!important}; daqui os seletores com .toast (1,1,0)
   e os !important no fundo. Comportamento (✕, barra, aviso/erro sem prazo):
   js/App/notificacoes.js.
*/

#toast-container {
    --nt-bg: #ffffff;
    --nt-line: #e6e8ef;
    --nt-shadow: 0 12px 32px -10px rgba(20, 25, 43, .22), 0 2px 6px rgba(20, 25, 43, .06);
    --nt-shadow-hover: 0 16px 40px -10px rgba(20, 25, 43, .3), 0 2px 6px rgba(20, 25, 43, .08);
    --nt-strong: #181c32;
    --nt-text: #5f6677;
    --nt-close: #8a90a0;
    --nt-close-hover: #eef0f6;
    --nt-action: #2663a3;

    /* Ícones nos tons -700: no mosaico claro os tons de base ficavam abaixo de 3:1. */
    --nt-ok-tile: #e6f7f0;   --nt-ok-ico: #147a52;   --nt-ok-bar: #1aa66f;
    --nt-info-tile: #e9f3ff; --nt-info-ico: #2663a3; --nt-info-bar: #3699ff;
    --nt-warn-tile: #fff6e0; --nt-warn-ico: #a37300; --nt-warn-bar: #e8a600;
    --nt-err-tile: #fff1f4;  --nt-err-ico: #dc3545;  --nt-err-bar: #dc3545;
}

[data-theme="dark"] #toast-container {
    --nt-bg: #252c37;
    --nt-line: #303742;
    --nt-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3);
    --nt-shadow-hover: 0 18px 44px -12px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .35);
    --nt-strong: #eaeff6;
    --nt-text: #adb1b8;
    --nt-close: #7d8087;
    --nt-close-hover: #2b323d;
    --nt-action: #84bcfb;

    --nt-ok-tile: #11382c;   --nt-ok-ico: #57d298;   --nt-ok-bar: #57d298;
    --nt-info-tile: #1d3249; --nt-info-ico: #84bcfb; --nt-info-bar: #84bcfb;
    --nt-warn-tile: #3b2f0f; --nt-warn-ico: #e1ae54; --nt-warn-bar: #e1ae54;
    --nt-err-tile: #45252e;  --nt-err-ico: #f66c6f;  --nt-err-bar: #f66c6f;
}

/* Por baixo da topbar (antes tapava a bandeira e o avatar). */
#toast-container.toast-top-right {
    top: 20px;
    right: 20px;
}

body:has(.topbar) #toast-container.toast-top-right {
    top: 80px;
}

/* ---- Cartão ---- */

#toast-container > .toast {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 360px;
    max-width: calc(100vw - 24px);
    min-height: 62px;
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 14px 48px 14px 60px;
    overflow: hidden;
    border: 1px solid var(--nt-line);
    border-radius: 14px;
    background-color: var(--nt-bg) !important;
    background-image: none !important;
    box-shadow: var(--nt-shadow);
    color: var(--nt-text);
    font-family: Poppins, Helvetica, sans-serif;
    opacity: 1;

    --nt-tile: var(--nt-info-tile);
    --nt-ico: var(--nt-info-ico);
    --nt-bar: var(--nt-info-bar);
    --nt-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 9h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/svg%3E");
}

#toast-container > .toast:hover {
    box-shadow: var(--nt-shadow-hover);
    opacity: 1;
}

/* Mosaico do tipo e o seu ícone. */
#toast-container > .toast::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 14px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--nt-tile);
}

#toast-container > .toast::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 21px;
    width: 18px;
    height: 18px;
    background-color: var(--nt-ico);
    -webkit-mask: var(--nt-glifo) center / 18px 18px no-repeat;
    mask: var(--nt-glifo) center / 18px 18px no-repeat;
}

#toast-container > .toast-success {
    --nt-tile: var(--nt-ok-tile);
    --nt-ico: var(--nt-ok-ico);
    --nt-bar: var(--nt-ok-bar);
    --nt-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E");
}

#toast-container > .toast-warning {
    --nt-tile: var(--nt-warn-tile);
    --nt-ico: var(--nt-warn-ico);
    --nt-bar: var(--nt-warn-bar);
    --nt-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}

#toast-container > .toast-error {
    --nt-tile: var(--nt-err-tile);
    --nt-ico: var(--nt-err-ico);
    --nt-bar: var(--nt-err-bar);
    --nt-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}

/* ---- Texto ----
   Quase todas as chamadas da app mandam só a mensagem: sozinha, ela é o
   título. Com título (toastr.x(msg, titulo)), passa a linha de apoio. */

#toast-container .toast-title,
#toast-container .toast-message {
    color: var(--nt-strong);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    word-wrap: break-word;
}

#toast-container .toast-title + .toast-message {
    margin-top: 2px;
    color: var(--nt-text);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
}

#toast-container .toast-message label {
    color: inherit;
}

/* Acção dentro da mensagem (ex.: "Tentar de novo"). */
#toast-container .toast-message a,
#toast-container .toast-message button {
    display: inline-block;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--nt-action);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

#toast-container .toast-message a:hover,
#toast-container .toast-message button:hover {
    color: var(--nt-action);
    text-decoration: underline;
}

/* ---- Fechar ---- */

#toast-container .toast-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    float: none;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background-color: transparent;
    color: transparent;
    font-size: 0;
    text-shadow: none;
    opacity: 1;
}

#toast-container .toast-close-button::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    background-color: var(--nt-close);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/* Só uma frase (sem título + descrição, o caso de quase todas as chamadas):
   ícone e ✕ ao centro na vertical. Com as duas linhas ficam alinhados ao topo. */
#toast-container > .toast:not(:has(.toast-title + .toast-message))::before,
#toast-container > .toast:not(:has(.toast-title + .toast-message)) .toast-close-button {
    top: calc(50% - 16px);
}

#toast-container > .toast:not(:has(.toast-title + .toast-message))::after {
    top: calc(50% - 9px);
}

#toast-container .toast-close-button:hover,
#toast-container .toast-close-button:focus-visible {
    background-color: var(--nt-close-hover);
    color: transparent;
    opacity: 1;
    outline: none;
}

#toast-container .toast-close-button:hover::before,
#toast-container .toast-close-button:focus-visible::before {
    background-color: var(--nt-strong);
}

/* ---- Barra de tempo (só nas que fecham sozinhas) ---- */

#toast-container .toast-progress {
    left: 0;
    bottom: 0;
    height: 3px;
    background-color: var(--nt-bar);
    opacity: .6;
}

/* ---- Ecrãs estreitos: o tema legado encolhe e muda o padding ---- */

@media (max-width: 480px) {
    #toast-container.toast-top-right {
        right: 12px;
        left: 12px;
    }

    #toast-container > .toast {
        width: auto;
        max-width: none;
    }
}