/* Contenedor: sombra y borde para separarlo del subnav (el encabezado ya no usa --vz-primary amarillo) */
#notificationDropdown .dropdown-menu.notification-dropdown-panel {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.16);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-top: 0.35rem;
}

/* Cabecera: carbón como el topbar (bg-primary en Stockly es amarillo #fec527 y arruina contraste con text-white) */
#notificationDropdown .notification-dropdown-head {
    background: #383838 !important;
    background-image: none !important;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#notificationDropdown .notification-dropdown-new-badge {
    background-color: #fec527;
    color: #2a2a2a !important;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.35em 0.65em;
}

/* Pestaña "Todas": legible sobre cabecera oscura */
#notificationDropdown .notification-dropdown-head .nav-tabs-custom .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 0.35rem 0.35rem 0 0;
    padding: 0.45rem 0.9rem;
}

#notificationDropdown .notification-dropdown-head .nav-tabs-custom .nav-link:hover:not(.active) {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

#notificationDropdown .notification-dropdown-head .nav-tabs-custom .nav-link.active {
    color: #383838 !important;
    background-color: #f5f1eb !important;
    font-weight: 600;
}

/* Panel completo: solo cuando está abierto (.show). Sin .show, display:flex ganaba al display:none de Bootstrap y el panel quedaba siempre visible. */
#notificationDropdown .dropdown-menu.notification-dropdown-panel.show {
    max-height: min(85vh, 520px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#notificationDropdown .notification-dropdown-panel .dropdown-head {
    flex: 0 0 auto;
}

#notificationDropdown .notification-dropdown-panel #notificationItemsTabContent {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Lista con scroll; el bloque "Ver todas" queda fijo abajo */
#notificationDropdown .notification-dropdown-panel .tab-pane.active.show {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Estilos para notificaciones no leídas */
.notification-item.unread {
    background-color: #fff8e6;
    border-left: 3px solid #fec527;
}

    .notification-item.unread:hover {
        background-color: #ffeebc;
    }

/* ✅ Hacer items más compactos */
.notification-item {
    padding: 0.65rem 0.75rem !important;
    margin-bottom: 0.35rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
}

    .notification-item:hover {
        background-color: #f8f9fa;
    }

    /* ✅ Reducir espaciado interno */
    .notification-item .avatar-xs {
        width: 1.75rem;
        height: 1.75rem;
    }

    .notification-item .avatar-title {
        font-size: 0.875rem;
        width: 1.75rem;
        height: 1.75rem;
    }

    .notification-item h6 {
        font-size: 0.8125rem;
        line-height: 1.3;
        margin-bottom: 0.25rem;
    }

    .notification-item p {
        font-size: 0.75rem;
        line-height: 1.4;
        margin-bottom: 0.25rem;
    }

    .notification-item .fs-11 {
        font-size: 0.6875rem !important;
    }

/* Badge de severidad */
.avatar-title {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Lista: ocupa el espacio disponible bajo el max del panel; scroll interno */
#notificationDropdown .notification-dropdown-panel .notifications-scroll-container {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
}

.notifications-scroll-container {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

    .notifications-scroll-container::-webkit-scrollbar {
        width: 6px;
    }

    .notifications-scroll-container::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 3px;
    }

    .notifications-scroll-container::-webkit-scrollbar-thumb {
        background-color: #cbd5e1;
        border-radius: 3px;
    }

        .notifications-scroll-container::-webkit-scrollbar-thumb:hover {
            background-color: #94a3b8;
        }

/* ✅ Botón "Ver todas" */
#notificationDropdown .notification-dropdown-panel .view-all-notifications {
    flex: 0 0 auto;
}

.view-all-notifications {
    border-top: 1px solid #e9ecef;
    padding: 0.75rem;
    background-color: #fff;
    margin: 0;
}

    .view-all-notifications:hover {
        background-color: #f8f9fa;
    }

    .view-all-notifications a {
        color: #b78004;
        font-size: 0.8125rem;
    }

        .view-all-notifications a:hover {
            color: #d69505;
        }

/* Empty state */
.empty-notification-elem {
    padding: 2rem 1rem;
}

    .empty-notification-elem img {
        max-width: 80px;
    }

    .empty-notification-elem h6 {
        font-size: 0.9375rem;
        margin-top: 1rem;
    }