/* SSVS-2319. Regras que o protótipo usa e o style.bundle.css licenciado não tem. */

/* O bundle nao poe position no .kt-header__topbar-icon, entao sem isto o contador
   ancora no .kt-header__topbar-item, que ocupa os 60px de altura do header. */
#kt_notification_bell .kt-header__topbar-icon {
    position: relative;
}

/* style.bundle.css:35645 estica qualquer .kt-badge dentro do topbar-wrapper para
   42x42 #2d1e5f 1.6rem — e o badge de avatar do Metronic, e cobre o sino inteiro.
   Aquele seletor tem especificidade 0,4,0: e preciso o id para vencer, e cada
   propriedade tem de ser desfeita explicitamente. */
#kt_notification_bell .kt-header__topbar-wrapper .kt-badge--counter {
    position: absolute;
    top: -1px;
    right: -1px;
    height: 18px;
    width: auto;
    min-width: 14px;
    max-height: 18px;
    max-width: none;
    margin: 0;
    padding: 0 2px;
    border: 2px solid #ffffff;
    box-sizing: content-box;
    border-radius: 9999px;
    background: #d8003f;
    color: #ffffff;
    font-size: 0.8rem;
    line-height: 1;
}

/* O tema suprime foco em toda a aplicacao com !important:
   style.bundle.css:16472 (html a, html button, body a, body button) e :8000 (.btn),
   mais :8002 que zera o box-shadow de foco do Bootstrap. Vencer exige !important,
   e o escopo fica na feature para nao alterar o resto do sistema. */
#kt_notification_bell .kt-notification__item:focus-visible,
#kt_notification_bell .kt-header__topbar-wrapper:focus-visible,
a.kt-notification-focus:focus-visible,
button.kt-notification-focus:focus-visible,
.kt-checkbox--brand > input:focus-visible ~ span {
    outline: 2px solid #14273d !important;
    outline-offset: 2px;
}

#kt_notification_bell .kt-notification__item:focus-visible {
    outline-offset: -2px;
    background-color: #f0f3ff;
}

/* .kt-notification__custom e flex sem wrap: rotulo longo empurra os botoes para
   fora dos 380px do dropdown. */
#kt_notification_bell .kt-notification__custom {
    flex-wrap: wrap;
    gap: 10px;
}

#kt_notification_bell .kt-notification__custom .btn {
    white-space: normal;
}

/* O item sem link e um button: precisa dos resets para nao quebrar a linha do item. */
button.kt-notification__item {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}

/* O :after de style.bundle.css:28603 poe um chevron em todo item da lista,
   inclusive no que nao navega. */
button.kt-notification__item:after {
    content: none;
}

/* O bundle marca lido com opacity .5 (28601), o que joga o titulo para 2,21:1 e a
   meta para 1,90:1. A distincao continua por peso e por cor. */
#kt_notification_bell .kt-notification .kt-notification__item--read {
    opacity: 1;
}

#kt_notification_bell .kt-notification__item--read .kt-notification__item-title {
    color: #5c6070;
    font-weight: 400;
}

/* Com a opacidade fora, peso e cor sozinhos nao distinguem lido de nao lido.
   A trilha e inset: sinal geometrico, nao depende de cor e nao desloca o layout. */
#kt_notification_bell .kt-notification__item:not(.kt-notification__item--read) {
    box-shadow: inset 3px 0 0 0 #a8003a;
    background-color: #fdfbfc;
}

#kt_notification_bell .kt-notification__item:not(.kt-notification__item--read):hover {
    background-color: #f7f8fa;
}

#kt_notification_bell .kt-notification__item:not(.kt-notification__item--read):focus-visible {
    background-color: #f0f3ff;
}

/* #74788d sobre branco da 4,36:1 e reprova os 4,5:1 exigidos. */
#kt_notification_bell .kt-notification__item .kt-notification__item-time,
.kt-user-card__desc,
.kt-notification-caption {
    color: #5c6070;
}

.kt-user-card__desc,
.kt-notification-caption {
    font-weight: 300;
    font-size: 0.95rem;
}

.kt-notification-caption {
    margin: 3px 0 0;
}

/* Pilhas de status e tipo. kt-badge--unified-light e #ffffff sobre
   rgba(255,255,255,.1) (32540): existe para fundo escuro e fica invisivel na tabela.
   Sem nowrap a pilula quebra em duas linhas e vira bloco na coluna estreita. */
.kt-badge.kt-notification-badge--neutral,
.kt-badge.kt-notification-badge--danger,
.kt-badge.kt-notification-badge--warning,
.kt-badge.kt-notification-badge--info {
    white-space: nowrap;
}

.kt-badge.kt-notification-badge--neutral {
    color: #4a4d5c;
    background: #eef0f5;
}

.kt-badge.kt-notification-badge--danger {
    color: #a8003a;
    background: #fde8ef;
}

.kt-badge.kt-notification-badge--warning {
    color: #7a5300;
    background: #fbf3e3;
}

.kt-badge.kt-notification-badge--info {
    color: #0f5c85;
    background: #e6f2f9;
}

/* .kt-user-card__name carrega padding-left: 1rem (29201) de quando havia avatar
   ao lado, o que desalinha o titulo da propria legenda em 13px. */
#kt_notification_bell .kt-user-card {
    padding: 1.5rem;
}

#kt_notification_bell .kt-user-card__name {
    padding-left: 0;
}

/* data-height do tema gera height fixo, nao max-height, e o PerfectScrollbar
   e inicializado com a lista vazia e nunca atualizado depois do AJAX. */
#kt_notification_list {
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#kt_notification_bell .kt-notification__item-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* O bundle nao poe min-width:0 no -details (o prototipo poe). Sem isso o item flex
   nao encolhe abaixo do conteudo e a linha nowrap da empresa transborda em vez de
   truncar, engolindo o marcador de outro estabelecimento. */
#kt_notification_bell .kt-notification__item-details {
    min-width: 0;
}

/* No bundle o icone e centralizado verticalmente; com titulo de 2 linhas ele precisa
   ficar no topo, como no prototipo. */
#kt_notification_bell .kt-notification__item-icon {
    align-self: flex-start;
    padding-top: 2px;
}

/* Só o nome truncar: o marcador de outro estabelecimento nao encolhe nem sai. */
.kt-notification__item-company {
    display: flex;
    align-items: baseline;
    min-width: 0;
}

.kt-notification__item-company-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kt-notification__item-sep {
    flex: 0 0 auto;
    padding: 0 4px;
    opacity: 0.6;
}

.kt-notification__item-other-company {
    flex: 0 0 auto;
    white-space: nowrap;
    color: #8a5d00;
}

.kt-notification__item-title--unread {
    font-weight: 500;
    color: #14273d;
}

.kt-notification-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
}

.kt-notification-empty__icon {
    opacity: 0.35;
    margin-bottom: 10px;
}

.kt-notification-empty__title {
    font-size: 1rem;
    color: #595d6e;
    font-weight: 500;
}

.kt-notification-empty__desc {
    font-size: 0.95rem;
    color: #5c6070;
    font-weight: 300;
    margin-top: 2px;
}

.kt-notification-skeleton__row {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    align-items: center;
}

.kt-notification-skeleton__bar {
    background: linear-gradient(90deg, #f0f1f6 25%, #e6e8f0 50%, #f0f1f6 75%);
    background-size: 200% 100%;
    animation: kt-notification-shimmer 1.2s infinite;
    border-radius: 3px;
}

@keyframes kt-notification-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Nenhum dos blocos prefers-reduced-motion do bundle cobre o kt-pulse (27571):
   sao todos guardas de transition do Bootstrap. */
@media (prefers-reduced-motion: reduce) {
    .kt-notification-skeleton__bar { animation: none; }

    #kt_notification_bell .kt-pulse .kt-pulse__ring {
        animation: none;
        opacity: 0;
    }
}